Leaflet on mobile

[ Source: Leaflet tutorial ]

Preparing the page

To make our map div element stretch to all available space (fullscreen), we can use the following CSS code:

body { padding: 0; margin: 0; } html, body, #map { height: 100%; }

Also, we need to tell the mobile browser to disable unwanted scaling of the page and set it to its actual size by placing the following line in the head section or our HTML page:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

JS script

var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiamVzY2FjZW5hIiwiYSI6ImNpcnc0aGY0aDAwaG1ocW0xNzgwYWZrOXcifQ.dowcr7bOEgJfRtWF4GCU2Q', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18, id: 'jescacena.14i0d24m', accessToken: 'pk.eyJ1IjoiamVzY2FjZW5hIiwiYSI6ImNpcnc0aGY0aDAwaG1ocW0xNzgwYWZrOXcifQ.dowcr7bOEgJfRtWF4GCU2Q' }).addTo(mymap);

Geolocation

Leaflet has a very handy shortcut for zooming the map view to the detected location — locate method with the setView option, replacing the usual setView method in the code:

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

Here we specify 16 as the maximum zoom when setting the map view automatically. As soon as the user agrees to share its location and it’s detected by the browser, the map will set the view to it. Now we have a working fullscreen mobile map!

And will display a popup on location found or error if geolocation didn't work