0

I dont even know if I'm asking this question correctly. I'm using the leaflet map to display some places. You check can see it live here. Now, I want to add a link next to my place titles so that users would locate to the place on the map. I'd appreciate it if anyone could point me to the right direction.

Efe
  • 179
  • 1
  • 11
  • You should have plenty resources for similar objective, including here on SO. See for example https://stackoverflow.com/questions/37670313/how-to-get-focus-to-map-marker-when-click-on-a-link-outside-the-map and https://stackoverflow.com/questions/41694291/leaflet-separated-div-element-interaction/41756452#41756452 – ghybs Apr 05 '18 at 05:37

1 Answers1

0

One way to have the map go to a specific location is the Leaflet "flyTo" map function. For example, if your Leaflet map is named "myMap", and you wanted the user to be sent to the University of Houston at a specific zoom level, then:

myMap.flyTo([29.766083, -95.358810], 10, {
    animate: true,
});

The "flyTo" function's parameters are: (latlng, zoom, options). Link to Leaflet flyTo documentation. There are also "panTo" and "flyToBounds" methods that may be useful to you as well.

From what I can see in your sample page, I would add event listeners to each of your university links in your left panel. Then have a function that uses the "flyTo" method to send the user to that specific University's location.

MarcusAndronicus
  • 26
  • 1