2

I have a Leaflet feature layer (Layer1) with popups bound. I'm using Leaflet Draw to draw a polygon in Layer2 over the feature layer. I want to then be able to open the popups for Layer1 while still having Layer2 visible on top of Layer1.

Here is an example: http://jsbin.com/keroyoy/8/edit?html,js,output

The layer of white squares has popups:

I can open popups in the layer behind

But when I draw a polygon over them, it blocks me from opening popups.

Is there a way to click 'through' the top layer? A way to make it not have a fill? I don't want to stack Layer2 behind with layer.bringToBack() because then it's not visible.

  • See my updated answer, I think I've got a working example for you to try – GISKid Apr 26 '17 at 7:43
1

I've got this up and running here for a live example As a work around for not showing popups when clicking through a polygon, I opted for listening on mouseclick that would produce a popup at that point. The popup draws over top of the polygon.

Add a variable to track if you're currently editing:

var currentlyEditing=false;

You need to listen to the draw and end of draw event:

//listen to draw event
map.on(L.Draw.Event.DRAWSTART, function (e){
  console.log("drawing");
  currentlyEditing=true;
})
//listen to end
map.on(L.Draw.Event.DRAWSTOP, function(e){
  console.log("end");
  currentlyEditing=false;
})

You can use an on click event to perform a function for when a user clicks on the map, a popup will show up but only when the user isn't currently drawing:

function onMapClick(e) {
 if (currentlyEditing == false){
    var popup = L.popup()
     .setLatLng(e.latlng) 
     .setContent('Popup')
     .openOn(map);
 } else {
     return
 }
};
map.on('click', onMapClick);
leafletFeatureLayer.bindPopup(popup);

Except we only want the popup to show if where the mouse click occurs intersects with the polygon (This is kind of hacked together, there may be a better way):

var marker;
//query layer
var query = L.esri.query({
  url: "https://geodata.wgnhs.uwex.edu/arcgis/rest/services/lslc/MapServer/0", 
});
var popup;
//on map click check if editing before adding a popup
function onMapClick(e) { 
  console.log("hi");
   marker= L.marker(e.latlng);
  if (currentlyEditing === false){
    console.log("not editing");
    //does the position clicked intersect with the polygon?
    query.intersects(marker);
     query.run(function(error,ids, featureCollection, response){
      console.log('Found ' + featureCollection.features.length + ' features');
       //get the id of the polygon that intersects
       query.ids(function(error, ids, response){
        console.log(ids.join(', ') + 'match the provided parameters');
         //show the popup
         popup =L.popup()
           .setLatLng(e.latlng) 
           .setContent('Popup')
           .openOn(map);
       });
     })

 } else {
     return;
 }
};  

map.on('click', onMapClick);

This should get you 3/4 there to customizing your popups based on their id.

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.