CODEWITHSUNDEEP
javascriptleaflet
Mou
Mou

Reputation: 16292

Leaflet js map initialize and callback functionality

suppose i am loading map with leaflet js. may be due to slow internet connection map may take few time to load. so i want to show busy icon when map is loading and hide busy icon when map load complete.

here one sample code

var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
    maxZoom: 18,
    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>',
    id: 'mapbox.light'
}).addTo(map);

tell me how could i attach a callback which notify me that map loading and rendering at client side done. is there any callback functionality for map loading complete?

i search google and came to know there is callback for zooming. here one sample code

map.on("zoomstart", function (e) { console.log("ZOOMSTART", e); });
map.on("zoomend", function (e) { console.log("ZOOMEND", e); });

Upvotes: 1

Views: 1789

Answers (1)

gusjap
gusjap

Reputation: 2515

There is a plugin for this called Leaflet.loading that will show an idicator whenever map tiles are loading.

You can either use that one or have a look in the source code if you want to build your own version.

Upvotes: 1

Related Questions