[Examples] update replace-component example (#1557)

Signed-off-by: Shan He <heshan0131@gmail.com>
keplergl · Aug 1, 2021 · 62d03ab · 62d03ab
1 parent 089bb7a
commit 62d03ab
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/examples/replace-component/src/app.js b/examples/replace-component/src/app.js
@@ -34,15 +34,15 @@ import {
   PanelHeaderFactory,
   PanelToggleFactory,
   CustomPanelsFactory,
-  LayerHoverInfoFactory,
+  MapPopoverFactory,
   injectComponents
 } from 'kepler.gl/components';
 
 import CustomPanelHeaderFactory from './components/panel-header';
 import CustomSidebarFactory from './components/side-bar';
 import CustomPanelToggleFactory from './components/panel-toggle';
 import CustomSidePanelFactory from './components/custom-panel';
-import CustomLayerHoverInfoFactory from './components/custom-layer-hover';
+import CustomMapPopoverFactory from './components/custom-map-popover';
 
 const StyledMapConfigDisplay = styled.div`
   position: absolute;
@@ -64,7 +64,7 @@ const KeplerGl = injectComponents([
   [PanelHeaderFactory, CustomPanelHeaderFactory],
   [PanelToggleFactory, CustomPanelToggleFactory],
   [CustomPanelsFactory, CustomSidePanelFactory],
-  [LayerHoverInfoFactory, CustomLayerHoverInfoFactory]
+  [MapPopoverFactory, CustomMapPopoverFactory]
 ]);
 
 class App extends Component {

diff --git a/...nent/src/components/custom-layer-hover.js → ...nent/src/components/custom-map-popover.js b/...nent/src/components/custom-layer-hover.js → ...nent/src/components/custom-map-popover.js
@@ -19,20 +19,20 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import {LayerHoverInfoFactory} from 'kepler.gl/components';
+import {MapPopoverFactory} from 'kepler.gl/components';
 
-const CustomLayerHoverInfoFactory = (...deps) => {
-  const LayerHoverInfo = LayerHoverInfoFactory(...deps);
-  const LayerHoverInfoWrapper = props => {
+const CustomMapPopoverFactory = (...deps) => {
+  const MapPopover = MapPopoverFactory(...deps);
+  const MapPopoverWrapper = props => {
     // Disable tooltip for point layer
-    if (props.layer?.id === 'point_layer') {
+    if (props.layerHoverProp?.layer?.id === 'point_layer') {
       return null;
     }
 
-    return <LayerHoverInfo {...props} />;
+    return <MapPopover {...props} />;
   };
 
-  return LayerHoverInfoWrapper;
+  return MapPopoverWrapper;
 };
-CustomLayerHoverInfoFactory.deps = LayerHoverInfoFactory.deps;
-export default CustomLayerHoverInfoFactory;
+CustomMapPopoverFactory.deps = MapPopoverFactory.deps;
+export default CustomMapPopoverFactory;
diff --git a/examples/replace-component/src/data/sample-data.js b/examples/replace-component/src/data/sample-data.js
@@ -31,7 +31,8 @@ export const config = {
             label: 'Trees',
             color: [69, 138, 70],
             columns: {lat: 'Location_latitude', lng: 'Location_longitude', altitude: null},
-            isVisible: true
+            isVisible: true,
+            highlightColor: [255, 0, 0, 255]
           },
           visualChannels: {
             sizeField: {name: 'Plan', type: 'integer'}