How to add marker onto polygon layer using leaflet.pm?

Question

Lines and polygons are added without problems, but when trying to add markers on top of a polygon layer ("lyrPoly"), it interprets that I want to click on the polygon (e.g. opens popup) instead of adding marker. How can I avoid this? I am using leaflet.pm to add markers, linestrings and polygons.

This is the code for the marker:

map.on('pm:create', function(e) {
                e.marker;
                var type = e.layerType,
                    layer = e.layer;
                $(document).ready(function() {
                    var jsnMarker = layer.toGeoJSON().geometry;
                        jsnMarker = {
                            type: "MultiPoint",
                            coordinates: [jsnMarker.coordinates]
                        };
                })
            });

    $(function() {
        $('.check').change(function() {
            var data = $(this).val();
            if (data == "versionOne") {
                var markerStyle = {
                    draggable: false,
                    icon: customIcon,
                };
                var options = {
                    markerStyle,
                }
                map.pm.enableDraw('Marker', options);
             } else if (data == "versionTwo") {
                var markerStyle = {
                    draggable: false,
                    icon: otherIcon,
                };
                var options = {
                    markerStyle,
                }
                map.pm.enableDraw('Marker', options);
            }
        $('.check').trigger('change');
    });

And inside the ajax function I use this:

   lyrMarker = L.geoJSON(jsnMarker, {
                    pointToLayer: function (feature, latlng) {
                       if(feature.properties.marker_type=="versionOne"){
                        return L.marker(latlng, {
                            icon: customIcon
                        })
                             }else if 
                        (feature.properties.marker_type=="versionTwo"){
                                 return L.marker(latlng, {
                            icon: otherIcon
                        }) 
                             } ,
                    onEachFeature: forEachMarker
                });

For the polygon-layer I have a corresponding "onEachFeature"-function that looks like this:

function forEachFeature(feature, layer) {
    var att = feature.properties;

    var popupContent =
        "Popup-content" ;
    layer.bindPopup(popupContent, {
        offset: [0, -120]
    });
    layer.on("click", function (e) {
        lyrPoly.setStyle(style); //resets layer colors
        layer.setStyle(highlight); //highlights selected.
 });
};

Adding marker to the background/basemap works fine, but not onto the polygon layer. Why is that, and what would be a good solution? I don't want to add the marker to the same layer as the polygons, but avoid polygons "getting in the way".

I've had ideas about making the polygon layer interactive: false while in adding-marker-mode, but haven't succeeded.

Answer 1

Update your click event and test if drawing mode is enabled:

function forEachFeature(feature, layer) {
    var att = feature.properties;

    var popupContent =
        "Popup-content" ;
    layer.bindPopup(popupContent, {
        offset: [0, -120]
    });
    layer.on("click", function (e) {
        if(!map.pm.Draw.Marker.enabled()){
            lyrPoly.setStyle(style); //resets layer colors
            layer.setStyle(highlight); //highlights selected.
        }
 });
};

Update To disable the popup open event add following code at the top of your file. Before you create a Layer with a Popup:

L.Layer.include({

_openPopup: function (e) {
        var layer = e.layer || e.target;

        //This IF is new
        if(map.pm.Draw.Marker.enabled()){
           return;
        }

        if (!this._popup) {
            return;
        }

        if (!this._map) {
            return;
        }

        // prevent map click
        L.DomEvent.stop(e);

        // if this inherits from Path its a vector and we can just
        // open the popup at the new location
        if (layer instanceof L.Path) {
            this.openPopup(e.layer || e.target, e.latlng);
            return;
        }

        // otherwise treat it like a marker and figure out
        // if we should toggle it open/closed
        if (this._map.hasLayer(this._popup) && this._popup._source === layer) {
            this.closePopup();
        } else {
            this.openPopup(layer, e.latlng);
        }
    },
});

Example: https://jsfiddle.net/falkedesign/dg4rpcqe/