I have an idea for a browser plugin which would manipulate Leaflet maps on third-party sites. But I'm stuck on a simple thing: I'm not sure how to discover Leaflet map DOM elements on a page, and then access the associated Leaflet map object.

1. Is $('.leaflet-container') a reliable way to find all map objects?

2. How to actually access the map object from that object, so I can do something like: $('.leaflet-container').eachLayer(...), which doesn't work.

This question is essentially the same as How can I get a leaflet.js instance using only a DOM object?, but the answer there was a workaround which doesn't help.

I have an idea for a browser plugin which would manipulate Leaflet maps on third-party sites. But I'm stuck on a simple thing: I'm not sure how to discover Leaflet map DOM elements on a page, and then access the associated Leaflet map object.

1. Is $('.leaflet-container') a reliable way to find all map objects?

2. How to actually access the map object from that object, so I can do something like: $('.leaflet-container').eachLayer(...), which doesn't work.

This question is essentially the same as How can I get a leaflet.js instance using only a DOM object?, but the answer there was a workaround which doesn't help.

• javascript
• dom
• leaflet
• introspection

2 Answers 2

1. Yes, that should be sufficient, although it's not a documented behavior and could at least theoretically change in future versions of Leaflet
2. There's no way to do this. The reference to the map is owned by the code creating the map, and it could have discarded it or might be storing it in a location you do not have access to. Leaflet itself does not store a reference to the map anywhere where you can access it

On a side note, it is my opinion that you should rather let users of your code explicitly pass references to you, rather than you trying to automatically find references. See for example the inversion of control principle, where the caller supplies dependencies; Law of Demeter is also somewhat applicable - don't pry into other codes internals (unless you really, really have to).

OK, so this is a solution that could work, but it is brittle and limited. If you have a way to more directly find the reference, that's ideal.

I wanted to get a map reference where I do not want to modify upstream code; it's a one-off where brittleness is OK.

I know my map is going to be defined on the window.FOO scope (i.e. it's a global reference) and that it will be in the format map0000 where 0000 is a random number. So I constructed a quick function to scan the global window object's properties for variables matching this pattern.

window[Object.keys(window).find(key => key.substr(0,3) === "map")];

This returns a Leaflet map reference but could break if there is more than one map on the page. You could also add a validation that it's a real Leaflet map by testing it's properties.

Again, this is not ideal, but, if your use case is limited enough, it is one way to achieve this. Thanks!