Fill Leaflet popup on click when acctually needed

96
May 05, 2018, at 5:55 PM

I have a map with a lot of markers and a complex popup content, generated by a function called popupcontent(), wich takes a lot of time to compute when it is done for all markers on the map with the oneachfeature function.

Is there a way to triger a function in a pupop only when it is actually opened instead of generating all the popups in the beginning? This would speed up loading time a lot.

This is my code so far (I am using the markerclusterer extention):

    var geojson1 = L.geoJson(bigJson,{
    onEachFeature: function (feature, layer) {
        layer.bindPopup(popupcontent(feature,layer));
    }
    })
                .addLayer(tiles);
        var markers = L.markerClusterGroup({
            spiderfyOnMaxZoom: true,
            showCoverageOnHover: true,
            zoomToBoundsOnClick: true,
            disableClusteringAtZoom: 10,
            removeOutsideVisibleBounds:true
        });
        var geoJsonLayer = L.geoJson(bigJson, {
        });
        markers.addLayer(geojson1);
        map.addLayer(markers);
        map.fitBounds(markers.getBounds());

Demo: http://stefang.cepheus.uberspace.de/farmshops/

Answer 1

I think what you're looking for is something like so (if your layer is an interactive layer):

onEachFeature: function (feature, layer) {
  layer.once("click", ()=>{
    layer.bindPopup(popupcontent(feature,layer));
  });
}

Use "once" instead of "on" so it only gets binded once when the layer is clicked.

As I don't have all your code, I am unable to test this. Let me know if it works or not and I'll update with other options. It's been a while since I've played with leaflet.

READ ALSO
pass argument from terminal via node to npm scripts

pass argument from terminal via node to npm scripts

I want to do semi automation to create user for my api, so I have this script

102
get multiple json object array in single object array in php

get multiple json object array in single object array in php

I have created json array of result array in php I got following result:

112
react create dyamic menu by settings

react create dyamic menu by settings

I'm have side bar navigation that get a list of json

222
Tower of Hanoi Puzzle

Tower of Hanoi Puzzle

The code is moving ten rings, with one move per dayIf the top ring is 1 and the bottom ring is 10, I want to display which number ring was moved on each day

67