Make sidebar div active on Marker click (and vice versa)?

Normally you would associate a marker with an object or at least an Identifier (an Objectid) by simply defining a variable for it on the marker object.

Leaflet also uses an internal id (marker._leaflet_id) for each marker by default which you can use for your purposes. It depends mainly on how you create your markers and its associated sidebar divs so that both get associated with each other and if you are navigating from a marker to an element elsewhere or vice versa (you want to select a marker by clicking on the sidebar).

Here is a small JSFiddle. I forked it from another one and modified it a little bit to show the basic principles of traversing the association in both directions:

  • You can add markers by clicking on the map
  • simultaneously divs are created on the sidebar for each marker
  • by clicking an existing marker on the map, the div gets selected (gets anothr color)
  • by clicking the "remove" link on the sidebar div, you can remove the div and its associated marker

If you tell us more details about what you want to accomplish exactly, we can improve this example for sure.

Replying to your edits: So you want it to be navigable from sidebar to marker and vice versa. You just have to implement click-handlers for both (one marker-click as in my fiddle, but also a sidebar-item-click). I also made this for another project, but I had big problems, due to markers/sidebar-items came out of a filter...so if you "select" an item and then modifiy the filter so that the selected item dissapears, what should happen then? What should happen if the previously selected item appears again? Or is there not any type of "selection" only zooming to a marker when you click the sidebar item?

You have to think about some of these detailed questions. The click handlers are not really hard to do.

Sidebar mouseover: Here is another version of this JSFiddle where the sidebar items have an mouseover handler, which should pan the map to the associated marker. Unfortunately Leaflet only pans to a marker if it is more than one screen away, so you have to zoom in a little bit to see the effect (don't know ad hoc how to force leaflet to pan).

Tags:

Jquery

Leaflet