Make Map events accessible

[gheaven]

Dear sweet lovely Franky….

I am wanting to catch an open popup event on the map to do some interesting stuff and find that the events on the map are not going anywhere.

Can you add an object reference of the map to the map container div so that I can attach event handlers to the div please?

for example
in your code do something like…

			div_arr_map[i] = L.map(divname, myOptions);
			
		// GH: Add it to the div as a map object reference..
		    divs[i].mapObj = div_arr_map[i];
			// add the title layer
			L.tileLayer(osmUrl, {attribution: osmAttrib}).addTo(div_arr_map[i]);

This may also avoid the need to maintain that array of maps in your javascript.

Then I can do something like…

jQuery(document).ready(function($) {
	// Nest a call to ensure we are last on the list.
	jQuery(document).ready(function($) {
	var divs = document.getElementsByTagName('div');
	for (var i = 0; i < divs.length; i++) {
		var divname = divs[i].id; 
		if (divname.indexOf("eme_global_map_") === 0) { 
			divs[i].mapObj.addEventListener("popupopen", mtsSyncPopup);
			break;
		}
	} 
	} );
} );

function mtsSyncPopup(p) {
	var tx = p.popup.getContent();
	var x = tx.split('<br>')[0];
	document.getElementById("foo").innerHTML = x;
}	

Keep up the good work..

[Franky]

Are you sure that adding “divs[i].mapObj = div_arr_map[i];” has no other side-effects?

[gheaven]

Hi Frankie

So far in my testing on moderately recent browsers it has had no downside. Seems that support for it has been around since about 2010 in some form. The recommendation is to ensure that any new property does not over ride an existing property of the same name so maybe having an eme_ prefix is a sensible idea.

Also since you (wordpress) totally reloads the page with each major map change event, any attached event handler is cleaned up by the browser’s garbage collection and the map DIV’s all get new ID’s. I think it is fairly safe for now.

[Franky]

I’m still a bit reluctant on this … somehow it doesn’t feel right. Can you explain exactly what you want to solve? It seems you want to change the popup inner html, but each location already allows you to do so. Or is there something I’m missing?

[gheaven]

Hi Franky

The functionality I am looking for is to have a form on a page that also has a locations map (with several locations) that the user chooses one location by clicking on it and the reference to that location is then populated in the form. The default popup is helpful as it shows the user the current focus. The end game for this is that a new event could get created for that location, in our case, a “Grass needs a Mow” event.

The code of accessing the content of the popup is purely illustrative. The real bit I am after is access to the popupOpen event from leaflet.

I tried waiting for a general “on click” event from the DIV but leaflet does not pass the event up after opening the popup and shifting focus to it. I have tried playing around with js load sequences to make eme_location_map.js load real early and then grab hold of that array but it is declared privately. Declaring it as public did not work either. So far the only thing that has worked is to add a map object reference to the div and then populate it with a pointer to the leaflet map object that you create in eme-locations-map.

In answer to your earlier point, I agree that it is possible to find the content of any element of a displayed map by trawling down through the DOM that is written to the DIV by leaflet. My challenge here is knowing that an event has occurred within the map to allow me to go hunting. The only other alternative I can think of would be to hang a polling event off the window and check the map object a couple of times per second. That is really ugly…

[Franky]

If I currently have this:
div_arr_map[i] = L.map(divname, myOptions);
And I add this:
divs[i].eme_mapObj = div_arr_map[i];
does then divs[i].eme_mapObj also has the same events/objects that are added later on to div_arr_map[i] (using addTo etc ..)?

Or is it then simpler to replace all “div_arr_map[i]” occurences by “divs[i].eme_mapObj” ?

[gheaven]

Yes, in your code divs[i].eme_mapObj does have all the same events properties etc. It is the same object pointed to by a different reference. Having said that, I would hesitate in replacing all references to the “div_arr_map[i]” occurrences as you change from referencing a map object directly to referencing a DOM object then a map Object as a new property. Enumerating the list of properties could be time consuming for the browser. If it were accessed only once, no problem. Accessing it 3 or 4 times as you do will accentuate any overhead.

[Author]

Posts