1

I have added a GeoJSON polygon using:

var activeMunicipality = L.geoJson(municipalities, {
    style: function (feature) {
        return {
            color: "#000",
            weight: 2,
            fillOpacity: 0
        };
    },
    filter: function (feature, layer) {                     
        if (feature.properties.CAT_B === filterMunicipality) return true
    }, interactive: false
}).addTo(map);
map.panInsideBounds(activeMunicipality.getBounds());
map.setMaxBounds(activeMunicipality.getBounds());

I then also bind and open a popup every time the map is clicked using:

function onMapClick(e) {
    layerGroup.clearLayers();       
    var location = L.marker(e.latlng).addTo(layerGroup);
    var popup = location.bindPopup('<strong>Latitude:</strong> ' + e.latlng.lat.toFixed(5) + '<br> <strong>Longitude:</strong> ' + e.latlng.lng.toFixed(5));
    popup.openPopup();      
}

map.on('click', onMapClick);

I only want the popup to be created when clicking inside of the GeoJSON. When clicking outside of the polygon, I would trigger something like

alert("The selected location is outside of your municipality");
4
  • Any special reason you don't want to have activeMunicipality layer interactive?
    – TomazicM
    Aug 15 at 15:52
  • Because my map has other ways to find the user's location other than clicking on the map. Such as searching for an address or their current location. So for example, the results of the geocoder will also need to check if the location is inside or outside of the activeMunicipality before creating the popup.
    – JohnGIS
    Aug 15 at 15:57
  • I'm asking why are you setting option interactive: false for activeMunicipality layer?
    – TomazicM
    Aug 15 at 16:00
  • No special reason. The layer can be interactive if needed for this to work.
    – JohnGIS
    Aug 15 at 16:28

1 Answer 1

1

Simplest solution would be to set feature click event processing in onEachFeature option. If click is caught there, it does not propagate to the map. Layer activeMunicipality has to be interactive for that to work.

Then just add map click event processing, where you display alert.

Code could then look something like this:

var activeMunicipality = L.geoJson(municipalities, {
  onEachFeature: function(feature,layer){
    layer.on('click', function(evt) {
      onMapClick(evt);
    });
  },
  style: function (feature) {
    return {
      color: "#000",
      weight: 2,
      fillOpacity: 0
    };
  },
  filter: function (feature, layer) {                     
    if (feature.properties.CAT_B === filterMunicipality) return true
  }
}).addTo(map);

map.on('click', alert("The selected location is outside of your municipality"));
2
  • Thanks, this works well. Could this onEachFeature solution also be used to detect if a geocoder result is inside of the activeMunicipality layer or not?
    – JohnGIS
    Aug 15 at 18:49
  • 1
    No, I don't think so. Anyway, that's a different question, so you should put it as a new question.
    – TomazicM
    Aug 15 at 19:33

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.