Merge pull request #218 from devinit/feature/reset-map-on-double-click

edwinmp · web-flow · commit 6bbead4d13d9 · 2020-04-27T19:46:56.000+03:00
Feature | reset map on double click
diff --git a/components/MapSection/MapSection.tsx b/components/MapSection/MapSection.tsx
@@ -77,8 +77,8 @@ const MapSection: FunctionComponent<MapSectionProps> = ({ onChangeLocation, ...p
       onChangeLocation(location);
     }
   };
-  const onSelectLocationFromMap = (locationName: string): void => {
-    onSelectLocation(findBoundaryByName(boundaries, locationName.toLowerCase()));
+  const onSelectLocationFromMap = (locationName?: string): void => {
+    onSelectLocation(locationName ? findBoundaryByName(boundaries, locationName.toLowerCase()) : undefined);
   };
 
   const range = options.indicator && splitByComma(options.indicator.range);
diff --git a/components/SpotlightMap/SpotlightMap.tsx b/components/SpotlightMap/SpotlightMap.tsx
@@ -68,10 +68,7 @@ const SpotlightMap: FunctionComponent<SpotlightMapProps> = props => {
         if (!location) {
           if (locationName) {
             if (props.onClick) {
-              props.onClick(
-                options.formatter ? (options.formatter(locationName, 'boundary') as string) : locationName,
-                event
-              );
+              props.onClick(options.formatter ? (options.formatter(locationName, 'boundary') as string) : locationName);
             } else {
               flyToLocation(map, locationName, options);
             }
@@ -87,13 +84,19 @@ const SpotlightMap: FunctionComponent<SpotlightMapProps> = props => {
           showPopup(popup, map, event);
         }
       };
+      const onDoubleClick = (): void => {
+        if (props.onClick) {
+          props.onClick();
+        }
+      };
       const onResize = debounce((event: MapboxEvent) => {
         const container = event.target.getContainer();
         setZoomByContainerWidth(map, container, options);
         onResize.cancel();
       }, 300);
 
       map.on('click', COLOURED_LAYER, onClick);
+      map.on('dblclick', COLOURED_LAYER, onDoubleClick);
       map.on('resize', onResize);
 
       if (!loading && location && data) {
@@ -111,6 +114,7 @@ const SpotlightMap: FunctionComponent<SpotlightMapProps> = props => {
         map.off('mousemove', COLOURED_LAYER, onHover);
         map.off('mouseleave', COLOURED_LAYER, onBlur);
         map.off('click', COLOURED_LAYER, onClick);
+        map.off('dblclick', COLOURED_LAYER, onDoubleClick);
         map.off('resize', onResize);
         popup.remove();
         if (timeoutID) {
diff --git a/components/SpotlightMap/utils/types.ts b/components/SpotlightMap/utils/types.ts
@@ -1,6 +1,6 @@
 import { LocationIndicatorData, SpotlightLocation } from '../../../utils';
 import { FeatureCollection, Geometry, MultiPolygon } from 'geojson';
-import { Map, MapMouseEvent } from 'mapbox-gl';
+import { Map } from 'mapbox-gl';
 import { LayerConfig } from './config';
 
 export interface SpotlightMapProps {
@@ -18,7 +18,7 @@ export interface SpotlightMapProps {
   hideParentLayer?: boolean;
   locationHandling?: 'flyto' | 'highlight-only'; // highlight-only is the default
   onLoad?: (map: Map) => void;
-  onClick?: (locationName: string, event: MapMouseEvent) => void;
+  onClick?: (locationName?: string) => void;
 }
 
 export interface SpotlightMapGeoJSON {
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -19,7 +19,7 @@ class MyDocument extends Document {
         <Head>
           <meta
             httpEquiv="Content-Security-Policy"
-            content="connect-src 'self' http://212.111.41.68:8000/ https://api.mapbox.com/ https://events.mapbox.com/events/"
+            content="connect-src 'self' https://api.devinit.org/ https://api.mapbox.com/ https://events.mapbox.com/events/"
           />
           <link href="/static/css/spotlights.min.css" rel="stylesheet" />
           <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" />
diff --git a/utils/apollo.ts b/utils/apollo.ts
@@ -3,7 +3,7 @@ import fetch from 'node-fetch';
 
 const cache = new InMemoryCache();
 const link = createHttpLink({
-  uri: 'http://212.111.41.68:8000/graphql',
+  uri: 'https://api.devinit.org/graphql',
   fetch: fetch as any // window.fetch and node-fetch have conflicting typings
 });
 
