I have a use case for leaflet where i need to have a list of POI on the left, and a leaflet map showing markers for those POI on the right.
If i click on a marker on the map, i highlight the POI in the list, this works fine.
However, i also want to do the reverse: if i click on the POI in the list, center the map on the marker for that POI and open it's popup.
I reckoned that if i could get the right img for the marker and then trigger a clickevent on it via JS, that should work. But that fails to trigger the popup. I can't find anything in the docs, blogposts or stackoverflow.
Anybody with any ideas?
Turns out i can do this by ensuring i have an array of the markers, then select the marker tied to the list and call the openPopup() method on it.
Found the answer here: https://github.com/Leaflet/Leaflet.markercluster/issues/180#issuecomment-18669817
Related
This is a basic webmap feature, but I'm not finding it anywhere.
I want to do what they have in google maps - the labels are like links, and when you click on a label of a place that's a polygon or line it zooms to the bounds of that place.
Try it here, click on "Des Moines" here, or any other feature:
https://www.google.com/maps/#41.5241414,-93.5651933,9.33z
This is the closest thing I've found, but it's with a button rather than a link.
Zoom to Bounds: https://www.mapbox.com/mapbox-gl-js/example/zoomto-linestring/
I am looking for a widget or a script example which generates a clickable list of all polygons in a layer - when a polygon in the legend is clicked, the map is panned/zoomed to that polygon.
Hard to say exactly what you are looking for with the little details provided in your question, but you might be interested in Leaflet.CountrySelect plugin:
Control with menu of all countries, and an event listener that returns the selected country as a GeoJSON feature (demo)
(although it is about "countries", it just returns whatever JavaScript object you have passed to the countries option)
You can see how it is used in the demo source page, and it is also explained on the plugin home page.
I'm struggling to make the markers on this Mapbox map clickable without destroying the scrolling effect. I want to make it possible to click on one of the markers, and then be scrolled to the right section.
Does anyone know how to fix it?
Add this to your javascript:
/* Bind event handler to the featurelayer that holds the markers */
placesLayer.on('click', function(e) {
//Get the id of the clicked marker
var id = e.layer.feature.properties.id;
//Scroll to the element
document.getElementById(id).scrollIntoView()
});
http://jsfiddle.net/1oxkgfkw/
NOTE: As is, the code posted in the mapbox example won't work because of of their css definition for 'article'. You have to remove right:0 as I did in the jsfiddle so the article element doesn't cover the screen and prevent clicks from registering on the markers.
Using Mapbox instead of Google, I'm building up a menu in the map that shows tabbed infowindow on every marker. The problem is that no matter which marker I'm on, the infowindow is always the same (from only one of the markers), as if it doesn't read the variable content var p = marker.feature.properties;
Anyone please have a look at this demo Thank you
[the system wont allow me to reply to the reply I got, so here's my reply:]
Thanks for the link. It's a different approach. The menu is missing and I can't really integrate the two scripts:
This was an error in that particular example: see the fixed version that correctly binds the right tooltip to the right marker.
I had a problem in bing maps, any one solve my issue.
On my bing maps I had lot's of pushpins, some are very closer to each other. So, when I click on one pushpin, respective Infobox is opened, but closer pushpins are displayed on the Infobox opened. Those need to be hidden below that opened Infobox.
So,please help me to hide the inactive pushpins beside infobox
I know exactly what your issue is. In bing Maps V7 the infobox entity is considered as just another entity like a pushpin, polygon, poliline... This is to make it more flexiable.That said, in most cases you want your infobox to always appear above your shapes. This can easily be done by using two entity collections. The bottom one for your shapes/pushpins and the top one for your infoboxes. I have a blog post demonstrating this here: http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/