Get features from onClick event and pass to Map onClick prop

MAPC · Mar 12, 2021 · 90b761e · 90b761e
1 parent 3777442
commit 90b761e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/src/components/maps/Map.tsx b/src/components/maps/Map.tsx
@@ -15,7 +15,7 @@ export interface MapProps {
   zoom?: number,
   minZoom?: number,
   maxZoom?: number,
-  onClick?: (e: (mapboxgl.MapMouseEvent & mapboxgl.EventData)) => void,
+  onClick?: (e: (mapboxgl.MapMouseEvent & { features?: mapboxgl.MapboxGeoJSONFeature[] | undefined; } & mapboxgl.EventData)) => void,
 }
 
 export const Map: React.FC<MapProps> = ({
@@ -45,7 +45,10 @@ export const Map: React.FC<MapProps> = ({
         minZoom,
       });
       if (onClick) {
-        mapObj.on('click', onClick);
+        mapObj.on('click', (e) => {
+          e.features = mapObj.queryRenderedFeatures([e.point.x, e.point.y])
+          return onClick(e);
+        });
       }
       setMap(mapObj);
     }

diff --git a/src/components/maps/Tooltip.tsx b/src/components/maps/Tooltip.tsx
@@ -4,22 +4,32 @@ import mapboxgl from 'mapbox-gl';
 import { MapContext } from './Map';
 
 interface TooltipProps {
-  children: ReactElement
+  onLayer?: string|undefined,
+  children: ReactElement,
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({ children }) => {
+export const Tooltip: React.FC<TooltipProps> = ({ onLayer, children }) => {
   const map = useContext(MapContext);
   const div = document.createElement('div');
 
   useEffect(() => {
-    map?.on('click', (e) => {
-      new mapboxgl.Popup()
-        .setLngLat(e.lngLat)
-        .setDOMContent(div)
-        .addTo(map)
-    })
+    if (onLayer) {
+      map?.on('click', onLayer, (e) => {
+        new mapboxgl.Popup()
+          .setLngLat(e.lngLat)
+          .setDOMContent(div)
+          .addTo(map)
+      })
+    } else {
+      map?.on('click', (e) => {
+        new mapboxgl.Popup()
+          .setLngLat(e.lngLat)
+          .setDOMContent(div)
+          .addTo(map)
+      })
+    }
 
-  }, [map, children, div])
+  }, [map, children, div, onLayer])
 
   return ReactDOM.createPortal(children, div);
 }
diff --git a/src/stories/Map.stories.tsx b/src/stories/Map.stories.tsx
@@ -45,10 +45,10 @@ const MAPCTemplate: Story<MapProps> = (args) => (
     <Source sourceId="Sewer lines" url="ihill.5wqorrqo">
       <Layer layerId="Sewer line layer" type="line" sourceLayer="MAPCSewerLines2013-9tfyjn" />
     </Source>
-    <Tooltip>
+    <Tooltip onLayer="MAPC Munis">
       <React.Fragment>
         <p>Hello world</p>
-        <p>Insert more stuff</p>
+        <p>Insert second line</p>
       </React.Fragment>
     </Tooltip>
     <MapLegend
@@ -69,7 +69,10 @@ export const MAPCLayer = MAPCTemplate.bind({});
 MAPCLayer.args = {
   container: 'map',
   accessToken: 'pk.eyJ1IjoiaWhpbGwiLCJhIjoiY2plZzUwMTRzMW45NjJxb2R2Z2thOWF1YiJ9.szIAeMS4c9YTgNsJeG36gg',
-  onClick: (e: mapboxgl.MapMouseEvent & mapboxgl.EventData) => {
+  onClick: (e: mapboxgl.MapMouseEvent & {
+    features?: mapboxgl.MapboxGeoJSONFeature[] | undefined;
+} & mapboxgl.EventData) => {
     console.log(e);
+    console.log(e.features)
   }
 };