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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)