Leaflet - Interaktive Karten auf der eigenen Internetseite

Communities Deutschland (Germany)
1

Hi :slight_smile:

Bevor noch jemand anderes verzweifelt poste ich hier einmal meine Codeschnipsel. Eventuell kann es jemand für die eigene Seite gebrauchen. Den Link zum Ursprung dieser Seite fand ich vor einigen Wochen hier irgendwo im Forum. Leider weiß ich nicht mehr wo.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
	<link rel="icon" type="image/x-icon" href="HOMEPAGE/favicon.png">
	<link rel="shortcut icon" type="image/x-icon" href=".. /favicon.png">
	<link type="image/x-icon" href=".. /favicon.png">
        <title>Berlin</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            html, body {
                width: 100%;
                height: 100%;
            }

            #map {
                width: 100%;
                height: 100%;
            }
        </style>

        <link rel="stylesheet" href="leaflet.css" />
        <!--[if lte IE 8]>
            <link rel="stylesheet" href="leaflet.ie.css" />
        <![endif]-->
        <link rel="stylesheet" href="l.geosearch.css" />
	<link rel="stylesheet" href="L.Control.Locate.css" />
        <script src="jquery.js"></script>
        <script src="leaflet.js"></script>
        <script src="l.control.geosearch.js"></script>
        <script src="l.geosearch.provider.bing.js"></script>
        <script src="l.geosearch.provider.esri.js"></script>
        <script src="l.geosearch.provider.google.js"></script>
        <script src="l.geosearch.provider.nokia.js"></script>
        <script src="l.geosearch.provider.openstreetmap.js"></script>
	<script src="L.Control.Locate.js"></script>
    </head>
    <body>
        <div id="map"></div>

        <script>
            L.QuadKeyTileLayer = L.TileLayer.extend({
                getTileUrl: function (tilePoint) {
                    this._adjustTilePoint(tilePoint);
                    return L.Util.template(this._url, {
                        s: this._getSubdomain(tilePoint),
                        q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl())
                    });
                },
                _quadKey: function (x, y, z) {
                    var quadKey = [];
                    for (var i = z; i > 0; i--) {
                        var digit = '0';
                        var mask = 1 << (i - 1);
                        if ((x & mask) != 0) {
                            digit++;
                        }
                        if ((y & mask) != 0) {
                            digit++;
                            digit++;
                        }
                        quadKey.push(digit);
                    }
                    return quadKey.join('');
                }
            });

            var map = new L.Map('map');

            var osmMapnik = new L.TileLayer(
                'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: 'Map data © OpenStreetMap contributors'
                }
            );

            var osmMapnikbw = new L.TileLayer(
                'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: 'Map data © OpenStreetMap contributors'
                }
            );

            var GIScience = new L.TileLayer(
                'http://129.206.66.245:8007/tms_b.ashx?x={x}&y={y}&z={z}',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: '<a href="http://korona.geog.uni-heidelberg.de/contact.html">OpenMapSurfer</a>'
                }
            );

            var GIScience2 = new L.TileLayer(
                'http://129.206.66.245:8006/tms_il.ashx?x={x}&y={y}&z={z}',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: '<a href="http://korona.geog.uni-heidelberg.de/contact.html">OpenMapSurfer</a>'
                }
            );

            var GIScience3 = new L.TileLayer(
                'http://129.206.66.245:8004/tms_hs.ashx?x={x}&y={y}&z={z}',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: '<a href="http://korona.geog.uni-heidelberg.de/contact.html">OpenMapSurfer</a>'
                }
            );

	   var mapquest_osm = new L.TileLayer(
		'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
	 	{
		   maxZoom: 18,
		   minZoom: 1,
		   attribution: "Map: Tiles Courtesy of <a href=\"http://www.mapquest.com/\" target=\"_blank\">MapQuest</a> <img src=\"http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/img/logo-mapquest.png\" style=\"\" />", 
		   subdomains: ["otile1","otile2","otile3","otile4"]
	   	}
	   );

	   var mapquest_aerial = new L.TileLayer(
		'http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg',
	 	{
		   maxZoom: 10,
		   minZoom: 1,
		   subdomains: '1234',
		   attribution: "Map: <a href=\"http://www.mapquest.com/\" target=\"_blank\">MapQuest</a> <img src=\"http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/img/logo-mapquest.png\" />, Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency\" style=\"\" />", 
	   	}
	   );

	    var thunderforestcycle = new L.TileLayer(
		'http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
		    subdomains: 'abc',
                    attribution: 'Map data &copy; <a href="http://opencyclemap.org">OpenCycleMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
                }
            );

	   var thunderforestoutdoors = new L.TileLayer(
		'http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
		    subdomains: 'abc',
                    attribution: 'Map data &copy; <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
                }
            );

	   var thunderforestlandscape = new L.TileLayer(
		'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
		    subdomains: 'abc',
                    attribution: 'Map data &copy; <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
                }
            );

	   var thunderforesttransport = new L.TileLayer(
		'http://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
		    subdomains: 'abc',
                    attribution: 'Map data &copy; <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
                }
            );

	   var thunderforesttransportdark = new L.TileLayer(
		'http://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
		    subdomains: 'abc',
                    attribution: 'Map data &copy; <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
                }
            );

	   var osmde = new L.TileLayer(
		'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
                }
            );

	    var opnv = new L.TileLayer(
		'http://tile.memomaps.de/tilegen/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href="http://memomaps.de/">ÖPNV Karte</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
                }
            );

	   var tour = new L.TileLayer(
		'http://{s}.wanderreitkarte.de/topo/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: '<a href="http://memomaps.de/">Reit- und Wanderkarte</a>',
		    subdomains: [ 'www', 'topo', 'topo2', 'topo3', 'topo4', 'topo5', 'topo6', 'topo7' ]
                }
            );

	   var transport = new L.TileLayer(
		'http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL</a> &mdash; Imagery © <a href="http://opencyclemap.org/">opencyclemap.org</a>'
                }
            );

	   var hikebike = new L.TileLayer(
		'http://{s}.tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png',
                {
                    minZoom: 1,
                    maxZoom: 17,
                    attribution: '<a href=\"http://hikebikemap.de\" target=\"_blank\" style=\"\">HikeBikeMap.de</a>'
                }
            );

	   var hill = new L.TileLayer(
		'http://{s}.tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png',
                {
                    minZoom: 1,
                    maxZoom: 18,
                    attribution: 'Hillshading: SRTM3 v2 (<a href="http://www2.jpl.nasa.gov/srtm/">NASA</a>)'
                }
            );

            var toner = new L.TileLayer(
                'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
                {
                    subdomains:"abcd",
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
                }
            );

            var watercolor = new L.TileLayer(
                'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',
                {
                    subdomains:"abcd",
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
                }
            );

            var googleMaps = new L.TileLayer(
                'http://mt.google.com/vt?&x={x}&y={y}&z={z}',
                {
                    attribution: "<a href=\'http://maps.google.com/\'>Google</a> Maps",
                    subdomains: "1234",
                    tileSize: 256,
                    minZoom: 3,
                    maxZoom: 20
                }
            );

            var googleSatellite = new L.TileLayer(
                'http://mt.google.com/vt?lyrs=s&x={x}&y={y}&z={z}',
                {
                    attribution:"<a href=\'http://maps.google.com/\'>Google</a> Maps Satellite",
                    subdomains:"1234",
                    tileSize:256,
                    minZoom:3,
                    maxZoom:20
                }
            );

            var googleHybrid = new L.TileLayer(
                'http://mt.google.com/vt?lyrs=y&x={x}&y={y}&z={z}',
                {
                    attribution:"<a href=\'http://maps.google.com/\'>Google</a> Maps Satellite",
                    subdomains:"1234",
                    tileSize:256,
                    minZoom:3,
                    maxZoom:20
                }
            );

            var bingMaps = new L.QuadKeyTileLayer(
                'http://ecn.t{s}.tiles.virtualearth.net/tiles/r{q}?g=864&mkt=en-gb&lbl=l1&stl=h&shading=hill&n=z',
                {
                    subdomains: "0123",
                    minZoom: 3,
                    maxZoom: 19,
                    attribution: "<a href=\'http://maps.bing.com/\'>Bing</a> map data copyright Microsoft and its suppliers"
                }
            );

            var bingAerial = new L.QuadKeyTileLayer(
                'http://ecn.t{s}.tiles.virtualearth.net/tiles/a{q}?g=737&n=z',
                {
                    subdomains: "0123",
                    minZoom: 3,
                    maxZoom: 19,
                    attribution: "<a href=\'http://maps.bing.com/\'>Bing</a> map data copyright Microsoft and its suppliers"
                }
            );

            var hillshading = new L.TileLayer(
                'http://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png',
                {
                    attribution: "Hillshading by <a href=\'http://wiki.openstreetmap.org/wiki/User:Colin_Marquardt/Hike_%26_Bike_Map\'>Colin Marquardt</a> from NASA SRTM data",
                    minZoom: 3,
                    maxZoom: 16,
                    overlay: true
                }
            );

            var openrailwaymap = new L.TileLayer(
                'http://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png',
                {
                    attribution: "<a href=\'http://www.openrailwaymap.org/\'>OpenRailwayMap</a>",
                    minZoom: 3,
                    maxZoom: 16,
                    overlay: true
                }
            );

            var lonviaCycling = new L.TileLayer(
                'http://tile.lonvia.de/cycling/{z}/{x}/{y}.png',
                {
                    attribution: "<a href=\'http://waymarkedtrails.org/de/\'>Lonvia Radwege</a>",
                    minZoom: 3,
                    maxZoom: 15,
                    overlay: true
                }
            );

            var lonviaHiking = new L.TileLayer(
                'http://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png',
                {
                    attribution: "<a href=\'http://waymarkedtrails.org/de/\'>Lonvia Wanderwege</a>",
                    minZoom: 3,
                    maxZoom: 16,
                    overlay: true
                }
            );

		L.control.locate({
			follow: true,
			title: "Position bestimmen",
			popupText: ["Sie befinden sich innerhalb "," von diesem Punkt"]
		}).addTo(map);

		var markerLayer = L.layerGroup();

		var marker1 = L.marker([52.516389, 13.377778]).bindPopup('Brandenburger Tor').addTo(markerLayer);
		var marker2 = L.marker([52.518611, 13.376111]).bindPopup('Reichstag').addTo(markerLayer);
		var marker3 = L.marker([52.517941, 13.374631]).bindPopup('Denkmal').addTo(markerLayer);

            map.setView(new L.LatLng(52.51, 13.37),14);
            map.addLayer(osmde);
            map.addLayer(markerLayer);

            var baseMaps = {
                "OpenStreetMap (deutscher Stil)": osmde,
		"Nahverkehrskarte": transport,
                "ÖPNV": opnv,
		"Fahrradkarte": thunderforestcycle,
		"Thunderforest Outdoors": thunderforestoutdoors,
		"Thunderforest Landscape": thunderforestlandscape,
		"Thunderforest Transport": thunderforesttransport,
		"Thunderforest Transport Dark": thunderforesttransportdark,
		"Reit- und Wanderkarte": tour,
                "OpenStreetMap (Mapnik)": osmMapnik,
		"OpenStreetMap (Mapnik/sw)": osmMapnikbw,
		"Mapquest": mapquest_osm,
		"Mapquest Aerial": mapquest_aerial,
		"HikeBikeMap": hikebike,
                "Stamen Toner": toner,
                "Stamen Watercolor": watercolor,
                "Google Maps": googleMaps,
                "Google Maps Satellite": googleSatellite,
                "Google Maps Hybrid": googleHybrid,
                "Bing Maps": bingMaps,
                "Bing Aerial View": bingAerial
            };

            var overlayMaps = {
		"Marker": markerLayer,
		"OpenRailwayMap": openrailwaymap,
		"Lonvia Radwege": lonviaCycling,
		"Lonvia Wanderwege": lonviaHiking,
		"OSM Verwaltungsgrenzen": GIScience,
		"ASTER GDEM": GIScience2,
		"ASTER GDEM & SRTM": GIScience3,
		"Schummerung SRTM3 v2": hill,
		"Schummerung": hillshading
            };

            L.control.layers(baseMaps, overlayMaps).addTo(map);

            new L.Control.GeoSearch({
    provider: new L.GeoSearch.Provider.Google()
            }).addTo(map);
        </script>
    </body>
</html>

Eingesetzt wird Leaflet. Nicht wundern über die Fülle an Karten aber ich habe sie lediglich für diesen Post integriert. Ich selber nutze nur 3 Layer. Falls jemand noch interessante Karten (oder auch Codeverbesserungen) hat - nur her damit. :wink:

Benötigt:
https://github.com/smeijer/L.GeoSearch
https://github.com/domoritz/leaflet-locatecontrol
https://github.com/makinacorpus/Leaflet.FileLayer
https://github.com/mapbox/togeojson

Quelle(n):
skipperkongen.dk/
Thunderforest.com

Zusätzliche Layer:
OpenMapSurfer
Leaflet Provider Demo

Nebenbei: Über map.addLayer(osmde); wird in diesem Beispiel das Layer osmde standardmäßig angezeigt. Sollen die Marker per default aktiviert werden ergänzt man - wie im Beispiel - map.addLayer(markerLayer);. Die js liegen alle im Hauptverzeichnis. Wer etwas Ordnung halten möchte paßt die Pfade entsprechend an. :wink:

Edit: Fehler behoben und Link ergänzt.

2

Vermutlich http://leafletjs.com/examples/quick-start.html .

3

Also ich habe mich am Wochenende auch (nochmal, nachdem ich den Wochenbericht gelesen habe) mit dem Thema beschäftigt - da ich einen Wanderweg mit sämtlichen Elementen (Bänke, Wegweiser, Oberflächenbeschaffenheit darstellen wollte - und bin von einer eigenen Karte - mit weiss gott wie vielen overpass abfragen - und dem Ganzen Codeschnipselszeug zu http://umap.openstreetmap.fr/de/ gewechselt: zusammenklicken und dann mit iframe einbinden, fertig :wink:
eigentlich bin ich kein Fan von iframe, aber hier vertraue ich openstreetmap einfach mal

4

Nope - es war dieser Thread wo SammyHP seine Seite verlinkte.

Auf http://josm.openstreetmap.de/wiki/Maps und http://geo.inge.org.uk/gme_maps.htm gibt es einige weitere Links. Die habe ich aber nicht getestet.

Hatte ich nach unzähligen Versuchen auch vor aber irgendwie wollte ich es dann doch hinbekommen - obwohl ich von Scripten keine Ahnung habe und trial and error anwende. :wink:

Nun muss ich schauen wie das mit dem einblenden von Wetterdaten funktioniert, welche sich über die aktuell ausgewählte Karte legen.

Eventuell könnt ihr hier auch noch weitere Karten inkl. Links nennen, welche man verwenden kann.

            var osmMapnikbw = new L.TileLayer(
                'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png',
                {
                    minZoom: 3,
                    maxZoom: 18,
                    attribution: 'Map data © OpenStreetMap contributors'
                }
            );

attributions müßten ggf. noch angepaßt werden - ich habe da ggf. Fehler im ersten Post.

5

Die Thunderforest-Outdoor-Tiles

var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
var outlink = '<a href="http://thunderforest.com/">Thunderforest</a>';
var tf = L.tileLayer(
    'http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {
        attribution: '&copy; '+mapLink+' Contributors & '+outlink,
        maxZoom: 18,
    });
6

Kann man dein Ergebniss auch betrachten?

7

Hier der Versuch alles selbst zu bauen: http://www.haraldhartmann.de/osm
Hier eine ähnliche Umsetzung mit uMap: http://umap.openstreetmap.fr/de/map/rundwanderweg-panoramablick_13329 (ist aber noch nicht fertig, die wegbeschaffenheit fehlt noch)
Klar ist aber auch, dass man mit eigenen Skripten flexibler ist, es aber vom Gefühl her auch aufwendiger, trotz entsprechender Kenntnisse.

8

Ich habe noch ein paar Layer ergänzt.

Muss mich jetzt nur noch mit http://opentopomap.org beschäftigen. gpx möchte ich noch in den Code bekommen. :wink:

Edit: Falls jemand den Code für OpenTopoMap für obiges Beispiel vorliegen hat: bitte posten. :slight_smile:

Edit #2: Upload einer eigenen gpx habe ich integriert. Ich werde es im obigen Beispiel nicht erwähnen, da es mMn schon ausreichend Informationen sind.

9

In dem Codeschnipsel ist noch ein Fehler. Es ist eine Kartenlayer für meine Reit- und Wanderkarte definiert, die Attribution ist aber falsch, der Link führt zu einer völlig anderen Seite:

L.TileLayer(
‘http://{s}.wanderreitkarte.de/topo/{z}/{x}/{y}.png’,
{
minZoom: 3,
maxZoom: 18,
attribution: 'Reit- und Wanderkarte,

Bitte korrigieren.

bye, Nop

10

Ist drin - Danke. :slight_smile: