x

Leaflet - Interaktive Karten auf der eigenen Internetseite

Geschrieben von Zyras (Gast) am 27. Juli 2014 23:13:06: [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.

Antworten: