Access geometry.coordinates of sliced vector grid

Question

I am trying to represent LineString GeoJSON as vector tile layer using Leaflet.VectorGrid.

But i need to do some interactive by clicking on vector tile layer. but this vector tile layer has came with only properties, and did't came with geometry. So that i need to access coordinates to show elevation profile on chart.

var tileLayer = L.vectorGrid.slicer(geojson, {
      rendererFactory: L.canvas.tile,
      vectorTileLayerStyles: {
        sliced: {
          color: "red",
          weight: 3,
         opacity: 0
                    }
      },
      maxZoom: 22,
  indexMaxZoom: 5,       // max zoom in the initial tile index
      interactive: true,
      getFeatureId: function(feature) {
          return feature.properties["id"]
      }
    }).addTo(map);

Answer 1

You can use layer event handler to process mouse click event, see sliced GeoJSON example http://leaflet.github.io/Leaflet.VectorGrid/demo-geojson.html (example does not work in IE11).

Example below catches mouse click event for L.vectorGrid.slicer layer, changes feature line color from black to red and displays popup with feature id at click position.

EDIT: Since GeoJSON vector layer is sliced, GeoJSON geometry is not part of vector layer. To access it in click event, we have to search for it in original GeoJSON object.

function getGeometry(geoJSON, idProperty) {
  var retVal = null;
  for (var i = 0; i < geoJSON.features.length; i++) {
    if (geoJSON.features[i].properties.id == idProperty) {
      retVal = geoJSON.features[i].geometry;
      break;
    }
  };
  return retVal ; 
};

var tileLayer = L.vectorGrid.slicer(geojson, {
  rendererFactory: L.canvas.tile,
  vectorTileLayerStyles: {
    sliced: {
      stroke: true,
      color: 'black',
      weight: 2,
      opacity: 1
    }
  },
  maxZoom: 22,
  indexMaxZoom: 5,
  interactive: true,
  getFeatureId: function(feature) {
      return feature.properties['id']
  }
})
.on('click', function(e) {
  var properties = e.layer.properties;
  var geometry = getGeometry(geojson, properties.id);
  L.popup()
    .setContent(properties['id'])
    .setLatLng(e.latlng)
    .openOn(map);
  var style = {
    stroke: true,
    color: 'red',
    weight: 2,
    opacity: 1
  };
  vectorGrid.setFeatureStyle(properties['id'], style);
})
.addTo(map);