From 3777442332d6b19ecd8279138fab032cde453241 Mon Sep 17 00:00:00 2001
From: Annabelle Thomas Taylor <ataylor@mapc.org>
Date: Fri, 12 Mar 2021 09:15:32 -0500
Subject: [PATCH] Create map tooltip component

---
 src/components/maps/Map.tsx     | 15 +++++++++++++--
 src/components/maps/Tooltip.tsx | 25 +++++++++++++++++++++++++
 src/stories/Map.stories.tsx     | 21 ++++++++++++++++++++-
 3 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 src/components/maps/Tooltip.tsx

diff --git a/src/components/maps/Map.tsx b/src/components/maps/Map.tsx
index f8f832f..005edd0 100644
--- a/src/components/maps/Map.tsx
+++ b/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,8 +40,13 @@ export const Map: React.FC<MapProps> = ({
         style,
         accessToken,
         zoom,
-        center
+        center,
+        maxZoom,
+        minZoom,
       });
+      if (onClick) {
+        mapObj.on('click', onClick);
+      }
       setMap(mapObj);
     }
     return () => {
@@ -43,7 +54,7 @@ export const Map: React.FC<MapProps> = ({
         map?.remove();
       }
     }
-  }, [accessToken, center, style, container, zoom, mapRef, map])
+  }, [accessToken, center, style, container, zoom, mapRef, map, minZoom, maxZoom, onClick])
 
   return (
     <MapContext.Provider value={map}>
diff --git a/src/components/maps/Tooltip.tsx b/src/components/maps/Tooltip.tsx
new file mode 100644
index 0000000..69b6854
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/stories/Map.stories.tsx b/src/stories/Map.stories.tsx
index a892c35..bf07b1f 100644
--- a/src/stories/Map.stories.tsx
+++ b/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);
+  }
+};