popup.openOn(map) only works in firefox, not in chrome or edge

280 Views Asked by At

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

There are 0 best solutions below