1

I'm using a map display in Leaflet and polylines using Leaflet.VectorGrid.

By clicking on a line I want to export the coordinates of this line.

var layerGroup12 = L.vectorGrid.slicer( pistes,{
  rendererFactory: L.svg.tile,
  vectorTileLayerStyles: {
    sliced: 
    
    function(properties, zoom){
             var level = map.getZoom();
            
            if (level >= 10) {
            return {
                weight: 3,
                color: "#22e608",
                stroke: true,
                opacity: 1
}
            } else
            {
            return {
                         weight: 1,
                         color: "#22e608",
                         opacity: 1,
                         stroke: true,              
            }
            }   
    }
                      
},
  maxZoom: 20,
  indexMaxZoom: 5,
  interactive: true,
  pane: "pane500",
  getFeatureId: function(f) {
            return f.properties.name;
} 
})
.on('click', function(e) {
            var properties = e.layer.properties;
            L.popup()
                .setContent(properties.name || properties.type)
                .setLatLng(e.latlng)
                .openOn(map);
            clearHighlight();
        highlight = properties.name;

    
        
        var style = {
                stroke: true,
                color: 'magenta',
                opacity: 1,
                weight: 4,
            };

// Lines added to try to get the coordinates

var coords = e.layer.getLatLngs();

console.log(coords);

layerGroup12.setFeatureStyle(properties.name, style);

})

On click, "console.log" return "undefined"

What is the correct syntax for extracting these coordinates?

1 Answer 1

1

Vector grid layer knows nothing about individual feature coordinates of features from which it was constructed (sliced), so .getLatLngs() is not implemented.

Since you are constructing vector grid layer on the fly from GeoJSON, solution is to get coordinates from original GeoJSON pistes one the basis of f.properties.name property used for getFeatureId option.

Relevant part of the code could then look something like this:

.on('click', function(e) {
  var properties = e.layer.properties;
  L.popup()
    .setContent(properties.name || properties.type)
    .setLatLng(e.latlng)
    .openOn(map);
    clearHighlight();
  highlight = properties.name;

  var style = {
    stroke: true,
    color: 'magenta',
    opacity: 1,
    weight: 4,
  };
  layerGroup12.setFeatureStyle(properties.name, style);

  var feature = pistes.features.find(function(feature) {
    return(feature.properties.name == properties.name);
  });
  var coords = feature.geometry.coordinates;
  console.log(coords);
}

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.