2

If I would like to popup something over an actually drawn polygon, then it sometimes disappear or moved to the first point of the polygon.

Polygon vs popup in leaflet

https://jsfiddle.net/o149mgwj/19/

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControlFull = new L.Control.Draw({
    draw: {
        polygon: {
          allowIntersection: false, // Restricts shapes to simple polygons
          drawError: {
            color: '#e1e100', // Color the shape will turn when intersects
            message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
          },
          shapeOptions: {
            color: '#97009c'
          }
        },
        // disable toolbar item by setting it to false
        polyline: false,
        circle: false, // Turns off this drawing tool
        rectangle: false,
        marker: true,
        circlemarker: false
        },

    edit: {
        featureGroup: drawnItems,
        remove: true
    }
});

map.on("draw:created", function (e) {
    //var drawn_layer = e.layer;    
    var temp = drawnItems.addLayer(e.layer);
    //drawn_layer.addTo(drawnItems);

    var popupContent = 'blabla';        

    temp.bindPopup(popupContent, {keepInView: true, closeButton: true, autoClose: false, autoPan: false}).openPopup();

/*  if (e.layer instanceof L.Marker) {
        var popupCoords = e.layer.getLatLng();
    }
    if (e.layer instanceof L.Polygon) {
        var popupCoords = e.layer.getCenter();
    }

    var popup = L.popup()
        .setLatLng([popupCoords.lat, popupCoords.lng])
        .setContent(popupContent)
        .openOn(map); */

});

I have tried .css style manipulation as well, like:

.leaflet-interactive {
    z-index: 1;
}

.leaflet-popup-content-wrapper  {
    z-index: 1000 !important ;
}

Any idea to solve this issue?

  • @Incognitoo, Can you link your JSFiddle? – pnz Sep 20 '18 at 14:27
  • It's not clear what you are asking. I see two popups in your screenshot. What is the problem with the two? – Stefan Sep 20 '18 at 14:48
  • Maybe test the code, then you will see that the popup in the polygon sometimes doesn't appear, sometimes moved from the center. – pnz Sep 20 '18 at 20:26
  • The JS fiddle would be nice. I assume that there is something wrong with this line: var temp = drawnItems.addLayer(e.layer);. You are effectively assigning the method addLayer() to a variable. Later you bind a popup to the method. I'm not sure why you get a popup at all (sometimes). – Stefan Sep 20 '18 at 21:41
3

Finally, I solved it. So I think it's fair if I share it:

map.on("draw:created", function (e) {
    var layer = e.layer;
    drawControlFull.remove();
    drawControlEditOnly.addTo(map);

    var popupContent = 'blaa!';

    drawnItems.addLayer(layer);

    if (layer instanceof L.Marker) {
        var popupCoords = e.layer.getLatLng();
        var popup = L.popup({offset: [0, -20], keepInView: true, closeButton: true, autoClose: false, autoPan: true, closeOnClick: false })
        .setLatLng([popupCoords.lat, popupCoords.lng])
        .setContent(popupContent)
        .openOn(map);
    }
    if (layer instanceof L.Polygon) {
        var popupCoords = e.layer.getCenter();
        var popup = L.popup({keepInView: true, closeButton: true, autoClose: false, autoPan: true, closeOnClick: false })
        .setLatLng([popupCoords.lat, popupCoords.lng])
        .setContent(popupContent)
        .openOn(map);       
    }
});
1

I can always repeat your problem shown in the video with Firefox, while it looks fine in other browsers.

the video repeating the bug

It is true that If you click other part of drawn polygon without drawing tool on, the popup moved (in this case the last point for closing the polygon)

looks like a bug in the Drawing tool with Firefox that closing the polygon with the last point triggers popup moved unexpectedly. I don't have time to go though its documentations, blocking the event to spawn a new popup on clicked location / moving the popup may helps. It is better to open a new issue for them to handle it. https://github.com/Leaflet/Leaflet.draw/issues

  • please watch the video added. – pnz Sep 21 '18 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.