Geodata background
Tim, Kiya | 18.8.2023

Creating a Mobile Map View with Leaflet and Location Marker

Geodata > Creating a Mobile Map View with Leaflet and Location Marker

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:

2    ...
3    <link rel="stylesheet" href="" />
6    ...
7    <script src=""></script>

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:

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


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.

  • 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)

... ist als Softwareentwickler vorwiegend im Frontend unterwegs, vor allem mit TypeScript und Angular, aber auch mit RxJS und NGXS. Seine besondere Stärke sind die Konzeption und Umsetzung von ansprec... mehr anzeigen


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