[GIS] .on(click) for layer groups in leaflet

javascriptleaflet

I have three layer groups. How to use .on (click) for all layer groups without repeating the code? Do I really need to use .on(click) for each layer group? It seems to be unnecessary lots of code.

When using this below I only get the on click window for the last layer group (area_skrym) and no info for the first two. Script load the same data and use the same info when you click on the map, but I can not get it to work with below JavaScript code.

var area_size = new L.layerGroup();
var area_weight = new L.layerGroup();
var area_skrym = new L.layerGroup();

$.getJSON("/geojson/area_polyg.geojson", function(json) {

var vectorGrid_size =  L.vectorGrid.slicer(json, {
                  maxZoom: 20,
                  zIndex: 5,
                  rendererFactory: L.svg.tile,
                  vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                      var avl = properties.Total
                      if (avl <= 500){
                        return{
                      weight: 1,
                      color: 'white',
                      opacity: 0,
                      fill: true,
                      fillColor: '#4575b4',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                      } else if (avl >= 500 && avl <= 1500){
                        return {
                      weight: 1,
                      color: 'white',
                      opacity: 0,
                      fill: true,
                      fillColor: '#91bfdb',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                      } else if (avl >= 1501 && avl <= 3000){
                        return {
                      weight: 1,
                      color: 'white',
                      opacity: 0,
                      fill: true,
                      fillColor: '#e0f3f8',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                      } else if (avl >= 3001 && avl <= 4500){
                        return {
                      weight: 1,
                      color: 'white',
                      opacity: 0,
                      fill: true,
                      fillColor: '#ffffbf',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                      } else if (avl >= 4501 && avl <= 6000){
                        return {
                      weight: 1,
                      color: 'white',
                      opacity: 0,
                      fill: true,
                      fillColor: '#fee090',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                      } else if (avl >= 6001 && avl <= 7500){
                        return {
                      weight: 1,
                      color: 'white',
                      opacity: 0,
                      fill: true,
                      fillColor: '#fc8d59',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                      } else {
                      return {
                      weight: 1,
                      color: 'white',
                      opacity: 0,
                      fill: true,
                      fillColor: '#d73027',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                    }
                     }},
                     interactive: true,
                   })

var vectorGrid_weight =  L.vectorGrid.slicer(json, {
                  maxZoom: 20,
                  zIndex: 5,
                  rendererFactory: L.svg.tile,
                  vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                      var gods = properties.1_gods
                      if (gods === 'Yes'){
                        return{
                      weight: 1,
                      color: '#e41a1c',
                      opacity: 1,
                      fill: true,
                      fillColor: '#e41a1c',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                      } else {
                      return {
                      weight: 0,
                      color: 'white',
                      opacity: 0,
                      fill: false,
                      fillColor: '#ffffff',
                      stroke: false,
                      fillOpacity: 0
                      }
                    }
                     }},
                     interactive: true,
                   })

    var vectorGrid_skrym =  L.vectorGrid.slicer(json, {
                  maxZoom: 20,
                  zIndex: 5,
                  rendererFactory: L.svg.tile,
                  vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                      var skrym = properties.size
                      if (skrym === 'Yes'){
                        return{
                      weight: 1,
                      color: '#377eb8',
                      opacity: 1,
                      fill: true,
                      fillColor: '#377eb8',
                      stroke: true,
                      fillOpacity: 0.6
                      }
                      } else {
                      return {
                      weight: 0,
                      color: 'white',
                      opacity: 0,
                      fill: false,
                      fillColor: '#ffffff',
                      stroke: false,
                      fillOpacity: 0
                      }
                    }
                     }},
                     interactive: true,
                   })

 .on('click', function(e) {
  var properties = e.layer.properties;
  L.popup()
    .setContent(
      "<b>Size</b>: " + properties.size +
      "<br><b>Number</b>: " + properties.code +
      "<br><b>Name</b>: " + properties.name +
      "<br><b>Total</b>: " + properties.Total + '.pieces' + 
      "<br><a href='" + 'mailto:' + properties.email + "'>Contact email</a>" + 
      "<br><b>Date</b>: " + properties.date)
    .setLatLng(e.latlng)
    .openOn(map);
                    })

vectorGrid_size.addTo(area_size)

vectorGrid_weight.addTo(area_weight)

vectorGrid_skrym.addTo(area_skrym)

            })

Best Answer

There are a few approaches to this. The most basic is to define an event handler and reuse that when defining events, e.g.:

function handleClickOnSomething(ev) {
  var properties = ev.target.properties;
  L.popup().setContent(properties.something).setLatLng(...).openOn(map);
}

vectorGrid_size.on('click', handleClickOnSomething);      
vectorGrid_weight.on('click', handleClickOnSomething);    
vectorGrid_skrym.on('click', handleClickOnSomething);

This kind of refactoring is applicable elsewhere - just look for places where defining a thing once and referencing it several times will make the code architecture simpler.

Another approach is to leverage Leaflet's L.FeatureGroups. From the Leaflet reference:

Extended LayerGroup that makes it easier to do the same thing to all its member layers: [...] Events are propagated to the FeatureGroup, so if the group has an event handler, it will handle events from any of the layers. This includes mouse events and custom events.

So you can do something like:

var group = L.featureGroup();

vectorGrid_size.addTo(group);
vectorGrid_weight.addTo(group);
vectorGrid_skrym.addTo(group);

group.on('click', function(ev) { /* ... */ });

group.addTo(map);

Just be aware of the difference between ev.target, ev.sourceTarget and ev.propagatedFrom in that context - check the Leaflet reference for details.

Related Solutions

[GIS] Leaflet map on click ignore layers

When you have a layer that also listens for click then it will pick up the top most layer's event.

Check out this fiddle.

You can add the shape click handler and see that it picks that up instead of the map's.

Leaflet – Using Custom Icons for Layer Groups

I edited your code just using the red leaf from this example. The key changes I made to your code are:

declaring the icon variable(s) before you turn your geoJSON data into a leaflet layer. That way, you can refer to the icon variable during the layer's construction.
adding the "point to layer" code to the L.geoJSON layer's construction
giving the leaflet layer a variable name (myLayer) so that I can set the icon and bind the popup separately.

//I start by setting up my icon here
var MarkerIcon = L.Icon.extend({
    options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

//be sure the png files exist in your file directory and are pathed correctly
var greenIcon = new MarkerIcon({iconUrl: 'leaf-green.png'}),
    redIcon = new MarkerIcon({iconUrl: 'leaf-red.png'}),
    orangeIcon = new MarkerIcon({iconUrl: 'leaf-orange.png'});

L.icon = function (options) {
    return new L.Icon(options);
};

// I create an empty layer group
var routeca1 = L.layerGroup();

//var geojsonFeature1 = [{***random geojson data points here****}  ];
//I made up some points which work in your set-up. Though most of the attributes for the pop-up are missing
var geojsonFeature1 = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "Description": "A"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -118.24207305908203,
          34.084369762367984
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Description": "B"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -118.23057174682616,
          34.07356398381666
        ]
      }
    }
  ]
};

// L.geoJSON(geojsonFeature1); //removed this line
//and added the following instead, which sets the icon based on the variable created above and adds each marker to the layer group. Note "redIcon" must be created above this, or it is not going to work:
 myLayer = L.geoJSON(geojsonFeature1, {
    pointToLayer: function (feature, latlng){
        return L.marker(latlng, {icon: redIcon});
    }
 }).addTo(routeca1);

 //I then bind the popup to the layer here:
 myLayer.bindPopup(function (layer) {
    return '<b>'+'Location ID: '+ layer.feature.properties.locationid +'</b>' + '<br/>' + '<hr />'+ layer.feature.properties.Description + '<br/>' + layer.feature.properties.model + '<br/>' + '<hr />'+ layer.feature.properties.addresscomponents;
});

// now I create my map and other layers
var streets  = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', maxZoom: 17, minZoom: 6});

var map = L.map('map', {
        center: [34.068, -118.248],
        zoom: 10,
        layers: [streets]
    });

var baseLayers = {
        "Streets": streets
    };

var overlays = {
        "CA1": routeca1,

    };

//lastly add the layers to the map!
L.control.layers(baseLayers, overlays).addTo(map);

I hope this helps!

Best Answer

Related Solutions

[GIS] Leaflet map on click ignore layers

Leaflet – Using Custom Icons for Layer Groups

Related Question