Create map tooltip component

src/components/maps/Map.tsx

@@ -13,6 +13,9 @@ export interface MapProps {
   height?: string,
   center?: [number, number],
   zoom?: number,
+  minZoom?: number,
+  maxZoom?: number,
+  onClick?: (e: (mapboxgl.MapMouseEvent & mapboxgl.EventData)) => void,
 }
 
 export const Map: React.FC<MapProps> = ({
@@ -23,6 +26,9 @@ export const Map: React.FC<MapProps> = ({
   height="500px",
   center=[-70.944, 42.37],
   zoom=8.4,
+  minZoom=8,
+  maxZoom=16,
+  onClick,
   children
 }) => {
   const mapRef = useRef(null);
@@ -34,16 +40,21 @@ export const Map: React.FC<MapProps> = ({
         style,
         accessToken,
         zoom,
-        center
+        center,
+        maxZoom,
+        minZoom,
       });
+      if (onClick) {
+        mapObj.on('click', onClick);
+      }
       setMap(mapObj);
     }
     return () => {
       if (map) {
         map?.remove();
       }
     }
-  }, [accessToken, center, style, container, zoom, mapRef, map])
+  }, [accessToken, center, style, container, zoom, mapRef, map, minZoom, maxZoom, onClick])
 
   return (
     <MapContext.Provider value={map}>

src/components/maps/Tooltip.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement, useContext, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import mapboxgl from 'mapbox-gl';
+import { MapContext } from './Map';
+
+interface TooltipProps {
+  children: ReactElement
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ 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)
+    })
+
+  }, [map, children, div])
+
+  return ReactDOM.createPortal(children, div);
+}

src/stories/Map.stories.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
+import mapboxgl from 'mapbox-gl';
 import { Story, Meta } from '@storybook/react';
 import { Map, MapProps } from '../components/maps/Map';
 import { NavigationControl } from '../components/maps/NavigationControl';
 import { MunicipalitiesMAPC } from '../components/maps/MunicipalitiesMAPC';
+import { Layer } from '../components/maps/Layer';
+import { Source } from '../components/maps/Source';
+import { Tooltip } from '../components/maps/Tooltip';
 import { MapLegend } from '../components/maps/MapLegend';
 import { data } from '../assets/WasteWaterData';
 
@@ -38,6 +42,15 @@ const MAPCTemplate: Story<MapProps> = (args) => (
         return colorScale[2]
       }}
     />
+    <Source sourceId="Sewer lines" url="ihill.5wqorrqo">
+      <Layer layerId="Sewer line layer" type="line" sourceLayer="MAPCSewerLines2013-9tfyjn" />
+    </Source>
+    <Tooltip>
+      <React.Fragment>
+        <p>Hello world</p>
+        <p>Insert more stuff</p>
+      </React.Fragment>
+    </Tooltip>
     <MapLegend
       colorScale={sewerColors}
       title="Sewer Systems"
@@ -53,4 +66,10 @@ export const MapWithNavigation = NavTemplate.bind({});
 MapWithNavigation.args = {container: 'map', accessToken: 'pk.eyJ1IjoiaWhpbGwiLCJhIjoiY2plZzUwMTRzMW45NjJxb2R2Z2thOWF1YiJ9.szIAeMS4c9YTgNsJeG36gg'};
 
 export const MAPCLayer = MAPCTemplate.bind({});
-MAPCLayer.args = {container: 'map', accessToken: 'pk.eyJ1IjoiaWhpbGwiLCJhIjoiY2plZzUwMTRzMW45NjJxb2R2Z2thOWF1YiJ9.szIAeMS4c9YTgNsJeG36gg'};
+MAPCLayer.args = {
+  container: 'map',
+  accessToken: 'pk.eyJ1IjoiaWhpbGwiLCJhIjoiY2plZzUwMTRzMW45NjJxb2R2Z2thOWF1YiJ9.szIAeMS4c9YTgNsJeG36gg',
+  onClick: (e: mapboxgl.MapMouseEvent & mapboxgl.EventData) => {
+    console.log(e);
+  }
+};