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 | String)
+
+* Default: `null`
+
+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: null
+};
+
 export default class MVTLayer extends TileLayer {
   getTileData(tile) {
     const url = getURLFromTemplate(this.props.data, tile);
@@ -30,12 +35,71 @@ 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 =
+      isFeatureIdDefined(hoveredFeatureId) || isFeatureIdDefined(highlightedFeatureId);
+
+    if (!isFeatureIdPresent || !Array.isArray(data)) {
+      return -1;
+    }
+
+    const featureIdToHighlight = isFeatureIdDefined(highlightedFeatureId)
+      ? highlightedFeatureId
+      : hoveredFeatureId;
+
+    return data.findIndex(
+      feature => getFeatureUniqueId(feature, uniqueIdProperty) === featureIdToHighlight
+    );
+  }
+}
+
+function getFeatureUniqueId(feature, uniqueIdProperty) {
+  if (uniqueIdProperty) {
+    return feature.properties[uniqueIdProperty];
+  }
+
+  if ('id' in feature) {
+    return feature.id;
+  }
+
+  return -1;
+}
+
+function isFeatureIdDefined(value) {
+  return value !== undefined && value !== null && value !== '';
 }
 
 MVTLayer.layerName = 'MVTLayer';
+MVTLayer.defaultProps = defaultProps;

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

@@ -141,6 +141,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;
@@ -154,6 +158,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(
@@ -162,12 +167,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;
     });

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

@@ -37,7 +37,9 @@ export function getURLFromTemplate(template, properties) {
     const index = Math.abs(properties.x + properties.y) % template.length;
     template = template[index];
   }
-  return template.replace(/\{ *([\w_-]+) *\}/g, (_, property) => properties[property]);
+  return template.replace
+    ? template.replace(/\{ *([\w_-]+) *\}/g, (_, property) => properties[property])
+    : null;
 }
 
 /**

scripts/bundle.config.js

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

test/modules/geo-layers/mvt-layer.spec.js

@@ -6,12 +6,33 @@ import {GeoJsonLayer} from '@deck.gl/layers';
 
 import * as FIXTURES from 'deck.gl-test/data';
 
+const geoJSONData = [
+  {
+    id: 1,
+    type: 'Feature',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [0.80908203125, 0.8935546875],
+          [0.8095703125, 0.89404296875],
+          [0.80908203125, 0.89404296875],
+          [0.80908203125, 0.8935546875]
+        ]
+      ]
+    },
+    properties: {
+      cartodb_id: 148
+    }
+  }
+];
+
 test('MVTLayer', t => {
   const testCases = generateLayerTests({
     Layer: MVTLayer,
     assert: t.ok,
     sampleProps: {
-      data: 'https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png'
+      data: ['https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png']
     },
     onBeforeUpdate: ({testCase}) => t.comment(testCase.title)
   });
@@ -50,3 +71,35 @@ test('ClipExtension', t => {
 
   t.end();
 });
+
+test.skip('MVT Highlight', t => {
+  class TestMVTLayer extends MVTLayer {
+    getTileData() {
+      return geoJSONData;
+    }
+  }
+
+  const testCases = [
+    {
+      props: {
+        data: ['https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png'],
+        id: 'mvt-highlight-test',
+        filled: true,
+        pickable: true,
+        autoHighlight: true,
+        highlightedFeatureId: 1
+      },
+      onAfterUpdate: ({subLayers}) => {
+        for (const layer of subLayers) {
+          t.ok(layer.props.pickable, 'MVT Sublayer is pickable');
+          t.ok(layer.props.autoHighlight, 'AutoHighlight should be disabled');
+          t.equal(layer.props.highlightedObjectIndex, 0, 'Feature highlighted has index 0');
+        }
+      }
+    }
+  ];
+
+  testLayer({Layer: TestMVTLayer, testCases, onError: t.notOk});
+
+  t.end();
+});

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'
   }
 ];