leaflet.js wms layer zoom not working on double click

Question

I have a leaflet.js based GIS web page at: http://gisdev.clemson.edu/fireflies/ . In that, there is a WMS layer (Counties) which is added as the last layer (on top of the existing layers). What needs to happen is that once someone double clicks on the map (on any County) then the map should zoom. But it doesn't.

The map will zoom on double click if empty area like the ocean is clicked. I think somehow I need to make the Counties layer to respond to double click but I can't find any examples/reference.

Here is how the Counties WMS layer is being added:

   var wmscounty = L.tileLayer.wms("<?php echo  $geoserverwms_url; ?>", {
        layers: '<?php echo  $geoserverwms_layer_countypop; ?>',
        format: 'image/png',
        transparent: true,
        version: '1.1.0',
        attribution: "countypopulation"
      }
    );
    wmscounty.addTo(map);

IF WMS layer can't work for some reasons to respond to double clicks then there can be some kind of general map event listener which would at least zoom to the double clicked area? I think the WMS layer may not work because it is some tiled image? If you are curious, it is generated by GeoServer.

Update the Counties layer is zoomable if I disable a States layer. So somehow I have either make the States layer non-clickable or change some z-orders?

Thanks!

Drew Bollinger Drew Bollinger · Accepted Answer · 2014-08-15T17:54:04

Can you add a zoom function to the layer itself? I came across a similar problem and solved it by adding this inside the layer definition:

onEachFeature: function (feature, layer) {
                  layer.on({
                    dblclick: function(e) {map.setView(e.latlng, map.getZoom() + 1);}
                  });
                }

Found here: https://www.mapbox.com/mapbox.js/example/v1.0.0/zoom-to-double-click/

leaflet.js wms layer zoom not working on double click

2 Answers