CODEWITHSUNDEEP
javascriptpopupleaflet
Spyros
Spyros

Reputation: 197

How to dynamically load extra data for LeafletJS Popup on load

I am upgrading a JSF page I have that shows data on a map with OSM basemap and the latest stable leaflet release for markers and functionality.

For each marker I have some basic information for the element which is loaded when the marker is created. However there is some data that needs to be displayed for available days that I do not want to load before the user actually clicks the popup, since I expect it to create a much bigger load than what is necessary.

Is there a way to use a promise to first load the extra data required and then open the popup once a user clicks it?

Upvotes: 1

Views: 1416

Answers (1)

Spyros
Spyros

Reputation: 197

The answer to this problem was embarassingly easy...

You start at marker creation by doing:

function onMapClick(e){

    dataPromise = new Promise(function(resolve,reject){ /*grab your data here*/ });        

    dataPromise.then(function(result){
       popupPromise = new Promise(function(resolve,reject){
          e.target.closePopup();
          e.target.unbindPopup();
          newPopup = createPopupFromServerData(result);
          resolve(newPopup);
        });
   });

   popupPromise .then(function(result){
         e.target.bindPopup(result).openPopup();
   });
}


    marker.bindPopup("Loading element data, please wait..."); //this can include anything
    marker.on('click', onMapClick);

It was the second promise that was needed to properly open a new Popup, and it escaped me for two days.

Upvotes: 1

Related Questions