LeafletJS – Interaktion mit Karten mithilfe von JavaScript
Karten sind aus unserem Alltag nicht mehr wegzudenken. Von der Fahrt zu einem bestimmten Ort bis hin zur Suche nach Restaurants oder Geschäften in der Nähe oder bei der Reiseplanung verwendet fast jede Art von App Karten. Die Verwendung von Karten hilft uns, unserer Anwendung standortbasierte Dienste hinzuzufügen.
Eine Möglichkeit, Karten in einer Webanwendung hinzuzufügen, ist die Verwendung von Leaflet JS. Leaflet JS ist eine Open-Source-JavaScript-Bibliothek zum Hinzufügen einfacher und interaktiver Webkarten. Es kann die Kartendaten zu den Kartenebenen hinzufügen und verfügt über Funktionen wie Schwenken, Zoomen usw., die die meisten Anwendungen erfordern. Obwohl Leaflet einige Kernfunktionen bereitstellt, die in jeder Kartenanwendung erforderlich sind, ist eine einfache Möglichkeit, die Funktionalität von Karten zu erweitern, die Verwendung von Plugins von Drittanbietern. Da Leaflet eine Open-Source-Bibliothek ist, dh sein Quellcode auf GitHub verfügbar ist, gab es viele Beiträge und es sind viele Plugins verfügbar. Die Liste der Plugins erhalten Sie hier .
Leaflet ist also eine Karten-API und hilft uns, mit den Kartendaten zu interagieren, aber es liefert keine Daten. Es stellt auch nicht die Karte selbst bereit, da es sich nicht um einen Kartendienst handelt. Wie bekommen wir die Karte? Die Antwort ist, dass Leaflet von Drittanbietern abhängig ist, um die Grundkarte bereitzustellen, dh Leaflet ist so aufgebaut, dass es mit mehreren Grundkartenebenen verwendet werden kann. Im Allgemeinen wird Leaflet mit OpenStreetMaps verwendet, aber wir können auch andere Kartenanbieter wie Mapbox, Ersi, Bing Map Layers usw. verwenden. Sie können verschiedene Basiskartenanbieter hier überprüfen .
Lassen Sie uns also Schritt für Schritt verstehen, wie Leaflet verwendet werden kann, um mit Karten zu interagieren:
1. Die Verzeichnisstruktur
Dies ist die Verzeichnisstruktur, der in diesem Beispiel gefolgt wird. Sie können auch eine andere Verzeichnisstruktur haben, aber stellen Sie sicher, dass sie sich auch in Ihrem Code widerspiegelt.
2. HTML Boilerplate und Hinzufügen von Merkblatt-Referenzen
HTML
<!DOCTYPE html> <html> <head> <title> Playing Around With Leaflet JS </title> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <!-- Leaflet CSS --> <link rel="stylesheet" href= "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity= "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <!-- Leaflet JS --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity= "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> </head> <body></body> </html>
Um eine Karte zu unserer Webseite hinzuzufügen, sind einfache Webtechnologien wie HTML, CSS und JavaScript erforderlich. Um Leaflet in Ihrem Code zu verwenden, müssen Sie Leaflet CSS und Leaflet JS hinzufügen. Sie können sie entweder herunterladen oder verwenden, indem Sie ihre CDNs einschließen (siehe obiges Codebeispiel).
3. Erstellen Sie einen Map-Container und erstellen Sie ein Map-Objekt
<div id="mymap"> </div>
Wir definieren zuerst ein Containerelement, in das wir die Karte laden möchten, und geben ihm eine ID „mymap“.
let map = L.map('mymap').setView([19.5937, 78.9629], 5);
Jetzt erstellen wir ein Kartenobjekt, mit dem wir eine Karte erstellen und bearbeiten. Wir instanziieren das Map-Objekt mit der ID des Container-Elements, das oben erstellt wurde, dh „mymap“. Die setview-Methode wird verwendet, um die Mitte der Karte und die Zoomstufe festzulegen.
4. Fügen Sie Kartenkacheln mit TileLayer hinzu
Javascript
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 20,
minZoom: 2,
tileSize: 512,
zoomOffset: -1
}).addTo(map);
Um unsere Karte zu laden und anzuzeigen, verwenden wir die TileLayer-Klasse, um eine Ebene zu erstellen und die URL der Kartenkacheln anzugeben. Die Karte ist in mehrere Kacheln aufgeteilt und wir verwenden OpenStreetMap zur Darstellung der Kartenkacheln. Die Liste der Fliesenanbieter erhalten Sie hier. Wir geben einige zusätzliche Parameter wie minimale Zoomstufe, maximale Zoomstufe und Kachelgröße an. Da wir die Kartenkacheln von OpenStreetMap verwenden, müssen wir OpenStreetMap (oder dem von Ihnen verwendeten Kartenkachelanbieter) eine ordnungsgemäße Zuordnung (oder Quellenangabe) für die Verwendung ihrer Kartenkacheln zur Verfügung stellen. Um diese Ebene zu unserer Karte hinzuzufügen, verwenden wir die Methode addTo().
5. Erstellen unseres Datensatzes zum Einschließen von Markern
https://github.com/OptimalLearner/Leaflet-JS-Example-Code/blob/master/assets/location-data.json
Jetzt müssen wir der Karte einige Markierungen hinzufügen, die auf einen bestimmten Ort zeigen. Wir haben die Daten in einer anderen Datei namens „location-data.json“ gespeichert. Diese Datei enthält die Markierungsdetails wie Breiten- und Längenkoordinaten usw. Sie können über den oben angegebenen Link auf die Daten zugreifen und sie zusammen mit Ihrem Code speichern. Wenn Sie die Daten in Ihrer JS-Datei selbst behalten möchten, können Sie eine Variable erstellen und diese den obigen Daten zuweisen.
6. Erstellen von Markern, Binden von Popups und Ereignisbehandlung
Javascript
let marker = L.marker([latitude, longitude]).bindPopup(`<h3> ${title} </h3>
<p> ${description} </p>
`).on('click', () => {
map.flyTo([latitude, longitude], zoomLevel);
}).addTo(map);
Ein Marker wird verwendet, um einen Ort auf einer Karte zu identifizieren und hervorzuheben. Um eine Markierung in Leaflet hinzuzufügen, initialisieren wir die Markierungsklasse und übergeben die Koordinaten des Ortes, auf den die Markierung zeigen soll. Sie können beliebig viele Markierungen hinzufügen. Um nun zu identifizieren, welcher Standort durch die Markierung markiert ist, können wir der Markierung ein Popup hinzufügen, das uns die Standortinformationen mitteilt. Wir fügen ein Popup mit der bindPopup-Methode hinzu, um den Standortnamen und eine kleine Beschreibung des Standorts anzuzeigen.
Leaflet hat auch die Möglichkeit, auf von uns generierte Ereignisse zu reagieren. Wir können einen Ereignis-Listener hinzufügen, indem wir die „on“-Funktion für ein bestimmtes Ereignis (in unserem Fall „click“) verwenden, der auf eine Funktion lauscht, die eine Reihe von Operationen enthält. Am Ende fügen wir diese Markierung zu unserer Karte hinzu.
7. Anpassen des Markierungssymbols
Javascript
let iconOption = {
iconUrl: './assets/location-marker.svg',
iconSize: [30, 30]
};
let ourCustomIcon = L.icon(iconOption);
let marker = L.marker([latitude, longitude],
{icon: ourCustomIcon}).bindPopup(`<h3> ${title} </h3>
<p> ${description} </p>
`).on('click', () => {
map.flyTo([latitude, longitude], zoomLevel);
}).addTo(map);
Nicht jeder möchte dasselbe Standardmarkierungssymbol verwenden. Hier kommt also die Funktion benutzerdefinierter Markierungssymbole zur Rettung. Sie müssen die Icon-Klasse verwenden und die URL des Symbols übergeben, das Sie als Markierung verwenden möchten, und die Größe des Symbols [Breite, Höhe] in Pixel (px) hinzufügen. Jetzt müssen wir das Symbol zum Marker hinzufügen. In der Marker-Klasse können wir nach dem Hinzufügen der Koordinaten das benutzerdefinierte Marker-Symbol zum Rendern des Markers übergeben.
8. Was ist das Beste für Sie: flyTo oder setView?
Javascript
map.setView([latitude, longitude], zoomLevel); map.flyTo([latitude, longitude], zoomLevel);
Beide führen die gleiche Arbeit aus, indem sie den Standort in bestimmte Koordinaten ändern, aber die Methode flyTo() bietet eine Animation, die zu dem mithilfe von Koordinaten angegebenen Standort fliegt. Wenn Sie eine Animation benötigen, können Sie die Methode flyTo() verwenden, sonst funktioniert setView() auch, um die Position zu ändern.
Es gibt eine andere Methode namens panTo([Breitengrad, Längengrad]), die einfach setView() aufruft und die Zoomstufe auf der Zoomstufe der aktuellen Karte hält. Mit der Methode setView() können Sie sogar die Zoomstufe festlegen, aber das ist bei panTo() nicht der Fall.
9. Vollständiger Code und Ergebnis
HTML
<!DOCTYPE html> <html> <head> <title> Playing Around With LeafletJS </title> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <!-- Leaflet CSS --> <link rel="stylesheet" href= "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity= "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <!-- Leaflet JS --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity= "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <!-- Custom Styles --> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <h2 class="heading"> Some Indian Monuments </h2> <div id="mymap"> </div> <div class="button-group flex-style"> <div class="component1"> <button class="map-zoom-out-btn">Map Zoom Out</button> </div> <div class="component2"> <select class="select-dropdown" name="dropdown"> <option> Select any monument </option> </select> <button class="search-btn"> Search </button> </div> </div> <footer class="footer flex-style"> Made Using Leaflet JS | <a href= "https://github.com/OptimalLearner/Leaflet-JS-Example-Code" target="_blank"> Source Code</a> <a href="" target="_blank"> <img src="assets/github-icon.png" /> </a> </footer> <script type="text/javascript" src="js/script.js"></script> </body> </html>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.heading {
font-family: monospace;
font-size: 40px;
text-align: center;
margin: 2.5vh 0;
}
#mymap {
width: 90vw;
height: 70vh;
margin: 0 5vw 2vh;
border: 3px solid #888;
}
.button-group {
justify-content: space-evenly !important;
}
.map-zoom-out-btn, .search-btn {
background-color: #0072B5;
color: #FFF;
padding: 10px 35px;
border: none;
font-size: 17px;
border-radius: 5px;
cursor: pointer;
}
.select-dropdown {
display: inline-block;
margin: 0 15px 0 0;
padding: 10px 35px;
border: 1px solid #AAA;
font: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background: #FFF;
background-repeat: no-repeat;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 5px 5px, 5px 5px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 17px;
padding-bottom: 8px;
}
.footer a {
padding: 0 5px 0 5px;
color: #000;
cursor: pointer;
}
.flex-style {
display: flex;
justify-content: center;
align-items: center;
}
Javascript
let map = L.map("mymap").setView([19.5937, 78.9629], 5);
let ourData = [];
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
maxZoom: 20,
minZoom: 2,
tileSize: 512,
zoomOffset: -1,
}).addTo(map);
let iconOption = {
iconUrl: "./assets/location-marker.svg",
iconSize: [30, 30],
};
let ourCustomIcon = L.icon(iconOption);
fetch("./assets/location-data.json")
.then((response) => response.json())
.then((data) => {
ourData = data;
for (let i = 0; i < data.length; i++) {
let option = document.createElement("option");
option.value = i + 1;
option.text = data[i].title;
document.querySelector(".select-dropdown").appendChild(option);
let marker = L.marker([data[i].latitude, data[i].longitude], {
icon: ourCustomIcon,
})
.bindPopup(
`<h3> ${data[i].title} </h3>
<p> ${data[i].description} </p>
`
)
.on("click", () => {
map.flyTo([data[i].latitude, data[i].longitude], data[i].zoomLevel);
})
.addTo(map);
}
})
.catch((error) => alert(error));
document.querySelector(".map-zoom-out-btn").addEventListener("click", () => {
map.flyTo([19.5937, 78.9629], 5);
});
document.querySelector(".search-btn").addEventListener("click", () => {
let select = document.querySelector(".select-dropdown");
let value = select.options[select.selectedIndex].value;
map.flyTo(
[ourData[value - 1].latitude, ourData[value - 1].longitude],
ourData[value - 1].zoomLevel
);
});
Mithilfe des HTML-Boilerplates haben wir einen Kartencontainer, eine Schaltfläche zum Verkleinern der Karte und eine Dropdown-Liste hinzugefügt, die die auf der Karte markierten Orte enthält. Wir haben einige Stile mithilfe von externem CSS auf unsere Komponenten angewendet, indem wir Verweise auf das externe Stylesheet hinzugefügt haben. In der Skriptdatei erstellen wir ein Kartenobjekt und fügen dem Objekt Kartenkacheln hinzu. Dann erstellen wir unser benutzerdefiniertes Symbolobjekt und fügen die Größe und die URL des Symbols zu den Symboloptionen hinzu, die wir der Markierung hinzufügen, während wir die Markierung für jeden Standort erstellen.
Mit der Fetch-API fordern wir unsere Daten an, indem wir die URL der Daten angeben. Wir erhalten das Antwortobjekt, das dann in json konvertiert wird. Unter Verwendung dieser JSON-Daten, die die Informationen zu Standorten enthalten, fügen wir die Optionen für die Standorte mithilfe von DOM dynamisch zur Dropdown-Liste hinzu und erstellen Markierungen für jeden Standort zusammen mit Popups und Onclick-Ereignis-Listenern. Im Falle von Fehlern wird der Benutzer über die Fehlermeldung informiert.
Wir haben einen Onclick-Ereignis-Listener auf der Schaltfläche „Zoom Out“ hinzugefügt, der uns zu den anfänglichen Koordinaten und der Zoomstufe bringt. Wir haben auch einen Ereignis-Listener auf der Schaltfläche Suchen hinzugefügt, der den Wert der Dropdown-Liste abruft, und mit dem Wert wählen wir den Ort aus und zoomen die Karte auf diesen ausgewählten Ort.
Das Ergebnis des obigen Beispiels ist unten zu sehen:
Um Ihre Webseite lokal auszuführen, müssen Sie die Webseite über den lokalen Server ausführen. Sie können entweder WAMP oder XAMPP oder den http-Server von simpleNode.js verwenden. Wenn Sie irgendwo dazwischen hängen bleiben, können Sie auf dieses GitHub-Repository verweisen .