Landkarten mit Leaflet einbinden
(Version 2.0)
Leaflet stellt eine JavaScript-Bibliothek zum Einbinden von benutzerdefinierten und interaktiven Landkarten auf Webseiten zur Verfügung. Leaflet bietet selbst keine Kartenkacheln an, diese können aber von diversen Mapservern als Layer eingebunden werden. Im Gegensatz zu proprietären Lösungen wie der Google Maps API ist Leaflet Freie Software unter der BSD-Lizenz. Für viele der unterstützten Mapserver wird kein API-Key benötigt.
Die Bibliothek bietet eine Vielzahl von Konfigurationsmöglichkeiten, von denen hier nur die wichtigsten vorgestellt werden. Weitere Informationen zur Implementierung findet man in der ausführlichen Dokumentation.
Grundsätzliches
Um eine Landkarte mit Leaflet auf einer Website zu platzieren, muss der Quelltext dieser Seite bestimmte Elemente beinhalten. Diese sind im folgenden Beispiel dargestellt:
<!DOCTYPE html>
<html lang='de'>
<head>
<title>Landkarte mit Leaflet einbinden</title>
<meta charset='UTF-8'>
<style>
#mapbox { margin:auto; width:700px; height:500px; border:2px solid #777; }
.icon1 { filter:hue-rotate(180deg); }
/* Leaflet popups */
.leaflet-popup {}
.leaflet-popup-close-button { color:red !important; }
.leaflet-popup-content-wrapper { background:yellow !important; }
.leaflet-popup-content { color:hsl(207,84%,20%); line-height:1.4; font-size:15px; white-space:nowrap; }
.leaflet-popup-content a { font-weight:bold; font-size:18px; color:hsl(120,27%,44%); }
.leaflet-popup-tip-container {}
.leaflet-popup-tip { background:yellow !important; }
</style>
</head>
<body>
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=' crossorigin=''>
<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=' crossorigin=''></script>
<div id='mapbox'>
<noscript>
<p>Zur Ansicht der Karte muss JavaScript aktiviert sein!</p>
</noscript>
</div>
<script>
var map = L.map('mapbox').setView([50.94, 6.96], 5);
// OpenStreetMap tiles
var osm_url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm_attribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_streets = L.tileLayer(osm_url, {
maxZoom: 19,
attribution: osm_attribution
});
layer_streets.addTo(map);
</script>
</body>
</html>
Im <body> des Seitenquelltextes muss ein <div>-Container mit einem id-Attribut angelegt werden (hier: mapbox, Zeile 22). In diesen Container wird die Karte geladen. Die ID wird im Aufruf von L.map() (Zeile 28) referenziert.
Das Stylesheet und die Bibliothek werden in den Zeilen 20 und 21 geladen. Breite und Höhe des Conatiners werden in Zeile 7 definiert.
Die Konfiguratin der Karte erfolgt dann im <script>-Abschnitt ab Zeile 27.
Mit der Methode setView() werden in Zeile 28 die geografische Breite und Länge des Kartenmittelpunktes sowie der Zoomfaktor der Karte festgelegt.
In den Zeilen 30 bis 35 wird ein Kartenlayer definiert (hier: OpenStreetMap), der in Zeile 36 zur Karte hinzugefügt wird.
Kartenposition, Zoomfaktor, Layer
Mit der Methode map() (Zeile 28) wird die Karte initialisiert, und in den <div>-Container mit der ID mapbox geladen. An die Methode setView() werden ein Array mit den Koordinaten des Kartenmittelpunktes ([50.94, 6.96]) sowie der Zommfaktor (5) übergeben.
Dies sind die minimalen Angaben, die nötig sind, um eine Karte darstellen zu können. Die so angezeigte Karte kann bereits mit der Maus bewegt und mit dem Mausrad bzw. den +/–-Buttons auf der Karte gezoomt werden.
Koordinaten
Der erste Wert der Koordinaten gibt die geographische Breite und der zweite die geographische Länge in Grad an, wobei ein positiver Wert für Norden bzw. Osten und ein negativer Wert für Süden bzw. Westen steht. Wenn man die Position eines Ortes nicht kennt, kann man z. B. auf OpenStreetMap diesen Ort suchen. Die URL enthält dann die Koordinaten des Ortes (lat = Breite; lon = Länge). Es empfiehlt sich, dabei möglichst dicht heran zu zoomen, um eine möglichst genaue Position zu erhalten.
Beispiel:
http://www.openstreetmap.de/karte.html?zoom=8&lat=52.5207846&lon=13.4093412,18&layers=B000TT
Die URL enthält die Werte 52.5207846 und 13.4093412 als Koordinaten für Berlin, Fernsehturm.
Liegen die Koordinaten eines Ortes in der Form Grad/Minuten/Sekunden vor, muss man diese Werte in eine Dezimalzahl umrechnen:
Zoomfaktor
Die Spanne für das Zoomen bewegt sich zwischen 0 (weiteste Entfernung) bis zum Wert von maxZoom (Zeile 33, hier: 19, sehr kurze Entfernung), abhängig davon, ob Bilder in so hoher Auflösung verfügbar sind.
Layer
Von den eingebundenen Layern hängt ab, welche Kartentypen angezeigt werden können. Es können beispielsweise Straßenkarten, topografische Karten oder Satellitenbilder eingebunden werden. Im folgenden Beispiel ist dargestellt, wie man verschiedene Layer einbinden kann:
<script>
var map = L.map('mapbox').setView([50.94, 6.96], 5);
// OpenStreetMap tiles
var osm_url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm_attribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_streets = L.tileLayer(osm_url, {
maxZoom: 19,
attribution: osm_attribution
});
// Topo tiles
var topo_url ='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
var topo_attribution = "© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a>, <a href='http://viewfinderpanoramas.org' target='_blank'>SRTM</a> | © <a href='https://opentopomap.org' target='_blank'>OpenTopoMap</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/' target='_blank'>CC-BY-SA</a>)";
var layer_topographic = L.tileLayer.wms(topo_url, {
layers: 'TOPO-OSM-WMS',
maxZoom: 17,
attribution: topo_attribution
});
// Esri tiles
var esri_url ='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
var esri_attribution = '© <a href="https://arcgis.esri.de/arcgis-online/">Esri</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_satellite = L.tileLayer(esri_url, {
maxZoom: 20,
attribution: esri_attribution
});
var baseMaps = {
"Straßen": layer_streets,
"Gelände": layer_topographic,
"Satellit": layer_satellite
};
L.control.layers(baseMaps).addTo(map);
layer_streets.addTo(map);
</script>
Zusätzlich zu der OSM-Straßenkarte werden hier ab Zeile 11 eine topografische Karte und ab Zeile 19 eine Satellitenkarte ergänzt. In Zeile 31 wird ein Steuerungselement zu der Karte hinzugefügt, über das die Layer ausgewählt werden können.
Eine Liste mit verfügbaren Kacheldiensten befindet sich hier.
Ortsmarkierungen hinzufügen
► Doc: Marker
► Markers with custom icons
Ortsmarkierungen (Marker) werden mit der Methode marker() eingebunden (Zeilen 40 und 41). An diese Methode wird ein Array mit den Koordinaten des entsprechenden Ortes sowie ein Objekt übergeben, das diverse Eigenschaften besitzen kann. Mit der Eigeschaft title wird ein Text festgelegt, der beim Überfahren des Markers mit dem Mauszeiger angezeigt wird. Mit der Eigenschaft icon kann eine benutzerdefinierte Grafik als Marker angegeben werden, die statt der Standardgrafik verwendet wird.
In diesem Beispiel wird eine solche Grafik ab Zeile 34 mit folgenden Eigenschaften definiert:
• iconUrl: Der Pfad zur Grafikdatei.
• iconSize: Breite und Höhe der Grafik, wie sie in der Karte angezeigt werden soll.
• iconAnchor: Position der Markers relativ zu dem Ort auf der Karte.
• popupAnchor: Position einer Infobox relativ zum Marker.
<script>
var map = L.map('mapbox').setView([50.94, 6.96], 5);
// OpenStreetMap tiles
var osm_url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm_attribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_streets = L.tileLayer(osm_url, {
maxZoom: 19,
attribution: osm_attribution
});
// Topo tiles
var topo_url ='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
var topo_attribution = "© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a>, <a href='http://viewfinderpanoramas.org' target='_blank'>SRTM</a> | © <a href='https://opentopomap.org' target='_blank'>OpenTopoMap</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/' target='_blank'>CC-BY-SA</a>)";
var layer_topographic = L.tileLayer.wms(topo_url, {
layers: 'TOPO-OSM-WMS',
maxZoom: 17,
attribution: topo_attribution
});
// ESRI tiles
var esri_url ='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
var esri_attribution = '© <a href="https://arcgis.esri.de/arcgis-online/">Esri</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_satellite = L.tileLayer(esri_url, {
maxZoom: 20,
attribution: esri_attribution
});
var baseMaps = {
"Straßen": layer_streets,
"Gelände": layer_topographic,
"Satellit": layer_satellite
};
L.control.layers(baseMaps).addTo(map);
layer_streets.addTo(map);
// map content
var markerIcon = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -26]
});
var marker1 = L.marker([52.520791, 13.409436], {title: 'Berlin'}).addTo(map);
var marker2 = L.marker([51.505574, -0.075386], {title: 'London', icon: markerIcon}).addTo(map);
</script>Infoboxen anzeigen lassen
► Doc: Popup
Möchte man für jeden Ort eine Infobox anzeigen lassen, wenn man mit der Maus auf den entsprechenden Marker klickt, realisiert man das mit der Methode bindPopup() (Zeile 56). Als einziges Argument wird dieser Methode der HTML-Code des Inhalts der Infobox übergeben.
Um das Skript zu vereinfachen werden die einzelnen Marker hier in einer Schleife definiert. Man beachte die zusätzliche Eigenschaft className bei myIcon[1] (Zeile 51), womit dem Marker eine CSS-Klasse zugewiesen wurde, die so in einem Stylesheet angesprochen werden kann.
<script>
var map = L.map('mapbox').setView([50.94, 6.96], 5);
// OpenStreetMap tiles
var osm_url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm_attribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_streets = L.tileLayer(osm_url, {
maxZoom: 19,
attribution: osm_attribution
});
// Topo tiles
var topo_url ='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
var topo_attribution = "© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a>, <a href='http://viewfinderpanoramas.org' target='_blank'>SRTM</a> | © <a href='https://opentopomap.org' target='_blank'>OpenTopoMap</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/' target='_blank'>CC-BY-SA</a>)";
var layer_topographic = L.tileLayer.wms(topo_url, {
layers: 'TOPO-OSM-WMS',
maxZoom: 17,
attribution: topo_attribution
});
// ESRI tiles
var esri_url ='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
var esri_attribution = '© <a href="https://arcgis.esri.de/arcgis-online/">Esri</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_satellite = L.tileLayer(esri_url, {
maxZoom: 20,
attribution: esri_attribution
});
var baseMaps = {
"Straßen": layer_streets,
"Gelände": layer_topographic,
"Satellit": layer_satellite
};
L.control.layers(baseMaps).addTo(map);
layer_streets.addTo(map);
// map content
var places = [
["Berlin", 52.520791, 13.409436, "Deutschland"],
["London", 51.505574, -0.075386, "Großbritannien"],
["Paris", 48.858278, 2.294501, "Frankreich"]
];
var myIcon = [];
myIcon[0] = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -26]
});
myIcon[1] = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [48, 48],
iconAnchor: [24, 48],
popupAnchor: [0, -37],
className: 'icon1'
});
var marker = [];
for (i = 0; i < places.length; i++) {
marker[i] = L.marker([places[i][1], places[i][2]], [{title: places[i][0]}, {icon: myIcon[0], title: places[i][0]}, {icon: myIcon[1], title: places[i][0]}][i]).addTo(map);
marker[i].bindPopup("Weitere Infos:<br><a href='https://de.wikipedia.org/wiki/" + places[i][0] + "' target='_blank'>" + places[i][0] + "</a>");
}
</script>Orte mit Streckenzug verbinden
► Doc: Polyline
Nun kann man diese Orte mit einem Streckenzug verbinden. Streckenzüge sind eigentlich von Orten unabhängige Objekte, können theoretisch also auch für sich gezeichnet werden, ohne konkrete Orte miteinander zu verbinden. Es müssen dazu die Koordinaten von mindestens zwei Orten angegeben werden.
In Zeile 61 wird der Karte mit der Methode polyline() der Streckenzug hinzugefügt. Dieser Methode wird als erstes Argument ein Array mit den Koordinaten der zu verbindenden Orte übergeben, das in Zeile 58 erzeugt wurde. Das zweite Argument ist ein Objekt das zwei Eigenschaften enthält: color für die Farbe der Line und weight für deren Breite. Um den Streckenzug zu schließen wird dem Array polypath in Zeile 58 der erste Ort als Abschluss festgelegt.
Für eine automatisch geschlossene Freiform verwendet man die Methode polygon() anstelle von polyline() mit den gleichen Argumenten. In diesem Fall wird die Fläche innerhalb der Freiform halbtransparent gefüllt.
<script>
var map = L.map('mapbox').setView([50.94, 6.96], 5);
// OpenStreetMap tiles
var osm_url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm_attribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_streets = L.tileLayer(osm_url, {
maxZoom: 19,
attribution: osm_attribution
});
// Topo tiles
var topo_url ='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
var topo_attribution = "© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a>, <a href='http://viewfinderpanoramas.org' target='_blank'>SRTM</a> | © <a href='https://opentopomap.org' target='_blank'>OpenTopoMap</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/' target='_blank'>CC-BY-SA</a>)";
var layer_topographic = L.tileLayer.wms(topo_url, {
layers: 'TOPO-OSM-WMS',
maxZoom: 17,
attribution: topo_attribution
});
// ESRI tiles
var esri_url ='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
var esri_attribution = '© <a href="https://arcgis.esri.de/arcgis-online/">Esri</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_satellite = L.tileLayer(esri_url, {
maxZoom: 20,
attribution: esri_attribution
});
var baseMaps = {
"Straßen": layer_streets,
"Gelände": layer_topographic,
"Satellit": layer_satellite
};
L.control.layers(baseMaps).addTo(map);
layer_streets.addTo(map);
// map content
var places = [
["Berlin", 52.520791, 13.409436, "Deutschland"],
["London", 51.505574, -0.075386, "Großbritannien"],
["Paris", 48.858278, 2.294501, "Frankreich"]
];
var myIcon = [];
myIcon[0] = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -26]
});
myIcon[1] = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [48, 48],
iconAnchor: [24, 48],
popupAnchor: [0, -37],
className: 'icon1'
});
var marker = [];
var polypath = [];
for (i = 0; i < places.length; i++) {
marker[i] = L.marker([places[i][1], places[i][2]], [{title: places[i][0]}, {icon: myIcon[0], title: places[i][0]}, {icon: myIcon[1], title: places[i][0]}][i]).addTo(map);
marker[i].bindPopup("Weitere Infos:<br><a href='https://de.wikipedia.org/wiki/" + places[i][0] + "' target='_blank'>" + places[i][0] + "</a>");
polypath[i] = [places[i][1], places[i][2]];
if (!i) polypath[places.length] = [places[i][1], places[i][2]];
}
var polyline = new L.polyline(polypath, {color: 'hsl(0,85%,50%)', weight: 5}).addTo(map);
</script>Orte mit Geodäten verbinden
Leaflet unterstützt nur gerade Verbindungen von Orten auf der Karte entlang der Projektionsebene. Möchte man Orte mit Geodäten verbinden, bei deren Darstellung die Erdkrümmung berücksichtigt wird, muss ein zusätzliches Addon eingebunden werden. Dazu fügt man folgenden Code unmittelbar oberhalb des Containers mapbox ein:
<script src='https://cdn.jsdelivr.net/npm/leaflet.geodesic'></script>
Dieses Addon stellt die zusätzliche Methode Geodesic() zur Verfügung, die nun in Zeile 61 mit den gleichen Argumenten wie bei der zuvor verwendeten Methode polyline() verwendet werden kann.
<script>
var map = L.map('mapbox').setView([50.94, 6.96], 5);
// OpenStreetMap tiles
var osm_url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm_attribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_streets = L.tileLayer(osm_url, {
maxZoom: 19,
attribution: osm_attribution
});
// Topo tiles
var topo_url ='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
var topo_attribution = "© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a>, <a href='http://viewfinderpanoramas.org' target='_blank'>SRTM</a> | © <a href='https://opentopomap.org' target='_blank'>OpenTopoMap</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/' target='_blank'>CC-BY-SA</a>)";
var layer_topographic = L.tileLayer.wms(topo_url, {
layers: 'TOPO-OSM-WMS',
maxZoom: 17,
attribution: topo_attribution
});
// ESRI tiles
var esri_url ='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
var esri_attribution = '© <a href="https://arcgis.esri.de/arcgis-online/">Esri</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_satellite = L.tileLayer(esri_url, {
maxZoom: 20,
attribution: esri_attribution
});
var baseMaps = {
"Straßen": layer_streets,
"Gelände": layer_topographic,
"Satellit": layer_satellite
};
L.control.layers(baseMaps).addTo(map);
layer_streets.addTo(map);
// map content
var places = [
["Berlin", 52.520791, 13.409436, "Deutschland"],
["London", 51.505574, -0.075386, "Großbritannien"],
["Paris", 48.858278, 2.294501, "Frankreich"]
];
var myIcon = [];
myIcon[0] = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -26]
});
myIcon[1] = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [48, 48],
iconAnchor: [24, 48],
popupAnchor: [0, -37],
className: 'icon1'
});
var marker = [];
var polypath = [];
for (i = 0; i < places.length; i++) {
marker[i] = L.marker([places[i][1], places[i][2]], [{title: places[i][0]}, {icon: myIcon[0], title: places[i][0]}, {icon: myIcon[1], title: places[i][0]}][i]).addTo(map);
marker[i].bindPopup("Weitere Infos:<br><a href='https://de.wikipedia.org/wiki/" + places[i][0] + "' target='_blank'>" + places[i][0] + "</a>");
polypath[i] = [places[i][1], places[i][2]];
if (!i) polypath[places.length] = [places[i][1], places[i][2]];
}
var polyline = new L.Geodesic(polypath, {color: 'hsl(0,85%,50%)', weight: 5}).addTo(map);
</script>Vollbildmodus aktivieren
Auch für den Vollbildmodus muss ein zusätzliches Addon eingebunden werden. Dazu muss folgender Code oberhalb des Containers mapbox eingefügt werden:
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet'>
Schließlich wird der Karte ein Steuerungselement hinzugefügt, mit dem der Vollbildmodus (de-)aktiviert werden kann (Zeilen 4 bis 9). Im an die Klasse Fullscreen() übergebenen Attribut können die Zeichenketten festgelegt werden, die beim Überfahren des Steuerungselements mit dem Mauszeiger im aktivierten (true) und deaktivierten (false) Modus angezeigt werden.
<script>
var map = L.map('mapbox').setView([50.94, 6.96], 5);
map.addControl(new L.Control.Fullscreen({
title: {
'false': 'Vollbildmodus',
'true': 'Vollbildmodus verlassen'
}
}));
// OpenStreetMap tiles
var osm_url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm_attribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_streets = L.tileLayer(osm_url, {
maxZoom: 19,
attribution: osm_attribution
});
// Topo tiles
var topo_url ='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
var topo_attribution = "© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a>, <a href='http://viewfinderpanoramas.org' target='_blank'>SRTM</a> | © <a href='https://opentopomap.org' target='_blank'>OpenTopoMap</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/' target='_blank'>CC-BY-SA</a>)";
var layer_topographic = L.tileLayer.wms(topo_url, {
layers: 'TOPO-OSM-WMS',
maxZoom: 17,
attribution: topo_attribution
});
// ESRI tiles
var esri_url ='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
var esri_attribution = '© <a href="https://arcgis.esri.de/arcgis-online/">Esri</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var layer_satellite = L.tileLayer(esri_url, {
maxZoom: 20,
attribution: esri_attribution
});
var baseMaps = {
"Straßen": layer_streets,
"Gelände": layer_topographic,
"Satellit": layer_satellite
};
L.control.layers(baseMaps).addTo(map);
layer_streets.addTo(map);
// map content
var places = [
["Berlin", 52.520791, 13.409436, "Deutschland"],
["London", 51.505574, -0.075386, "Großbritannien"],
["Paris", 48.858278, 2.294501, "Frankreich"]
];
var myIcon = [];
myIcon[0] = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -26]
});
myIcon[1] = L.icon({
iconUrl: 'img/mapmarker.svg',
iconSize: [48, 48],
iconAnchor: [24, 48],
popupAnchor: [0, -37],
className: 'icon1'
});
var marker = [];
var polypath = [];
for (i = 0; i < places.length; i++) {
marker[i] = L.marker([places[i][1], places[i][2]], [{title: places[i][0]}, {icon: myIcon[0], title: places[i][0]}, {icon: myIcon[1], title: places[i][0]}][i]).addTo(map);
marker[i].bindPopup("Weitere Infos:<br><a href='https://de.wikipedia.org/wiki/" + places[i][0] + "' target='_blank'>" + places[i][0] + "</a>");
polypath[i] = [places[i][1], places[i][2]];
if (!i) polypath[places.length] = [places[i][1], places[i][2]];
}
var polyline = new L.Geodesic(polypath, {color: 'hsl(0,85%,50%)', weight: 5}).addTo(map);
</script>Stichworte: webdesign,webgestaltung,programmierung,javascript,anleitung,tutorial,landkarten,leaflet