Users are Requesting a “Found” Check Box Option for PopUp Markers

Just thinking, this can be even more easier, the Found button on the bottom of the Tooltip can just be some CSS that makes the Icon Glow Effect.

Is the leaflet-marker function control how the markers tooltip get setup? I think this shouldnt be something that hard to put in.. would make a great feature for some who are using it to make video game maps as we are doing.

i

I will provide an example.

I have created an example Make marker transparent on click and back. Is that what you are thinking?

OMG, PERFECT solution, this is great addon, thank you so much!!

So this didnt work for the Geojson markers, I spent half the day working on this, here is what I came up with – Note your Json needs to have ID: with unique # or combos , and this also stores the clicked markers into Local Storage on the browsers, so if a user Refreshes the Page, this will still work, until they clear browser cache

<script>
window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
window.WPLeafletMapPlugin.push(function () {
    var map = window.WPLeafletMapPlugin.getCurrentMap();

    // Function to get marker ID based on tooltip ID
    function getMarkerId(marker) {
        var popupContent = marker.getPopup() ? marker.getPopup().getContent() : '';
        var match = popupContent.match(/ID: (\d+)/);
        return match ? parseInt(match[1], 10) : null;
    }

    // Function to initialize clickedMarkers from local storage
    function getClickedMarkers() {
        try {
            var stored = localStorage.getItem('clickedMarkers');
            var parsed = JSON.parse(stored);
            return Array.isArray(parsed) ? parsed : [];
        } catch (e) {
            console.error('Error parsing local storage data:', e);
            return [];
        }
    }

    // Function to save clickedMarkers to local storage
    function saveClickedMarkers() {
        try {
            localStorage.setItem('clickedMarkers', JSON.stringify(clickedMarkers));
        } catch (e) {
            console.error('Error saving to local storage:', e);
        }
    }

    // Initialize markers state
    var clickedMarkers = getClickedMarkers();
    console.log('Clicked Markers on Load:', clickedMarkers);

    // Function to handle GeoJSON features
    function onEachFeature(feature, layer) {
        if (layer instanceof L.Marker) {
            var markerId = getMarkerId(layer);
            if (markerId !== null) {
                if (clickedMarkers.includes(markerId)) {
                    layer.setOpacity(0.5);
                } else {
                    layer.setOpacity(1);
                }
                // Add click event to toggle transparency
                layer.on('click', function () {
                    if (clickedMarkers.includes(markerId)) {
                        // Remove from clicked markers
                        clickedMarkers = clickedMarkers.filter(id => id !== markerId);
                        layer.setOpacity(1);
                    } else {
                        // Add to clicked markers
                        clickedMarkers.push(markerId);
                        layer.setOpacity(0.5);
                    }
                    saveClickedMarkers(); // Save state
                    console.log('Updated Clicked Markers:', clickedMarkers);
                });
            }
        }
    }

    // Handle GeoJSON layer
    function handleGeoJSONLayer(layer) {
        layer.on('ready', function () {
            this.eachLayer(function (layer) {
                if (layer instanceof L.Marker) {
                    onEachFeature(layer.feature, layer);
                }
            });
        });
    }

    // Handle GeoJSON markers
    var geojsons = window.WPLeafletMapPlugin.geojsons || [];
    geojsons.forEach(function (geojsonLayer) {
        handleGeoJSONLayer(geojsonLayer);
    });

    // Apply transparency to existing markers
    function handleMarkers() {
        if (WPLeafletMapPlugin.markers && WPLeafletMapPlugin.markers.length > 0) {
            WPLeafletMapPlugin.markers.forEach(function(marker) {
                var markerId = getMarkerId(marker);
                if (markerId !== null) {
                    if (clickedMarkers.includes(markerId)) {
                        marker.setOpacity(0.5);
                    } else {
                        marker.setOpacity(1);
                    }
                }
            });
        }
    }

    // Initial handling of markers
    handleMarkers();
});
</script>

geojson files are loaded asynchron. You should use an event like

geojson.on(
"ready",

See here. I will provide an example.

Updated Script, just in case someone else needs it in the future!

<script>
window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
window.WPLeafletMapPlugin.push(function () {
    var map = window.WPLeafletMapPlugin.getCurrentMap();
    var geojsonBounds = {};
    var homeBounds = new L.LatLngBounds();
    
    function getMarkerId(marker) {
        var popupContent = marker.getPopup() ? marker.getPopup().getContent() : '';
        var match = popupContent.match(/ID: (\d+)/);
        return match ? parseInt(match[1], 10) : null;
    }

    function getClickedMarkers() {
        try {
            var stored = localStorage.getItem('clickedMarkers');
            var parsed = JSON.parse(stored);
            return Array.isArray(parsed) ? parsed : [];
        } catch (e) {
            console.error('Error parsing local storage data:', e);
            return [];
        }
    }

    function saveClickedMarkers() {
        try {
            localStorage.setItem('clickedMarkers', JSON.stringify(clickedMarkers));
        } catch (e) {
            console.error('Error saving to local storage:', e);
        }
    }

    var clickedMarkers = getClickedMarkers();
    console.log('Clicked Markers on Load:', clickedMarkers);

    function onEachFeature(feature, layer) {
        if (layer instanceof L.Marker) {
            var markerId = getMarkerId(layer);
            if (markerId !== null) {
                layer.setOpacity(clickedMarkers.includes(markerId) ? 0.5 : 1);
                layer.on('click', function () {
                    if (clickedMarkers.includes(markerId)) {
                        clickedMarkers = clickedMarkers.filter(id => id !== markerId);
                        layer.setOpacity(1);
                    } else {
                        clickedMarkers.push(markerId);
                        layer.setOpacity(0.5);
                    }
                    saveClickedMarkers();
                    console.log('Updated Clicked Markers:', clickedMarkers);
                });
            }
        }
    }

    function handleGeoJSONLayer(layer) {
        layer.on('ready', function () {
            let bounds = this.getBounds();
            geojsonBounds[layer._url] = bounds;
            homeBounds.extend(bounds);
            this.eachLayer(function (layer) {
                if (layer instanceof L.Marker) {
                    onEachFeature(layer.feature, layer);
                }
            });
        });
    }

    var geojsons = window.WPLeafletMapPlugin.geojsons || [];
    geojsons.forEach(function (geojson) {
        handleGeoJSONLayer(geojson);
    });

    map.on("overlayadd", function(e){
        let bounds = geojsonBounds[e.layer._url];
        if (bounds) {
            map.fitBounds(bounds);
        }
    });

    map.on("overlayremove", function() {
        map.fitBounds(homeBounds);
    });

    function handleMarkers() {
        if (WPLeafletMapPlugin.markers && WPLeafletMapPlugin.markers.length > 0) {
            WPLeafletMapPlugin.markers.forEach(function(marker) {
                var markerId = getMarkerId(marker);
                if (markerId !== null) {
                    marker.setOpacity(clickedMarkers.includes(markerId) ? 0.5 : 1);
                }
            });
        }
    }

    handleMarkers();
});
</script>

Make marker and geojson points transparent on click and back