autoHighlight in MVTLayer?

[arthurgailes]

Hello,

Modifying this example doesn't produce a highlight effect. Is there another way to achieve this for points?

const {DeckGL, MVTLayer} = deck;

const layer = new MVTLayer({
  id: 'MVTLayer',
  data: [
    'https://tiles-a.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt'
  ],
  stroked: false,
  getLineColor: [192, 192, 192],
  getFillColor: f => {
    switch (f.properties.layerName) {
      case 'poi':
        return [255, 0, 0];
      case 'water':
        return [120, 150, 180];
      case 'building':
        return [218, 218, 218];
      default:
        return [240, 240, 240];
    }
  },
  getPointRadius: 20,
  pointRadiusUnits: 'pixels',
  getLineWidth: f => {
    switch (f.properties.class) {
      case 'street':
        return 6;
      case 'motorway':
        return 10;
      default:
        return 1;
    }
  },
  lineWidthMinPixels: 1,
  
  maxZoom: 14,
  minZoom: 0,
  pickable: true,
  // picking: true, 
  autoHighlight: true,
  highlightColor: [0,0,0,255],
});

new DeckGL({
  
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 12,
    maxZoom: 20,
    pitch: 30,
    bearing: 0
  },
  controller: true,
  
  layers: [layer]
});
  

Thank you.
[edited per Pessimistress comment]

[Pessimistress]

You need to set pickable: true on the layer for it to be interactive. See https://deck.gl/docs/developer-guide/interactivity#enabling-picking

[Pessimistress]

You should inspect the GeoJSON generated from geodataframe. The default behavior expects a feature.id field. If your id is instead populated into feature.properties.id then you need to manually specify uniqueIdProperty: 'id' for the MVTLayer.

[diehl]

Thanks @Pessimistress - the id field is indeed populated in the properties. I tried adding unique_id_property = 'id' to the Layer definition in the PyDeck code but it's still not working. I'll dig deeper and see if I can get this to work one way or another. Appreciate the quick response!

[chriszrc]

For me, it was that I had the uniqueIdProperty property set to something, when in fact I had actual feature ids in the vector tile and didn't need it at all-

[itisMilan]

Thanks @Pessimistress - the id field is indeed populated in the properties. I tried adding unique_id_property = 'id' to the Layer definition in the PyDeck code but it's still not working. I'll dig deeper and see if I can get this to work one way or another. Appreciate the quick response!

I have also setup the same way, but it's not working. Did you find any solution for this?

[diehl]

I did @itisMilan - here's what I dug up from my notes, addressing the issue in Python. Hope this helps.

Leveraging Auto Highlight in an MVTLayer
Data Formatting Prerequisites
3/23/23 - The vector tiles must be derived from GeoJSON where a feature ID is present at the feature.id level as opposed to feature.properties.id. Reference When saving a GeoPandas geodataframe to disk as GeoJSON with .to_file, feature IDs will not be included and there is no option available to create feature.id fields. Exporting the GeoJSON in the following manner will create the feature IDs needed.

with open('<GEOJSON FILENAME>', 'w') as f:
	f.write(gdf.to_json())

Additionally, Tippecanoe by default expects feature IDs that are numbers, not strings. The above operation will create feature IDs that are numbers represented by strings. Tippecanoe requires the addition of the -aI argument to convert the feature IDs from string representations of numbers to numbers when constructing the vector tiles. Auto highlight will work properly with the resulting vector tile representation of the data. Reference

Defining an MVTLayer with Auto Highlighting
Example specification

layer = pdk.Layer(
    "MVTLayer",
    'https://api.mapbox.com/v4/diehl.3fldl79z/{z}/{x}/{y}.mvt?access_token='+ACCESS_TOKEN,
    get_line_color = [0, 255, 0],
    get_fill_color = [0, 0, 0, 0], # Transparent fill
    line_width_min_pixels = 1,
    pickable = True,
    auto_highlight = True,  # Auto highlight requires pickable=True
    highlight_color = [0, 255, 0]
)

3/23/23 - Note that it is only possible to define a fill color state change with auto highlighting. I would have loved to specify a line color change for a highlight but alas that is not currently possible.