link to a specific point on leaflet map

Question

I have website where on the main page there are some links to specific districts of my city and I want to link them to the second page where there is a leaflet js map. So the link should redirect to the map page and zoom to a specific point on the map.

So like: index.html -> Clicking on the link "Manhattan" -> map.html -> zoom to manhattan

the other links should open the same html page but a different zoom point.

So it basically just has to do something like that:

map.panTo(new L.LatLng(40.737, -73.923));

But the problem is that the leaflet map is not initialized on the index.html so that this javascript command can not be executed until the map.html is loaded. So the map.html page needs to know that it has to zoom to manhattan.

Is it also possible when the links are not like <a href=""></a> but are in such a disctrict map: Link and the different districts have just a href attribute in the raphael JS.

Thanks to everyone!

Answer 1

You can't use leaflet in your index.html, but only to map.html

In your index.html insert links to map.html with lat lng and zoom as parameters. Example:

<a href="/map.html?lat=10.123&lng=20.567&zoom=13">link</a>

And in your map.html read this parameters to center the map. Example:

<script>
  function getQueryStringValue (key) {  
    return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));  
  } 
  var lat = getQueryStringValue("lat"));
  var lng = getQueryStringValue("lng"));
  var zoom = getQueryStringValue("zoom"));

  var mymap = L.map('mapid').setView([lat, lng], zoom);
</script>