19

I'm trying to change some things on a map that is already initialised by another script, using the Leaflet library. This other script did not store the map-object in a global variable, or in any other location I can access with my script. So currently there is a map on my page, but I don't have the map object.

What I'd like to do is to retrieve the object of an already-initialised map, to make changes to it. For example, if there'd exist a function L.getMap('myID') I'd like to use such a method to retrieve the map object linked to the container myID.

TL;DR: Is there a way to get a map object of an already-initialised leaflet map, using the id of the container?

chrki
  • 6,143
  • 6
  • 35
  • 55
Joeytje50
  • 18,636
  • 15
  • 63
  • 95
  • How do you init your map? – Fabiano Taioli Jul 31 '17 at 09:54
  • What is the other script? – Fabiano Taioli Jul 31 '17 at 10:07
  • @FabianoTaioli I'm working on a MediaWiki extension, which uses https://www.mediawiki.org/wiki/Extension:Maps to load the maps. I've tried looking through the code of that extension, but it doesn't seem to store the `map` variable anywhere accessible. – Joeytje50 Jul 31 '17 at 10:11
  • 2
    I have no experience with the Mediawiki Maps extension, however I found [this JS file in the source code](https://github.com/JeroenDeDauw/Maps/blob/master/includes/ext.maps.common.js) which indicates that a `window.maps` variable is created with a list of maps. I don't know whether this contains map objects or simply a list of (to be initiated) maps... – Sidney Gijzen Jul 31 '17 at 10:46
  • Do you have the possibility to execute some JS before the map is initialized? – ghybs Jul 31 '17 at 10:57
  • @ghybs yes, I do. Would that create another solution to this problem? Because I'd invite you to answer this question as well if you have another solution. The current solution by Fabiano Taioli is great for me, as I'm using mediawiki, but it might not work in other situations. – Joeytje50 Aug 01 '17 at 07:50

3 Answers3

37

For the record, in case you have the possibility to inject / execute some JS code before the map is initialized (i.e. before the "other script" executes), you can very easily customize Leaflet to keep a reference to each created maps.

E.g. using the addInitHook constructor hook on L.Map class:

// Before map is being initialized.
var mapsPlaceholder = [];

L.Map.addInitHook(function () {
  mapsPlaceholder.push(this); // Use whatever global scope variable you like.
});

// "Other script", can be in its own separate <script> and JS file.
L.map('mapId'); // The map object is pushed into `mapsPlaceholder` array.

// Then retrieve the map object to further manipulate the map.
var map = mapsPlaceholder.pop();

Demo: https://plnkr.co/edit/mywpSbfRPFOnJ8c1RNsZ?p=preview

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • Thanks for this answer! This looks like a really elegant solution. I'm going to leave my accepted answer at Fabiano's, since that's going to be the approach I'm going to use, but this looks like a much more generally applicable solution. Thanks for posting this! – Joeytje50 Aug 01 '17 at 11:16
  • Brilliant! Works great! Thank you. – PPPHP Jun 21 '18 at 08:09
2

You can access the map from the global array created by the mediawiki extension.

Es: for accessing the first map of the page

window.maps.leafletList[0].map.getCenter()
Fabiano Taioli
  • 5,270
  • 1
  • 35
  • 49
0

If you are using leaflet for WordPress plugin you can access map like this:

window.WPLeafletMapPlugin.maps[0];
TheToster
  • 7
  • 1
  • 1