DEV Community

Clifton Zama
Clifton Zama

Posted on

Trying to get my hands on the map object in DrawAttention Leaflet

I am using DrawAttention plugin in WordPress. This plugin relies on Leaflet. I need to change what happens when you click on an area on the map. To do so, I want to get my hands on the map object of Leaflet. But since it is declared inside a function I can't. I tried this in my footer, but the ID returns null. How do I get my hands on the map?

function checkForMap() {
const mapContainer = document.querySelector('.hotspots-map-container');
if (mapContainer) {
console.log("Leaflet map container found:", mapContainer);
console.log("leaflet_id:", mapContainer._leaflet_id);
let currentId = document.querySelector('.hotspots-drawing-container')?.id?.split('-').pop();
if (!currentId) {
console.error("Could not determine currentId.");
}
const mapContainerId = 'hotspots-drawing-container-' + currentId;
const mapInstance = L.DomUtil.get(mapContainerId) ? L.DomUtil.get(mapContainerId)._leaflet_id : null;
console.log("Leaflet Map ID:", mapInstance);

            observer.disconnect(); // Stop observing once found
        }
    }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)