Wizard

The Hover is not the problem Hover works correctly

The Popup on large text doesnt work right anymore via the geojson method, its doing some weird map warping as it tries to fit it on screen, but if the screen isnt big enough, its doesnt display it at all.

Before it wasnt doing that, it would show the Popup, and the popup will stay up until you click somewhere else on the map

Hover over works, its the popup that seems to be acting weird

here is another gif video https://i.imgur.com/K5d8dY5.gif

changing hover options doesnt do anything here

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>

So I tried taking all the files from the github and copying it on top, nothing changed for the Icon issue.

I used this as a temp solution since my theme has custom css section

/* Styling for the down arrow symbol / .fas.fa-chevron-down { font-size: 14px; / Adjust size as needed / color: #333; / Adjust color as needed / font-family: ‘Arial’, sans-serif; / Use a common font family / display: inline-block; font-weight: normal; / Ensure font weight is normal */
}

.fas.fa-chevron-down::before {
content: ‘▼’; /* Down arrow symbol / font-size: 14px; / Adjust the size of the symbol here / font-family: ‘Arial’, sans-serif; / Ensure the font family matches */
}

/* Styling for the right arrow symbol / .fas.fa-chevron-right { font-size: 14px; / Adjust size as needed / color: #333; / Adjust color as needed / font-family: ‘Arial’, sans-serif; / Use a common font family / display: inline-block; font-weight: normal; / Ensure font weight is normal */
}

.fas.fa-chevron-right::before {
content: ‘▼’; /* Right arrow symbol / font-size: 14px; / Adjust the size of the symbol here / font-family: ‘Arial’, sans-serif; / Ensure the font family matches / display: inline-block; / Ensure it is treated as an inline block for transformations / transform: rotate(270deg); / Rotate the symbol 90 degrees to point right */
}

If elementor is a theme, we dont used that.. have a news type of theme

groups='<img src=/icons/union.png height=20 width=20>Union,<img src=/icons/monolith.png height=20 width=20>Monolith,<img src=/icons/lea.png height=20 width=20>Lea,<img src=/icons/silos.png height=20 width=20>Silos, *More stuff* ' substr]

• This reply was modified 1 year, 10 months ago by Wizard.
• This reply was modified 1 year, 10 months ago by Wizard.

So this is how the menu works with the Trees, when I am not using Any Leaflet-geojson, its all Leaflet-markers
https://i.imgur.com/6hohrEf.jpeg

When I start to remove leaflet-markers, and convert it to leaflet-geojson, the menu Parent Tree Breaks

it looks like this

https://i.imgur.com/wBnwJZi.jpeg


I didnt change any of the parentgroup, or the leaflet option data, I am missing something here that I need to do in order to make the leaflet-geojson to work in the parentgroup

Or there is a bug

The Markers Still turn Off and On when I click on them so the leaflet-optiongroup still seems to pick up the new leaflet-geojson changes I put in… but the parentgroup doesnt seem to register it.

Wait, so your saying that
iconurl=”{url}”
iconsize=”{size}”

Can not take the data from the json and you gotta manually add it in?