1

I am using the Leaflet Vector Grid Plugin to load a geojson innto my Leaflet project. But I can't figure out how to implement a popup and style the data by attributes.

I load up the data with following command:

 L.vectorGrid.slicer(data).addTo(map);

How can I implement my functions for the style:

 function Kategorie(feature, latlng) {
        switch(feature.properties["categorie"]) {
            case "1":
                var Icon1 = new L.icon({
                    iconUrl: 'icons/1.png',
                    iconSize:     [15, 15], 
                    iconAnchor:   [5, 5], 
                    popupAnchor:  [10, 10] o
                });
                return L.marker(latlng, {icon: Icon1});

and the function of the pop up:

  function popupcontent(feature, layer) {

                var popUp = "<h2>"+feature.properties.Name+"</h2>"  ;

                layer.bindPopup(popUp);}

I already studied the documentation of the plugin but I just don't get it.

1 Answer 1

1

You need to define a style function, as you did named Kategorie, for vectorTileLayerStyles option, use the getFeatureId function to get the id of each feature, and set interactive : true. The code below will guide you through the steps. Good luck.

var Kategorie = function (properties, zoom) {
... // as you have done above
}

var style = {
          rendererFactory: L.svg.tile, // L.canvas.tile
          vectorTileLayerStyles: {
            sliced: Kategorie
          },
          interactive: true,
          getFeatureId: function (f) {
          return f.properties['EventID'] // look for a unique ID in your data
          }
        }

Then get a control name for the vectorlayer rather than only adding it.

vectorgrid = L.vectorGrid.slicer(data, style) // data is parsed GeoJSON

Then add an on click function:

      vectorgrid.on('click', function (e) {
      var properties = e.layer.properties
      var popUpText = Object.entries(properties)
        .map(function ([key, val]) {
          return `${key}: ${val}`
        })
        .join('<br>')
      L.popup()
        .setContent(popUpText)
        .setLatLng(e.latlng)
        .openOn(map)
    })
    vectorgrid.addTo(map)
  })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.