From d45ec7ebe62457224af3011920db69d8f8b86ec2 Mon Sep 17 00:00:00 2001
From: Xintong Xia <xintong@uber.com>
Date: Mon, 25 Mar 2019 16:20:16 -0700
Subject: [PATCH] fix bitmap layer auto highlight

---
 examples/website/openstreet-map/app.js        | 40 ++++++-------------
 modules/core/src/lib/picking/pick-info.js     |  2 +
 .../geo-layers/src/tile-layer/tile-layer.js   |  2 +-
 .../src/bitmap-layer/bitmap-layer-fragment.js |  4 --
 .../src/bitmap-layer/bitmap-layer-vertex.js   |  3 +-
 .../layers/src/bitmap-layer/bitmap-layer.js   |  2 +
 6 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/examples/website/openstreet-map/app.js b/examples/website/openstreet-map/app.js
index f4637485b30..91053626cda 100644
--- a/examples/website/openstreet-map/app.js
+++ b/examples/website/openstreet-map/app.js
@@ -7,15 +7,12 @@ export const INITIAL_VIEW_STATE = {
   latitude: 47.65,
   longitude: 7,
   zoom: 4.5,
-  // https://wiki.openstreetmap.org/wiki/Zoom_levels
   maxZoom: 20,
-  pitch: 50,
   bearing: 0
 };
 
 // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
-// `s` represents sub-domain of tile servers
-const s = 'c';
+const tileServer = 'https://c.tile.openstreetmap.org/';
 
 export class App extends PureComponent {
   constructor(props) {
@@ -37,23 +34,7 @@ export class App extends PureComponent {
       tile && (
         <div className="tooltip" style={{left: x, top: y}}>
           <div className="tooltip-item">
-            <div>tile:</div>
-            <div>
-              x: {tile.x}, y: {tile.y}, z: {tile.z}
-            </div>
-          </div>
-          <div className="tooltip-item">
-            <div>boundary:</div>
-            <div>
-              north: {sourceLayer.props.bounds[3].toFixed(4)}, west:{' '}
-              {sourceLayer.props.bounds[0].toFixed(4)}
-            </div>
-          </div>
-          <div className="tooltip-item">
-            <div>coordinates:</div>
-            <div>
-              x: {x.toFixed(4)}, y: {y.toFixed(4)}
-            </div>
+            tile: x: {tile.x}, y: {tile.y}, z: {tile.z}
           </div>
         </div>
       )
@@ -65,17 +46,20 @@ export class App extends PureComponent {
       new TileLayer({
         pickable: true,
         onHover: this._onHover,
+        autoHighlight: true,
+        highlightColor: [60, 60, 60, 40],
+        opacity: 1,
+        // https://wiki.openstreetmap.org/wiki/Zoom_levels
+        minZoom: 0,
+        maxZoom: 19,
+
         renderSubLayers: props => {
           const {x, y, z, bbox} = props.tile;
           const {west, south, east, north} = bbox;
 
-          return new BitmapLayer({
-            id: `bitmap-${props.id}`,
-            image: `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`,
-            bounds: [west, south, east, north],
-
-            pickable: true,
-            tile: props.tile
+          return new BitmapLayer(props, {
+            image: `${tileServer}/${z}/${x}/${y}.png`,
+            bounds: [west, south, east, north]
           });
         }
       })
diff --git a/modules/core/src/lib/picking/pick-info.js b/modules/core/src/lib/picking/pick-info.js
index 7256d35fc4a..8012b9e5286 100644
--- a/modules/core/src/lib/picking/pick-info.js
+++ b/modules/core/src/lib/picking/pick-info.js
@@ -114,6 +114,8 @@ export function processPickInfo({
     layer.setModuleParameters({
       pickingSelectedColor
     });
+
+    layer.setNeedsRedraw();
   });
 
   return infos;
diff --git a/modules/geo-layers/src/tile-layer/tile-layer.js b/modules/geo-layers/src/tile-layer/tile-layer.js
index 7be70d479fa..872fe8dc369 100644
--- a/modules/geo-layers/src/tile-layer/tile-layer.js
+++ b/modules/geo-layers/src/tile-layer/tile-layer.js
@@ -91,7 +91,7 @@ export default class TileLayer extends CompositeLayer {
         Object.assign({}, this.props, {
           id: `${this.id}-${tile.x}-${tile.y}-${tile.z}`,
           data: tile.data,
-          visible: visible && (this.state.isLoaded || tile.z === z),
+          visible: visible && (!this.state.isLoaded || tile.z === z),
           tile
         })
       );
diff --git a/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js b/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js
index 936ab5ae965..92e91dd2b22 100644
--- a/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js
+++ b/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js
@@ -33,10 +33,6 @@ vec4 apply_opacity(vec3 color, float alpha) {
 void main(void) {
   vec4 bitmapColor = texture2D(bitmapTexture, vTexCoord);
 
-  if (bitmapColor == vec4(0., 0., 0., 1.)) {
-    discard;
-  }
-
   gl_FragColor = apply_opacity(color_tint(color_desaturate(bitmapColor.rgb)), bitmapColor.a * opacity);
 
   // use highlight color if this fragment belongs to the selected object.
diff --git a/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js b/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
index 8109f4be494..1adbcb173d6 100644
--- a/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
+++ b/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
@@ -4,6 +4,7 @@ export default `
 attribute vec2 texCoords;
 attribute vec3 positions;
 attribute vec2 positions64xyLow;
+attribute vec3 instancePickingColors;
 
 varying vec2 vTexCoord;
 
@@ -12,6 +13,6 @@ void main(void) {
  
   vTexCoord = texCoords;
  
-  picking_setPickingColor(vec3(0., 0., 1.));
+  picking_setPickingColor(instancePickingColors);
 }
 `;
diff --git a/modules/layers/src/bitmap-layer/bitmap-layer.js b/modules/layers/src/bitmap-layer/bitmap-layer.js
index ec7606690f9..26f8d25c06e 100644
--- a/modules/layers/src/bitmap-layer/bitmap-layer.js
+++ b/modules/layers/src/bitmap-layer/bitmap-layer.js
@@ -81,6 +81,8 @@ export default class BitmapLayer extends Layer {
         value: new Float32Array(positions)
       }
     });
+
+    this.setState({numInstances: 1});
   }
 
   updateState({props, oldProps, changeFlags}) {