change map to icon layer

client/src/components/Benchmarking.js

@@ -5,6 +5,7 @@ import { GeoJsonLayer } from "deck.gl";
 import { Map } from "react-map-gl";
 import data from "./testdata.json";
 import mapbox_token from "./mapbox_token.js";
+import { IconLayer } from '@deck.gl/layers';
 
 import { useNavigate } from "react-router-dom";
 
@@ -18,11 +19,12 @@ const MAP_STYLE =
 
 // Viewport settings
 const INITIAL_VIEW_STATE = {
-  longitude: -122.41669,
-  latitude: 37.7853,
-  zoom: 13,
+  longitude: -35,
+  latitude: 36.7,
+  zoom: 1.8,
+  maxZoom: 20,
   pitch: 0,
-  bearing: 0,
+  bearing: 0
 };
 
 export default function BenchMarking() {
@@ -34,26 +36,33 @@ export default function BenchMarking() {
     }
   };
 
-  const layers = [
-    new GeoJsonLayer({
-      id: "test",
-      data: data,
-      filled: true,
-      pointRadiusMinPixels: 1,
-      pointRadiusScale: 2000,
-      getPointRadius: (f) => 1,
-      getFillColor: [86, 144, 58, 250],
-      pickable: true,
-      autoHighlight: true,
-      onClick,
-    }),
-  ];
+  const ICON_MAPPING = {
+    marker: { x: 0, y: 0, width: 120, height: 120, mask: true }
+  };
+
+
+  const layers = new IconLayer({
+    id: 'icon-layer',
+    data,
+    pickable: true,
+    // iconAtlas and iconMapping are required
+    // getIcon: return a string
+    iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
+    iconMapping: ICON_MAPPING,
+    getIcon: d => 'marker',
+
+    sizeScale: 6,
+    getPosition: d => d.coordinates,
+    getSize: d => 5,
+    getColor: d => [Math.sqrt(d.exits), 140, 0]
+  });
 
   return (
     <DeckGL
       initialViewState={INITIAL_VIEW_STATE}
       controller={true}
       layers={layers}
+      getTooltip={({ object }) => object && `${object.name}\n${object.address}`}
     >
       <Map mapStyle={MAP_STYLE} mapboxAccessToken={MAPBOX_ACCESS_TOKEN} />
     </DeckGL>