Develop Reference

How to show modal window on marker click?

I am using leafletjs to build a web map and trying to figure out how to show a modal window when a marker is clicked (instead of the default popup method).
Here's my setup:
var myAirports = L.geoJson(myData, {
pointToLayer: function(latlng){
..snip..
},
onEachFeature: function(feature,layer){
$('#myModalOne').modal(options);
}
});
myAirports.addTo(map);
My HTML is like so:
<div id="myModalOne">....</div>
<div id="myModalTwo">....</div>
Lets say my data has a featurecollection with a key of 'name' (i.e., 'name': 'Bush Airport') for each feature. Would I just add a switch statement to my onEachFeature function?
Just need a little guidance,thanks.
Note: I am using Bootstrap for the modal windows

If I understand you correctly, you don't need to set the pointToLayer option which is useful if you want to display something else than a marker.
What you need is to catch the click event on the markers and display a modal window. There is no popup by default.
var myAirports = L.geoJson(myData, {
onEachFeature: function(feature,layer){
layer.on('click', function(e){
$('#myModal'+feature.properties.name).modal(options);
// or whatever that opens the right modal window
});
}
});
myAirports.addTo(map);

How to close all popups programmatically in mapbox gl?

So, I know that we have Marker.togglePopup() in Mapbox GL API.
But can we close all popups programmatically?

Here is an example: https://jsfiddle.net/kmandov/eozdazdr/
Click the buttons at the top right to open/close the popup.
Given you have a popup and a marker:
var popup = new mapboxgl.Popup({offset:[0, -30]})
.setText('Construction on the Washington Monument began in 1848.');
new mapboxgl.Marker(el, {offset:[-25, -25]})
.setLngLat(monument)
.setPopup(popup)
.addTo(map);
You can close the popup by calling:
popup.remove();
or you can open it by calling:
popup.addTo(map);
As you can see in the Marker source, togglePopup uses these two methods internally:
togglePopup() {
var popup = this._popup;
if (!popup) return;
else if (popup.isOpen()) popup.remove();
else popup.addTo(this._map);
}

The accepted answer didn't apply to my use case (I wasn't using a Marker). I was able to come up with a different solution by utilizing the mapbox's built-in event workflow. Hopefully this helps someone else.
Mapbox allows you to listen to events on the map (and manually trigger them). The documentation doesn't mention it, but you can use custom events.
Given you have a popup:
// Create popup and add it to the map
const popup = new mapboxgl.Popup({ offset: 37, anchor: 'bottom' }).setDOMContent('<h5>Hello</h5>').setLngLat(feature.geometry.coordinates).addTo(map);
// Add a custom event listener to the map
map.on('closeAllPopups', () => {
popup.remove();
});
When you want to close all popups, fire the event:
map.fire('closeAllPopups');

Mapbox automatically uses the class .mapboxgl-popup for the popup. You can also add additional classes with options.className.
So, if you have jQuery available, just do:
$('.mapboxgl-popup').remove();
Or plain javascript:
const popup = document.getElementsByClassName('mapboxgl-popup');
if ( popup.length ) {
popup[0].remove();
}
I'm pretty sure you can assume there's only ever one popup open. The default behavior seems to be that if one is open and a second item is clicked, the first popup is removed from the DOM completely when the second one opens. If your application allows multiple open popups somehow, you will need to loop through and remove each with plain js, instead of using the first item only.

I know it's an old question but I recently worked on Mapbox. As of mapbox-gl v2.3, mapboxgl.Popup has a closeOnClick property where if set to true, the popup disappears when you click away from the popup.
let popup = new mapboxgl.Popup({
anchor: "top",
closeOnClick: true,
});
map.on(
"click",
"location",
(e) => {
map.getCanvas().style.cursor = "pointer";
let coordinates = e.features[0].geometry.coordinates.slice();
popup
.setLngLat(coordinates)
.setHTML("what I want to display")
.addTo(map);
}
);
Alternatively, you can show the popup on "mouseenter" instead of on "click" and add a "mouseleave" event to remove the popup:
map.on(
"mouseleave",
"location",
() => {
map.getCanvas().style.cursor = "";
popup.remove();
}
);

wrap your popup with React.StrictMode and closeOnClick={false}.
const [popup, setPopup] = useState<boolean>(false);
...
{popup && (
<React.StrictMode>
<Popup longitude={52.001126260374704} latitude={34.906269171550214}
anchor="bottom"
onClose={() => {
setPopup(false)
}}
closeOnClick={false}
>
You are here
</Popup>
</React.StrictMode>
)}

Open leaflet marker using url parameter not working now that markercluster is used

I have a leaflet application at http://atlantaartmap.com. The javascript it uses is http://atlantaartmap.com/lazy_art.js.
At line 16, I grab a url parameter that can be used to open the map on a specific piece. While creating the markers, there is a piece of code at line 71 that checks to see if the most recently created marker has the ID referred to in the URL.
This code used to work, but I recently added marker clusters to the website and it no longer does. It still pans and zooms to the marker, but the popup does not open. Here is an example.
http://atlantaartmap.com/index.html?piece=40
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom());
marker.openPopup();
}
I'm not sure why, but map.setView() works and marker.openPopup() doesn't.
Any ideas? Thanks in advance.

My guess (am unable to test this) is that your map is still zooming while you call openPopup on the marker. At that time the marker isn't added to the map yet because of your cluster so the popup won't show. You could try to wait untill the setView method has completed by listening to the zoomend event and then open the popup:
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom()).once('zoomend', function () {
marker.openPopup();
});
}
If that won't work you can try to use a little delay with setTimeout:
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom()).once('zoomend', function () {
setTimeout(function () {
marker.openPopup();
}, 500); // Uses millisecs, you might need to fiddle around with it
});
}
Another option could be to wait for the marker's add event:
if (marker.feature.properties.pieceID == pieceID) {
marker.once('add', function () {
marker.openPopup();
});
map.setView(marker.getLatLng(), newZoom());
}
Hope that helps, as said am unable to test this due to the complexity of your case so i'm not sure. Good luck!

Opening a leaflet popup on a layerGroup

I am trying to draw country shapes on a leaflet map using L.GeoJSON(data).addTo(map). I then want to bind a popup to the click event of that country shape...
new L.GeoJSON(data, {
onEachFeature: function(feature, layer) {
layer['on']('click', popupFunction);
}
}).addTo(this.map);
popupFunction = function(event) {
var layer = event.target;
// Open the 'add' popup and get our content node
var bound = layer.bindPopup(
"<div>Hello World!</div>"
).openPopup();
// Ugly hack to get the HTML content node for the popup
// because I need to do things with it
var contentNode = $(bound['_popup']['_contentNode']);
}
Now this works fine when the data is a single polygon, because then the layer attribute passed to the onEachFeature function is just that: a layer.
However if the data is a multipolygon (i.e. the US) this stops working because the "layer" is now a layerGroup (it has a _layers) attribute and therefore has no _popup attribute and so I can't get the _contentNode for the popup.
It seems like this should be quite a common thing, wanting a popup on a layerGroup. Why does it have no _popup attribute?

short answer: layergroup does not support popup
plan B:
you should consider using FeatureGroup, it extends LayerGroup and has the bindPopup method and this is an example
L.featureGroup([marker1, marker2, polyline])
.bindPopup('Hello world!')
.on('click', function() { alert('Clicked on a group!'); })
.addTo(map);

You cannot bind a L.Popup to anything else than a L.Layer because the popup will some coordinates to anchor on.
For a L.Marker it will be the position (L.Latlng), for the L.Polygon it will be the center (look at the code to see how it is calculated).
As for the other cases (like yours), you can open a popup but you will have to decide where the popup opens:
var popup = L.popup()
.setLatLng(latlng)
.setContent('<p>Hello world!<br />This is a nice popup.</p>')
.openOn(map);

First of all, you should be able to bind popUp in similar way to Using GeoJSON with Leaflet tutorial. Something like this:
var geoJsonLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
layer.bindPopup('<div>Hello World!</div>');
}
}).addTo(map);
How to further process your popUps depends on your usecase. Maybe this can be enough for you:
geoJsonLayer.eachLayer(function(layer) {
var popUp = layer._popup;
// process popUp, maybe with popUp.setContent("something");
});
Hope this helps..

I used this code to open all popups in a layer group:
markers.eachLayer(marker => marker.openPopup());
While dealing with layer groups, you might want to consider passing { autoClose: false, closeOnClick: false } options while binding popup, so popups won't get closed while opening new popup, or if user clicks on the map:
marker.bindPopup(item.name, { autoClose: false, closeOnClick: false });

Google Maps API 3 loading icon

Is there a way to have a loading icon while the map is loading markers? I am using google maps API 3 with javascript and cant find much information on this.

This event is now called "status_changed" per the API docs: https://developers.google.com/maps/documentation/javascript/reference#KmlLayer
It can be used like this:
google.maps.event.addListener(kmlLayer, 'status_changed', function () {
if (kmlLayer.getStatus() == google.maps.KmlLayerStatus.OK) {
// Success
}
else {
// Failure
}
});

If you're loading markers using a KmlLayer object, then you can attach a listener to the event metadata_changed which gets fired after the KmlLayer has loaded all the information.
So you can have your custom loading icon display as soon as you initialize your map, then make the call for the markers using new google.maps.KmlLayer(...). In the listener for metadata_changed you can remove the custom loading icon, or hide it from displaying. So when the KmlLayer finishes loading, then it'll run the code to remove your loading icon.
You can attach listeners by going:
google.maps.event.addListener(kmlLayerObject, 'metadata_changed', function () {
...
}

You could also "hide" the map canvas with a loading div and show it after initialization.
Another thing to be aware of is when the map is hidden on init, it may behave strangely that can be fixed by "resizing" the map:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2