SINTEF-9012 / PruneCluster

Fast and realtime marker clustering for Leaflet
MIT License
551 stars 131 forks source link

how to set events on marker popup #142

Open pat1 opened 7 years ago

pat1 commented 7 years ago

without PruneCluster to have a "riseOnHover" message I use: L.marker(latlng, {icon: myIcon, riseOnHover: true, riseOffset: 10000, title:feature.properties.date });

and to execute some code on popupopen: leafletMarker.on('popupopen',function myfunction(e) { // my js management
});

How I can do the same with PruneCluster? Thanks in advance Paolo

sinijvas commented 7 years ago

do this, after create marker
pruneCluster.PrepareLeafletMarker = function(leafletMarker, data) { if (leafletMarker.getPopup()) { leafletMarker.setPopupContent(data.name); } else { leafletMarker.bindPopup(data.name); } leafletMarker.on('popupopen', function(){ //do click event logic here }); }; should work fine

pat1 commented 7 years ago

Thanks a lot for your response! At the end all is working with this code: https://github.com/r-map/rmap/blob/master/python/showdata/templates/showdata/spatialseries.html

    pruneCluster.PrepareLeafletMarker = function(leafletMarker, data) {
        if (leafletMarker.getPopup()) {
        leafletMarker.setPopupContent(setpopup(data.feature));
        } else {
        //leafletMarker.bindPopup(data.name);
        leafletMarker.bindPopup(setpopup(data.feature));
        }
        var vallen= (data.feature.properties.val).toString().length * 6 + 6;
        leafletMarker.setIcon(
        L.extendedDivIcon
        ({
            iconSize: new L.Point(vallen, 14),
            html: data.feature.properties.val,
            className: 'myDivIcon',
            style: {backgroundColor:getColor(data.feature.properties.val,min,max)}
        })
        );
        leafletMarker.bindLabel(data.feature.properties.date);
        leafletMarker.on('popupopen',function managepreload(e) 
                 {
                 $('#preloadimages img').preload({
                     placeholder:'{% static "showdata/loading.gif" %}',
                     notFound:'{% static "showdata/access-error-logs.png" %}'
                 })
                 });
    };

and:

            $.each(collection.features, function(i,feature) {
        coords.push( [ feature.geometry.coordinates[1],feature.geometry.coordinates[0] ]);
        var marker = new PruneCluster.Marker(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
        marker.data.feature=feature;
        var vallen= (feature.properties.val).toString().length * 6 + 6;
                marker.data.icon = L.extendedDivIcon({
        iconSize: new L.Point(vallen, 14),
        html: feature.properties.val,
        className: 'myDivIcon',
        style: {backgroundColor:getColor(feature.properties.val,min,max)}
        });
        marker.data.popup = setpopup(feature);
        pruneCluster.RegisterMarker(marker);
            });
            map.addLayer(pruneCluster);