[GIS] Make sidebar div active on Marker click (and vice versa)

jqueryleaflet

What's the best way to change an element to active when you click on a marker.

For example, when you click on a marker on a Leaflet map, how to make it so the sidebar element that's related to it will be active?

I can write the sudo code but I'm missing pieces.

markers on click
$(#sidebar div)
   make (related) li element active

edit:
Basically, I'm trying to mimic what a lot of map directory sites like Yelp or Foursquare do. You click on the sidebar list item and the marker becomes active, and vice versa. This makes it so a user and can read info about the marker while seeing where the place is.

Mapbox had a cool (now deprecated) Foursquare example. I went through the code for that but barely understood it. That said, the example gets the point across.

Foursquare Mapbox example

When you mouseover a listitem in yelp, the marker goes black.

Yelp example

Best Answer

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).

Related Question