Tim, Kiya | 18.8.2023

Erstellen einer mobilen Kartenansicht mit Leaflet und Standortmarker

Geodata > Erstellen einer mobilen Kartenansicht mit Leaflet und Standortmarker

Creating a Mobile Map View with Leaflet and Location Marker

In this guide, you will learn how to create an interactive mobile map view using the Leaflet library that uses your browser's current location. We will go step by step through the process of embedding a map, retrieving the location, and placing a marker at the current position.

Step 1: Integration of the required resources

To get started, you need to integrate the Leaflet library into your HTML document. Here is the code you can insert in the <head> area of your HTML document:

1<head>
2    ...
3    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
4</head>
5<body>
6    ...
7    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
8</body>

Step 2: HTML structure

Create an HTML element that serves as a container for your map. Here's an example:

1<div id="map" style="height: 400px;"></div>

Step 3: JavaScript code

Insert the following JavaScript code below the HTML element to initialize the map, retrieve the location, and add a marker:

1<script>
2    const map = L.map('map').setView([0, 0], 15);
3
4    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
5        maxZoom: 19,
6        attribution: '© OpenStreetMap contributors'
7    }).addTo(map);
8
9    map.locate({ setView: true, maxZoom: 15 });
10
11    function onLocationFound(e) {
12        var marker = L.marker(e.latlng).addTo(map);
13        marker.bindPopup("You are here!").openPopup();
14    }
15    
16    map.on('locationfound', onLocationFound);
17    
18    function onLocationError(e) {
19        alert("Your location could not be found.");
20    }
21    
22    map.on('locationerror', onLocationError);
23</script>

Conclusion

Congratulations! You have successfully created a mobile map view that uses your browser's location and places a marker at your current position. This is a foundation upon which you can build more features and tweaks to make your map view even more interactive.

Content
  • What is Leaflet library?
  • How can you create a mobile map using Leaflet?
  • How to retrieve browser location and place a marker?
Tim Tilch
Tim (Softwareentwickler)

Als erfahrener Geodaten-Spezialist habe ich eine Leidenschaft für die Entwicklung und Visualisierung von Karten- und Geoinformationssystemen. Meine Expertise ermöglicht es mir, komplexe Geodaten verst... mehr anzeigen

GitlabGithub
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund