1

I have a leaflet map with some loaded polygon layers. When using the Simple Markers plugin, i would like to create a new marker on top of an already existing polygon feature, but i can only click the feature (which brings up the popup with information) and not place the marker on top of the feature. It works fine on an empty piece of the map.

Is it possible to disable the feature popup when the Simple Marker function is running?

L.Control.SimpleMarkers = L.Control.extend({
    options: {
        position: 'topleft'
    },

    onAdd: function () {
        var marker_container = L.DomUtil.create('div', 'marker_controls');
        var add_marker_div = L.DomUtil.create('div', 'add_marker_control', marker_container);
        add_marker_div.id = 'add_marker_div_id';
        add_marker_div.title = 'Add a new Note';
        L.DomEvent.addListener(add_marker_div, 'click', L.DomEvent.stopPropagation)
            .addListener(add_marker_div, 'click', L.DomEvent.preventDefault)
            .addListener(add_marker_div, 'click', (function () { this.enterAddMarkerMode() }).bind(this));

        return marker_container;
    },

    enterAddMarkerMode: function () {
        if (markerList !== '') {
            for (var marker = 0; marker < markerList.length; marker++) {
                if (typeof(markerList[marker]) !== 'undefined') {
                    markerList[marker].removeEventListener('click', this.onMarkerClickDelete);
                } 
            }
        }
        document.getElementById('map').style.cursor = 'crosshair';
        document.getElementById('add_marker_div_id').style.backgroundColor = '#b0c4de';
        map.addEventListener('click', this.onMapClickAddMarker);
    },

    onMapClickAddMarker: function (e) {
        map.removeEventListener('click'); 
        document.getElementById('map').style.cursor = 'auto';
        document.getElementById('add_marker_div_id').style.backgroundColor = '#FFF';

        var popupContent =  "You added a note on the map at " + e.latlng.toString();
        var the_popup = L.popup({maxWidth: 160, closeButton: false});
        the_popup.setContent(popupContent);

        var marker = L.marker(e.latlng);
        marker.addTo(map);
        marker.bindPopup(the_popup).openPopup();
        markerList.push(marker);

        return false;    
    },
});
var markerList = [];

Edit:

I have added the features from a PHP file through the following code as a GeoJSON layer:

var exp_PolygonJSON = new L.geoJson(exp_Polygon,{
    onEachFeature: pop_Polygon,
    style: doStylePolygon
});

The popups are coming from:

function pop_Polygon(feature, layer) {                  
    var popupContent = '____Popup html code____';
    layer.bindPopup(popupContent);
}
2

You could unbind the popup from the polygons when entering marker mode enterAddMarkerMode, and then bind them again after adding a marker onMapClickAddMarker.

Without knowing how your polygons or popups are constructed, it is difficult to say exactly, but assume you have added polygons and saved them to a L.featureLayer() called polyFeatures:

// somewhere in enterAddMarkerMode() function
polyFeatures.eachLayer(function(layer){
    layer.unbindPopup();
});

// somewhere in onMapClickAddMarker() function
var popup = "Hi!";
polyFeatures.eachLayer(function(layer){
    layer.bindPopup(popup);
});
  • Thanks for your help, sadly i couldn't get it to work. I added some more information to my original question. It's a bit late now, i'll have a more in-depth look at it tomorrow. – Max May 26 '15 at 21:48
  • What error are you getting? Also, is this live somewhere? Can you provide a url? The interactions between the plugin and the geojson layer are a bit hard to guess without a more complete picture. – toms May 26 '15 at 23:01
1

I managed to fix this issue in a whole different way than initially asked for.

Even when popups where not present (with unbindpopup) i was still not able to place a new marker on top of polygons.

The reason was that there was no custom event added to the polygonlayer that could respond to a click, the code only added such an event on the map.
So inside the 'enterAddMarkerMode' function, I added:

exp_PolygonJSON.addEventListener('click', this.onMapClickAddMarker);

And inside 'onMapClickAddMarker' :

exp_PolygonJSON.removeEventListener('click', this.onMapClickAddMarker);

That did the job for me. Hope this helps for future reference.

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.