Highlight features spread across tiles

docs/layers/mvt-layer.md

@@ -81,12 +81,25 @@ Inherits all properties from [`TileLayer`](/docs/layers/tile-layer.md) and [base
 If using the default `renderSubLayers`, supports all [`GeoJSONLayer`](/docs/layers/geojson-layer.md) properties to style features.
 
 
-##### `data` (String|Array)
+##### `data` (String | Array)
 
 Required. Either a URL template or an array of URL templates from which the MVT data should be loaded. See `TileLayer`'s `data` prop documentation for the templating syntax.
 
 The `getTileData` prop from the `TileLayer` class will not be called.
 
+##### `uniqueIdProperty` (String)
+
+Optional. Needed for highlighting a feature split across two or more tiles if no [feature id](https://github.com/mapbox/vector-tile-spec/tree/master/2.1#42-features) is provided.
+
+An string pointing to a tile attribute containing a unique identifier for features across tiles.
+
+##### `highlightedFeatureId` (Number)
+
+* Default: `-1`
+
+Optional. When provided, a feature with ID corresponding to the supplied value will be highlighted with `highlightColor`.
+
+If `uniqueIdProperty` is provided, value within that feature property will be used for ID comparison. If not, [feature id](https://github.com/mapbox/vector-tile-spec/tree/master/2.1#42-features) will be used.
 
 ## Source
 

modules/geo-layers/src/mvt-layer/mvt-layer.js

@@ -9,6 +9,11 @@ import ClipExtension from './clip-extension';
 
 const WORLD_SIZE = 512;
 
+const defaultProps = {
+  uniqueIdProperty: {type: 'string', value: ''},
+  highlightedFeatureId: {type: 'number', value: -1}
+};
+
 export default class MVTLayer extends TileLayer {
   getTileData(tile) {
     const url = getURLFromTemplate(this.props.data, tile);
@@ -30,12 +35,64 @@ export default class MVTLayer extends TileLayer {
 
     const modelMatrix = new Matrix4().translate([xOffset, yOffset, 0]).scale([xScale, yScale, 1]);
 
+    props.autoHighlight = false;
     props.modelMatrix = modelMatrix;
     props.coordinateSystem = COORDINATE_SYSTEM.CARTESIAN;
     props.extensions = [...(props.extensions || []), new ClipExtension()];
 
     return super.renderSubLayers(props);
   }
+
+  onHover(info, pickingEvent) {
+    const {uniqueIdProperty, autoHighlight} = this.props;
+
+    if (autoHighlight) {
+      const {hoveredFeatureId} = this.state;
+      const hoveredFeature = info.object;
+      let newHoveredFeatureId;
+
+      if (hoveredFeature) {
+        newHoveredFeatureId = getFeatureUniqueId(hoveredFeature, uniqueIdProperty);
+      }
+
+      if (hoveredFeatureId !== newHoveredFeatureId) {
+        this.setState({hoveredFeatureId: newHoveredFeatureId});
+      }
+    }
+
+    return super.onHover(info, pickingEvent);
+  }
+
+  getHighlightedObjectIndex(tile) {
+    const {hoveredFeatureId} = this.state;
+    const {uniqueIdProperty, highlightedFeatureId} = this.props;
+    const {data} = tile;
+
+    const isFeatureIdPresent = hoveredFeatureId >= 0 || highlightedFeatureId >= 0;
+    if (!isFeatureIdPresent || !Array.isArray(data)) {
+      return -1;
+    }
+
+    const featureIdToHighlight =
+      highlightedFeatureId >= 0 ? highlightedFeatureId : hoveredFeatureId;
+
+    return data.findIndex(
+      feature => getFeatureUniqueId(feature, uniqueIdProperty) === featureIdToHighlight
+    );
+  }
+}
+
+function getFeatureUniqueId(feature, uniqueIdProperty) {
+  if (uniqueIdProperty) {
+    return feature.properties[uniqueIdProperty];
+  }
+
+  if (feature.id) {
+    return feature.id;
+  }
+
+  return -1;
 }
 
 MVTLayer.layerName = 'MVTLayer';
+MVTLayer.defaultProps = defaultProps;

modules/geo-layers/src/tile-layer/tile-layer.js

@@ -138,6 +138,10 @@ export default class TileLayer extends CompositeLayer {
     return this.props.renderSubLayers(props);
   }
 
+  getHighlightedObjectIndex() {
+    return -1;
+  }
+
   getPickingInfo({info, sourceLayer}) {
     info.sourceLayer = sourceLayer;
     info.tile = sourceLayer.props.tile;
@@ -151,6 +155,7 @@ export default class TileLayer extends CompositeLayer {
       // - parent layer must be visible
       // - tile must be visible in the current viewport
       const isVisible = visible && tile.isVisible;
+      const highlightedObjectIndex = this.getHighlightedObjectIndex(tile);
       // cache the rendered layer in the tile
       if (!tile.layers) {
         const layers = this.renderSubLayers(
@@ -159,12 +164,19 @@ export default class TileLayer extends CompositeLayer {
             data: tile.data,
             visible: isVisible,
             _offset: 0,
-            tile
+            tile,
+            highlightedObjectIndex
           })
         );
         tile.layers = flatten(layers, Boolean);
-      } else if (tile.layers[0] && tile.layers[0].props.visible !== isVisible) {
-        tile.layers = tile.layers.map(layer => layer.clone({visible: isVisible}));
+      } else if (
+        tile.layers[0] &&
+        (tile.layers[0].props.visible !== isVisible ||
+          tile.layers[0].props.highlightedObjectIndex !== highlightedObjectIndex)
+      ) {
+        tile.layers = tile.layers.map(layer =>
+          layer.clone({visible: isVisible, highlightedObjectIndex})
+        );
       }
       return tile.layers;
     });

scripts/bundle.config.js

@@ -37,7 +37,7 @@ function getExternals(packageInfo) {
 }
 
 const config = {
-  mode: 'production',
+  mode: 'development',
 
   entry: {
     main: resolve('./bundle')

test/render/test-cases/mvt-layer.js

@@ -32,5 +32,39 @@ export default [
       })
     ],
     goldenImage: './test/render/golden-images/mvt-layer.png'
+  },
+  {
+    name: 'mvt-layer-highlight',
+    viewState: {
+      longitude: -74.006,
+      latitude: 40.7128,
+      zoom: 13,
+      pitch: 0,
+      bearing: 0
+    },
+    layers: [
+      new MVTLayer({
+        id: 'mvt-layer',
+        data: ['./test/data/mvt-tiles/{z}/{x}/{y}.mvt'],
+        getFillColor: [0, 0, 0, 128],
+        getLineColor: [255, 0, 0, 128],
+        highlightedFeatureId: 1862,
+        uniqueIdProperty: 'cartodb_id',
+        onTileError: error => {
+          if (error.message.includes('404')) {
+            // trying to load tiles in the previous viewport, ignore
+          } else {
+            throw error;
+          }
+        },
+        lineWidthMinPixels: 1,
+        loadOptions: {
+          mvt: {
+            workerUrl: null
+          }
+        }
+      })
+    ],
+    goldenImage: './test/render/golden-images/mvt-layer-highlight.png'
   }
 ];