You are not logged in.

Announcement

*** NOTICE: forum.openstreetmap.org is being retired. Please request a category for your community in the new ones as soon as possible using this process, which will allow you to propose your community moderators.
Please create new topics on the new site at community.openstreetmap.org. We expect the migration of data will take a few weeks, you can follow its progress here.***

Pages: 1

#1 2014-07-27 23:13:06

Zyras
Member
From: Grevenbroich
Registered: 2008-11-10
Posts: 318
Website

Leaflet - Interaktive Karten auf der eigenen Internetseite

Hi 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.

Last edited by Zyras (2016-02-27 23:38:19)

Garmin eTrex® 30 - Garmin nüvi® 205 - Avatar: La Denrée' Tux - CrystalXP.net

Offline

#2 2014-07-28 08:18:17

gormo
Member
Registered: 2013-08-01
Posts: 2,119
Website

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

Zyras wrote:

Hi 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.

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

OSM hat nicht das Ziel bis Ende des Monats einen vollständigen Datensatz der Welt zu enthalten.
(nach S.W.) - Aber weil die Welt vielfältig ist, weil sie auch im Detail interessant ist, mag ich genaue Karten (nach C.)

Offline

#3 2014-07-28 08:26:31

Harald Hartmann
Member
From: 98667 Schönbrunn
Registered: 2014-04-02
Posts: 3,123
Website

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

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

Mein aktives Gebiet: Gemeinde Schleusegrund
Fingerprint meines Schlüssels: 71F7 3CD9 B647 9079 6B88 326E 8B8B 72AE 34F9 5AAD

Offline

#4 2014-07-28 17:03:40

Zyras
Member
From: Grevenbroich
Registered: 2008-11-10
Posts: 318
Website

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

gormo wrote:

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.

Harald Hartmann wrote:

zu http://umap.openstreetmap.fr/de/ gewechselt: zusammenklicken und dann mit iframe einbinden, fertig

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.

Last edited by Zyras (2014-07-28 17:23:09)

Garmin eTrex® 30 - Garmin nüvi® 205 - Avatar: La Denrée' Tux - CrystalXP.net

Offline

#5 2014-07-29 11:03:44

gormo
Member
Registered: 2013-08-01
Posts: 2,119
Website

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

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,
    });

Last edited by gormo (2014-07-29 11:04:40)

OSM hat nicht das Ziel bis Ende des Monats einen vollständigen Datensatz der Welt zu enthalten.
(nach S.W.) - Aber weil die Welt vielfältig ist, weil sie auch im Detail interessant ist, mag ich genaue Karten (nach C.)

Offline

#6 2014-07-29 13:35:18

geodreieck4711
Member
Registered: 2011-07-18
Posts: 119

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

Harald Hartmann wrote:

...... 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....



Kann man dein Ergebniss auch betrachten?

Offline

#7 2014-07-30 08:27:14

Harald Hartmann
Member
From: 98667 Schönbrunn
Registered: 2014-04-02
Posts: 3,123
Website

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

geodreieck4711 wrote:

Kann man dein Ergebniss auch betrachten?

Hier der Versuch alles selbst zu bauen: http://www.haraldhartmann.de/osm
Hier eine ähnliche Umsetzung mit uMap: http://umap.openstreetmap.fr/de/map/run … lick_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.

Mein aktives Gebiet: Gemeinde Schleusegrund
Fingerprint meines Schlüssels: 71F7 3CD9 B647 9079 6B88 326E 8B8B 72AE 34F9 5AAD

Offline

#8 2014-08-16 10:30:59

Zyras
Member
From: Grevenbroich
Registered: 2008-11-10
Posts: 318
Website

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

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. 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.

Last edited by Zyras (2014-08-18 22:01:56)

Garmin eTrex® 30 - Garmin nüvi® 205 - Avatar: La Denrée' Tux - CrystalXP.net

Offline

#9 2016-02-13 12:13:11

Nop
Moderator
Registered: 2009-01-26
Posts: 2,856

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

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: '<a href="http://memomaps.de/">Reit- und Wanderkarte</a>,

Bitte korrigieren.

bye, Nop

Nothing is too difficult for the man who does not have to do it himself...
Projekte: Reit- und Wanderkarte mit Navigation - Kartengenerator Map Composer - GPS Track Editor Track Guru

Offline

#10 2016-02-27 21:13:37

Zyras
Member
From: Grevenbroich
Registered: 2008-11-10
Posts: 318
Website

Re: Leaflet - Interaktive Karten auf der eigenen Internetseite

Ist drin - Danke. smile

Garmin eTrex® 30 - Garmin nüvi® 205 - Avatar: La Denrée' Tux - CrystalXP.net

Offline

Pages: 1

Board footer

Powered by FluxBB