Maps
Maps copied to clipboard
ProfessionalWiki
External map control
I have been looking for a way to externally control a leaflet map. That is I have a list of addresses and I want to have a "show on map" link on every line. I wanted to share my solution and ask if there is a better way to do it.
/* this structure is assumed (as provided by Template:ShowOnMap):
<span class=".Maplink"><a href="URL#divId">LINKTEXT</a><span class="coords"><span class="coordvalues">lat,long</span></span></span>
The map has to be enclosed by a div with id divId. It works as link target on page and to identify the map.
*/
$(".Maplink a").on('click', function() {
divId = $(this).attr("href").split('#').pop();
for (var i = 0; i < mapsLeafletList.length; i++) {
/* check if this map is enclosed by div divId */
if ($(mapsLeafletList[i][0]).parents("#"+divId).length) {
coords = $(this).parent().find("span.coordvalues").html();
var latLng=L.latLng(coords.split(","));
mapsLeafletList[i].map.flyTo(latLng, 16);
}
}
});
Sorry for having been to brief. The javascript gets included in Mediawiki:common.js. I have a list of markers from semantic mediawiki. There are two outputs. First as a leaflet map with markers. Second as a table of addresses. Every address in the table has a field saying "show on map". The structure of this text is described in the comment of the javascript. The javascript reads the contained coordinate information and moves and zooms the map to the location of the marker. In that way in a long list there is the possibility to visualize the specific address. Working example on https://de.imedwiki.org/wiki/Anthroposophische_Medizin_in_Berlin.
My question is about acessing the map object. Is it intentionally accessible through mapsLeafletList or is that more of a backdoor? I don't really see some sort of API to get that kind of fuctionality. I'm fine that it's working as it is. Maybe it's interesting for someone else as I can imagine that I'm not the first having that question (found some similar cases on stack overflow). And as it's possible I wanted to discuss if this is an intended usecase or rather not.
mapsLeafletList purposefully made available. It is the API. Perhaps there can be more stuff there for code trying to interact with Maps, but it is hard to design that without concrete use cases, and you are the first one writing here about one.
Your approach seems sensible enough. mapsLeafletList is not going anywhere, so it should also be stable.
Ok, great. I'd suggest mentioning mapsLeafletList somewhere in the docs as it was rather coincidental that I came across it. Maybe I can simplify my use case to provide an example.
What docs? At the moment there are no developer docs :) And I have bigger fish to fry at the moment.