SkipperGuide:Interne Dokumentation/Maps-OpenSeaMap-Integration

Demo

Die Karte wird geladen …

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"350px","height":"400px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":7,"defzoom":14,"layers":["OpenSeaMap","OpenStreetMap"],"image layers":[],"overlays":["OpenSeaMap"],"resizable":true,"fullscreen":true,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"\u003Cdiv class=\"mw-content-ltr mw-parser-output\" lang=\"de\" dir=\"ltr\"\u003E\u003Cp\u003ENiederlande\n\u003C/p\u003E\u003C/div\u003E","title":"","link":"","lat":52.5,"lon":5.3,"icon":""}],"imageoverlays":null}

Code:

{{
#display_map:
52.5,5.3~~Niederlande
| height= 400px
| width= 350px
| resizable=yes
| zoom=7
| service=openlayers
| layers=OpenSeaMap, OpenStreetMap
}}

Erforderliche Anpassungen

Die Extension "Maps" unterstützt nicht von Haus aus OpenSeaMap. Hierzu sind Erweiterungen am existierenden Extension-Code erforderlich. Großen Dank an Benutzer:Kannix für die Lösung des Problems!

Betroffene Dateien

• extensions\Maps\Maps_Settings.php
• extensions\Maps\includes\services\OpenLayers\OSM\OpenStreetMap.js
• extensions\Maps\includes\services\OpenLayers\OpenLayers\theme\default\style.css

extensions\Maps\Maps_Settings.php

Zeile 256: # Array of String. The default layers for Open Layers. This value will only be

	# used when the user does not provide one.
	$egMapsOLLayers = array(
		'osm-mapnik',
		'osm-cyclemap',
		'osmarender'
	);

wird zu:

	# Array of String. The default layers for Open Layers. This value will only be
	# used when the user does not provide one.
	$egMapsOLLayers = array(
		'osm-mapnik',
		'osm-cyclemap',
		'openriverboat',
		'osm-oseam',
		'osm-oseam-cemt'
	);

Zeile 276:

		'osmarender' => array( 'OpenLayers.Layer.OSM.Osmarender("OSM arender")', 'osm' ),
		'osm-mapnik' => array( 'OpenLayers.Layer.OSM.Mapnik("OSM Mapnik")', 'osm' ),
		'osm-cyclemap' => array( 'OpenLayers.Layer.OSM.CycleMap("OSM Cycle Map")', 'osm' ),

wird zu:

		'openriverboat' => array( 'OpenLayers.Layer.OSM.OpenRiverBoat("OpenRiverBoatMap")', 'osm' ),
		'osm-mapnik' => array( 'OpenLayers.Layer.OSM.Mapnik("OSM Mapnik")', 'osm' ),
		'osm-cyclemap' => array( 'OpenLayers.Layer.OSM.CycleMap("OSM Cycle Map")', 'osm' ),
		'osm-oseam' => array( 'OpenLayers.Layer.OSM.OSeaM("OSM OSeaM")', 'osm' ),
		'osm-oseam-cemt' => array( 'OpenLayers.Layer.OSM.OSeaMCEMT("OSM OSeaM-CEMT")', 'osm' ),

Zeile 284:

	# Layer group definitions. Group names must be different from layer names, and
	# must only contain layers that are present in $egMapsOLAvailableLayers.
	$egMapsOLLayerGroups = array(
		'yahoo' => array( 'yahoo-normal', 'yahoo-satellite', 'yahoo-hybrid' ),
		'bing' => array( 'bing-normal', 'bing-satellite', 'bing-hybrid' ),
		'osm' => array( 'osmarender', 'osm-mapnik', 'osm-cyclemap' ),
	);

wird zu:

	# Layer group definitions. Group names must be different from layer names, and
	# must only contain layers that are present in $egMapsOLAvailableLayers.
	$egMapsOLLayerGroups = array(
		'yahoo' => array( 'yahoo-normal', 'yahoo-satellite', 'yahoo-hybrid' ),
		'bing' => array( 'bing-normal', 'bing-satellite', 'bing-hybrid' ),
		'osm' => array( 'openriverboat', 'osm-mapnik', 'osm-cyclemap', 'osm-oseam', 'osm-oseam-cemt' ),
	);

extensions\Maps\includes\services\OpenLayers\OSM\OpenStreetMap.js

Folgender Code ist in der Klasse zu ergänzen:

// CUSTOM
/**
 * Class: OpenLayers.Layer.OSM.OpenRiverBoat
 *
 * Inherits from:
 *  - <OpenLayers.Layer.OSM>
 */
OpenLayers.Layer.OSM.OpenRiverBoat = OpenLayers.Class(OpenLayers.Layer.OSM, {
    /**
     * Constructor: OpenLayers.Layer.OSM.OpenRiverBoat
     *
     * Parameters:
     * name - {String}
     * options - {Object} Hashtable of extra options to tag onto the layer
     */
    initialize: function(name, options) {
        var url = [
            "http://a.tile.openstreetmap.fr/openriverboatmap/${z}/${x}/${y}.png",
            "http://b.tile.openstreetmap.fr/openriverboatmap/${z}/${x}/${y}.png",
            "http://c.tile.openstreetmap.fr/openriverboatmap/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({
            numZoomLevels: 19,
            buffer: 0,
            transitionEffect: "resize"
        }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },

    CLASS_NAME: "OpenLayers.Layer.OSM.OpenRiverBoat"
});


/**
 * Class: OpenLayers.Layer.OSM.OSeaMCEMT
 *
 * Inherits from:
 *  - <OpenLayers.Layer.OSMCEMT>
 */
OpenLayers.Layer.OSM.OSeaMCEMT = OpenLayers.Class(OpenLayers.Layer.OSM, {
    /**
     * Constructor: OpenLayers.Layer.OSM.OSeaMCEMT
     *
     * Parameters:
     * name - {String}
     * options - {Object} Hashtable of extra options to tag onto the layer
     */
    initialize: function(name, options) {
        var url = [
            "http://tiles.grade.de/tiles.py/cemt/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({
            numZoomLevels: 19,
            buffer: 0,
            transitionEffect: "resize",
            alpha           : true,
            isBaseLayer     : false
        }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },

    CLASS_NAME: "OpenLayers.Layer.OSM.OSeaMCEMT"
});


/**
 * Class: OpenLayers.Layer.OSM.OSeaM
 *
 * Inherits from:
 *  - <OpenLayers.Layer.OSM>
 */
OpenLayers.Layer.OSM.OSeaM = OpenLayers.Class(OpenLayers.Layer.OSM, {
    /**
     * Constructor: OpenLayers.Layer.OSM.OSeaM
     *
     * Parameters:
     * name - {String}
     * options - {Object} Hashtable of extra options to tag onto the layer
     */
    initialize: function(name, options) {
        var url = [
            "http://t1.openseamap.org/seamark/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({
            numZoomLevels: 19,
            buffer: 0,
            transitionEffect: "resize",
            alpha           : true,
            isBaseLayer     : false
        }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },

    CLASS_NAME: "OpenLayers.Layer.OSM.OSeaM"
});

extensions\Maps\includes\services\OpenLayers\OpenLayers\theme\default\style.css

Zeile 278:

.olImageLoadError {
    background-color: pink;
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE */
}

wird zu:

.olImageLoadError {
      /* when OL encounters a 404, don't display the pink image */
      display: none !important;
}