Leaflet – Fixing Popup Disappearance or Movement Over Drawn Polygon

leafletleaflet-drawpolygonpopup

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?

Best Answer

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);       
    }
});
Related Question