SkipperGuide

SkipperGuide:Interne Dokumentation/Maps-OpenSeaMap-Integration

< SkipperGuide:Interne Dokumentation
Version vom 5. Juli 2023, 13:57 Uhr von Migration (Diskussion | Beiträge) (Textersetzung - „layers=openriverboat, osm-mapnik, osm-oseam, osm-oseam-cemt“ durch „layers=OpenSeaMap, OpenStreetMap“)

Demo

Die Karte wird geladen …

Code: 

{{
#display_map:
52.5,5.3~~Niederlande
| height= 400px
| width= 350px
| resizable=yes
| zoom=7
| service=openlayers
| layers=openriverboat, osm-mapnik,  osm-oseam, osm-oseam-cemt
}}

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;
}
Abgerufen von „https://skipperguide.de/index.php?title=SkipperGuide:Interne_Dokumentation/Maps-OpenSeaMap-Integration&oldid=53380“