2

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);
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);
  • I know, and i have done this already, but i need to access geometry.coordinates of sliced GeoJSON. – Eslam Farag Jun 12 at 19:17
  • @EslamFarag I updated my answer with getGeometry function. – TomazicM Jun 13 at 19:47
  • Thanks a lot. It works. – Eslam Farag Jun 15 at 21:25

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.