tl;dr
popup.openOn(map)
only works in firefox, not in chrome or edge. Popups on markers work flawlessly.
Lengthy version:
I'm kind of abusing leaflet.draw to let users insert an image overlay. I do this by letting the user draw a rectangle, grab the relevant corners and use it to place the image overlay. The image itself is uploaded by the user via a some form fields. These are shown in the popup I open on the center position of the drawn rectangle. The code looks like this, the important part is the last line:
map.on('draw:created', function (event) {
if (event.layerType === 'rectangle') {
insertImage(event);
}
}
function insertImage(event){
layer = event.layer,
feature = layer.feature = layer.feature || {}; // Intialize layer.feature
feature.type = feature.type || "Feature"; // Intialize feature.type
props = feature.properties = feature.properties || {}; // Intialize feature.properties
props.imageURL = ""; // Define the necessary feature properities -> imageURL and zoomLevels
props.zoomLevel = minZoom+1;
props.endZoomLevel = maxZoom;
var editablePopup = L.responsivePopup({maxWidth: "auto"}); // create the popup and afterward the content for it
imageBounds = layer.getBounds(); // get the bounding box of the rectangle aka its NE and SW corner
content = imageForm("", props.zoomLevel, props.endZoomLevel, imageBounds, "create"); //create the form in the popup
editablePopup.setContent(content); // add the content to the popup
event.layer.addTo(map); //we need to add the event layer to the map in order be use the getCenter method to place the popup
editablePopup.setLatLng(event.layer.getCenter()); //the popup will open at the center of the drawn rectangle
map.removeLayer(event.layer); //now we can get rid of the layer and remove it from the map
editablePopup.openOn(map); //open the popup
};
It works perfectly fine in Firefox, but in Chrome or Edge no popup opens and no error or warning is shown in the console.
Notes:
- I do use the responsivePopup plugin, but already tested it with the regular L.popup and got the same result.
- Popups on markers work fine in all browsers.
- If I replace the last line with
layer.bindPopup(editablePopup);
it stops working alltogether, even in Firefox.