Open a marker popup by clicking a link outside of the map?

[Samantha Bridgehouse]

I've used Leaflet for a store locator. Beside the map, I have a list of stores. I'd like to be able to click the store name and have it activate the corresponding marker's popup. I would really appreciate some guidance on how I could go about doing this! (I'm brand new to Leaflet. Both the store list and the Leaflet map are output through Drupal Views.)

[William Fendler]

Check this issue out on Github. I posted my solution here: https://github.com/CloudMade/Leaflet/issues/374

The way I've done it is when the markers are plotted, I add my own ID property to each object marker object. The DOM element links also have a data-attribute with that ID (since they're plotted from the same data source), so when they are clicked, it matches that data-attribute ID with the ID of the marker object with that same ID.

[Samantha Bridgehouse]

Thanks a lot William! I had been hoping for a solution that didn't involve altering the Leaflet code since I was using Drupal with a Leaflet Module and Views, but I ended up doing the map from scratch after all, and your solution worked a charm. :) You rock!

[Bryan McBride]

I've put together an example showing some Leaflet + GeoJSON + jQuery hacks that includes feature select zooms, feature search with autocomplete, and sidebar interaction. Hopefully this will help someone else http://projects.bryanmcbride.com/leaflet/geojson_hacks.html.

BRYAN

[William Fendler]

Samantha, glad to hear it worked for you!

Bryan, that demo is really great and I'll definitely be taking a hard look at that soon. Good work!

On Thursday, September 20, 2012 4:08:25 PM UTC-5, Samantha Bridgehouse wrote:

[Patrick Brophy]

William, I'm trying to accomplish the same thing as Samantha. Leaftlet moved their repository and your link does not work anymore.  Can you post the updated link? Or a sample of what you did Samantha? 

[daniel....@noaa.gov]

How do you assign markers IDs Bryan? That's the thing i'm stuck on right now. 

[daniel....@noaa.gov]

// I actually did it by creating a vararray and then making an array filled with marker objects. 

vararray[i] = L.marker(locationarray[i].location).addTo(map);

vararray[i].bindPopup('<div id="hello'+ i +'">' + whatevervar + '</div>')

// then i added divs outside the map with an onclick function that triggered the objects popup

// the id i pass in as a parameter is numeric because it is the one i gave to the divs outside the map when i initialized them in a for loop. I also show and hide the divs outside the map depending if their coordinates are in the boundaries of the map. You can do that with the 'move' function. 

$.example = function (id) {    

vararray[id].openPopup()

}

Worked for me

[daniel....@noaa.gov]

You should try this alternative method Patrick if Bryan doesn't respond. It seems pretty efficient and now you have control over every single marker on the map.

[Tony Kidman]

I'm learning at the moment so can you provide and example of how you would structure the link?

[Bryan McBride]

See the following thread: https://groups.google.com/d/msg/leaflet-js/_4xsfdBMnpI/U6jak0w8sLkJ

BRYAN

[Evan Chakroff]

I'm trying to do something very similar - and I'm also new to leaflet (and to .js in general). I tried digging through the code in the linked examples from this thread, but it's a little too complex for me.... though they are very nice examples!

Basically, I've taken the default Leaflet example, added a bit of code to pull a "city" variable from the URL, load an external list of markers based on that variable. I've also set up some custom marker icons and added the 'locate' plugin. So far so good.

What I need to do next is add a simple list of all the markers, as links, and simple pop-up or highlight the appropriate marker when that link is clicked.

For the moment, I want to understand the basics of how to set this up, no need to zoom to the marker for instance.

In the zip file attached i've included all the files needed to get it working once extracted to a folder. The only thing is you'll have to type "maps.html?loc=kyoto" to get it working, but then you should see the map populated with markers.

I hope someone can help me find a simple solution to this.