Leaflet.js : Current User Location

Previously, we learnt about Event hanlders in Leaflet.js Maps. Today we are going to learn to detect and display user location.

Let's get started.

Initialize the map

In our Javascript code, let's initialize our map with a Open Street Map tile layer like we did in our introduction to Leaflet.js.

var map = L.map('map').fitWorld();

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

Let's analyse our code

1. We are initializing our map with the World Map as initial view using fitWorld() Method (previously we defined custom latitude and longitude)

var map = L.map('map').fitWorld();

2. Adding Tile layer(Openstreet map in this case) and setting a maxZoom property with attribution to our map

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

Locating Users

Leaflet has a very handy shortcut for zooming the map view to the detected location — locate method with the setView option

map.locate({setView: true, maxZoom: 16});

Let's add events for displaying location with accuracy and catching error (if the user decided to not turn on the location)

First things first, Let's write an anonymous function called onLocationFound to handle our success event

function onLocationFound(e) {
    var radius = e.accuracy;

    L.marker(e.latlng).addTo(map)
        .bindPopup("You are within " + radius + " meters from this point").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}

map.on('locationfound', onLocationFound);

The above code does the following

1. We are storing a variable called radius to pinpoint our user's location with accuracy

2. We are marking our latitude & longitude and subsequently adding it to our map

3. And then we are binding Popup to display our radius variable within the popup display

4. Finally we are adding a Circle with our latitude, longitude and radius value to our map

Let's write another anonymous function called onLocationError for catching errors and alert the users

function onLocationError(e) {
    alert(e.message);
}

map.on('locationerror', onLocationError);

The Complete Code will look like this

var map = L.map("map").fitWorld();

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution: "© OpenStreetMap",
}).addTo(map);

map.locate({ setView: true, maxZoom: 16 });

function onLocationFound(e) {
  var radius = e.accuracy;

  L.marker(e.latlng)
    .addTo(map)
    .bindPopup("You are within " + radius + " meters from this point")
    .openPopup();

  L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
  alert(e.message);
}

map.on("locationfound", onLocationFound);
map.on("locationerror", onLocationError);

In action

Our map application is asking for User's permission on page load. Notice the World map is displayed as we used fitWorld() method for initial view.

After clicking allow button we get our current location displayed in a popup

That's it. You now know how to detect and display user's location. Do play with the maxZoom value to dig deeper.