x

Leaflet - Interaktive Karten auf der eigenen Internetseite

  1. Leaflet - Interaktive Karten auf der eigenen Internetseite · Zyras (Gast) · 27.07.2014 23:13 · [flux]

    Hi 🙂

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

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

    Edit: Fehler behoben und Link ergänzt.

    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · gormo (Gast) · 28.07.2014 08:18 · [flux]

      Zyras wrote:

      Hi 🙂

      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 .

    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · Harald Hartmann (Gast) · 28.07.2014 08:26 · [flux]

      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 😉
      eigentlich bin ich kein Fan von iframe, aber hier vertraue ich openstreetmap einfach mal

    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · Zyras (Gast) · 28.07.2014 17:03 · [flux]

      gormo wrote:

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

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

      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.

    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · gormo (Gast) · 29.07.2014 11:03 · [flux]

      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,
});
    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · geodreieck4711 (Gast) · 29.07.2014 13:35 · [flux]

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

      Kann man dein Ergebniss auch betrachten?

    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · Harald Hartmann (Gast) · 30.07.2014 08:27 · [flux]

      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.

    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · Zyras (Gast) · 16.08.2014 10:30 · [flux]

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

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

      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.

    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · Nop (Gast) · 13.02.2016 12:13 · [flux]

      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

    • Re: Leaflet - Interaktive Karten auf der eigenen Internetseite · Zyras (Gast) · 27.02.2016 21:13 · [flux]

      Ist drin - Danke. 🙂