Merge pull request #1284 from onaio/mapFixes

Map fixes
onaio · Sep 16, 2020 · f1a3121 · f1a3121
2 parents f76b4b5 + b36f0a0
commit f1a3121
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 23 deletions.
diff --git a/src/components/GisidaLite/index.tsx b/src/components/GisidaLite/index.tsx
@@ -3,7 +3,8 @@ import { EventData, Style } from 'mapbox-gl';
 import { Map } from 'mapbox-gl';
 import React, { Fragment, useEffect } from 'react';
 import ReactMapboxGl, { ZoomControl } from 'react-mapbox-gl';
-import { FitBounds } from 'react-mapbox-gl/lib/map';
+import { FitBounds, Props } from 'react-mapbox-gl/lib/map';
+import { Events } from 'react-mapbox-gl/lib/map-events';
 import Loading from '../../components/page/Loading';
 import { GISIDA_MAPBOX_TOKEN } from '../../configs/env';
 import { imgArr } from '../../configs/settings';
@@ -24,10 +25,11 @@ export interface GisidaLiteProps {
   mapStyle: Style | string;
   mapWidth: string;
   scrollZoom: boolean;
-  zoom: number;
+  zoom?: number;
   mapIcons: MapIcon[];
   onClickHandler?: (map: Map, event: EventData) => void;
   onMouseMoveHandler?: (map: Map, event: EventData) => void;
+  onLoad?: (map: Map) => void;
 }
 
 /** Default props for GisidaLite */
@@ -39,7 +41,6 @@ const gisidaLiteDefaultProps: GisidaLiteProps = {
   mapStyle: gsLiteStyle,
   mapWidth: '100%',
   scrollZoom: true,
-  zoom: 17,
 };
 
 const Mapbox = ReactMapboxGl({
@@ -75,6 +76,7 @@ const GisidaLite = (props: GisidaLiteProps) => {
 
   const runAfterMapLoaded = React.useCallback(
     (map: Map) => {
+      props.onLoad?.(map);
       if (mapIcons) {
         mapIcons.forEach(element => {
           map.loadImage(
@@ -125,21 +127,26 @@ const GisidaLite = (props: GisidaLiteProps) => {
     }
   };
 
+  let mapBoxProps: Props & Events = {
+    center: mapCenter,
+    containerStyle: {
+      height: mapHeight,
+      width: mapWidth,
+    },
+    fitBounds: mapBounds,
+    onClick: onClickHandler,
+    onMouseMove: onMouseMoveHandler,
+    onRender,
+    onStyleLoad: runAfterMapLoaded,
+    style: mapStyle,
+  };
+
+  if (zoom) {
+    mapBoxProps = { ...mapBoxProps, zoom: [zoom] };
+  }
+
   return (
-    <Mapbox
-      center={mapCenter}
-      zoom={[zoom]}
-      style={mapStyle}
-      containerStyle={{
-        height: mapHeight,
-        width: mapWidth,
-      }}
-      fitBounds={mapBounds}
-      onStyleLoad={runAfterMapLoaded}
-      onClick={onClickHandler}
-      onRender={onRender}
-      onMouseMove={onMouseMoveHandler}
-    >
+    <Mapbox {...mapBoxProps}>
       <>
         {renderLayers &&
           layers.map((item: any) => <Fragment key={`gsLite-${item.key}`}>{item}</Fragment>)}

diff --git a/src/containers/pages/FocusInvestigation/map/active/helpers/utils.tsx b/src/containers/pages/FocusInvestigation/map/active/helpers/utils.tsx
@@ -48,6 +48,7 @@ import {
 } from '../../../../../../store/ducks/structures';
 import { fetchTasks, FetchTasksAction, TaskGeoJSON } from '../../../../../../store/ducks/tasks';
 
+import { BoundingBox, viewport } from '@mapbox/geo-viewport';
 import GeojsonExtent from '@mapbox/geojson-extent';
 import { Dictionary } from '@onaio/utils';
 import {
@@ -318,7 +319,8 @@ export const buildGsLiteSymbolLayers = (
     symbolLayout: {
       ...symbolLayerTemplate.symbolLayout,
       ...{ [REACT_MAPBOX_GL_ICON_IMAGE]: iconGoal },
-      [REACT_MAPBOX_GL_ICON_SIZE]: currentGoal === CASE_CONFIRMATION_GOAL_ID ? 0.045 : 0.03,
+      'icon-allow-overlap': true,
+      [REACT_MAPBOX_GL_ICON_SIZE]: ['interpolate', ['linear'], ['zoom'], 1, 0.002, 22, 0.044],
     },
   };
 
@@ -432,6 +434,20 @@ export const getMapBounds = (jurisdiction: Jurisdiction | null) => {
   return mapBounds;
 };
 
+/** dynamically get the bounds and zoom for the maps viewport.
+ * ref: https://github.com/mapbox/mapbox-gl-js/issues/1970#issuecomment-297465871
+ */
+export const setMapViewPortZoomFactory = (mapBounds: BoundingBox) => (map: Map) => {
+  const zoomAnimationDuration = 1000;
+  const minZoom = 0;
+  const maxZoom = 20;
+  const mapBoxTileSize = 512;
+  const mapEl = map.getCanvas().getBoundingClientRect();
+  const mapDim: [number, number] = [mapEl.height, mapEl.width];
+  const newBounds = viewport(mapBounds, mapDim, minZoom, maxZoom, mapBoxTileSize);
+  map.zoomTo(newBounds.zoom, { duration: zoomAnimationDuration });
+};
+
 /**
  * Geometry type is a union of seven types.
  * For union type we can only access members that are common to all types in the union.

diff --git a/src/containers/pages/FocusInvestigation/map/active/index.tsx b/src/containers/pages/FocusInvestigation/map/active/index.tsx
@@ -46,7 +46,6 @@ import {
   POLYGON,
   RACD_REGISTER_FAMILY_ID,
 } from '../../../../../constants';
-import { supersetFIPlansParamFilters } from '../../../../../helpers/dataLoading/plans';
 import { displayError } from '../../../../../helpers/errors';
 import { getGoalReport } from '../../../../../helpers/indicators';
 import {
@@ -102,10 +101,13 @@ import {
   fetchData,
   getDetailViewPlanInvestigationContainer,
   getMapBounds,
+  setMapViewPortZoomFactory,
   supersetCall,
 } from './helpers/utils';
 import './style.css';
 
+import { supersetFIPlansParamFilters } from '../../../../../helpers/dataLoading/plans';
+
 /** register reducers */
 reducerRegistry.register(jurisdictionReducerName, jurisdictionReducer);
 reducerRegistry.register(goalsReducerName, goalsReducer);
@@ -342,6 +344,7 @@ const SingleActiveFIMap = (props: MapSingleFIProps & RouteComponentProps<RoutePa
     : undefined;
 
   const mapBounds = getMapBounds(jurisdiction);
+  const setMapViewPortZoom = setMapViewPortZoomFactory(mapBounds);
 
   return (
     <div>
@@ -375,6 +378,7 @@ const SingleActiveFIMap = (props: MapSingleFIProps & RouteComponentProps<RoutePa
               mapCenter={mapCenter}
               mapBounds={mapBounds}
               onClickHandler={buildOnClickHandler(plan.plan_id)}
+              onLoad={setMapViewPortZoom}
             />
           </div>
         </div>

diff --git a/...ntainers/pages/FocusInvestigation/map/active/tests/__snapshots__/indexCases.test.tsx.snap b/...ntainers/pages/FocusInvestigation/map/active/tests/__snapshots__/indexCases.test.tsx.snap
@@ -94,8 +94,21 @@ exports[`containers/pages/FocusInvestigation/activeMap displays historical indic
 Object {
   "id": "historical-index-cases-point-symbol",
   "symbolLayout": Object {
+    "icon-allow-overlap": true,
     "icon-image": "case-confirmation",
-    "icon-size": 0.045,
+    "icon-size": Array [
+      "interpolate",
+      Array [
+        "linear",
+      ],
+      Array [
+        "zoom",
+      ],
+      1,
+      0.002,
+      22,
+      0.044,
+    ],
     "visibility": "visible",
   },
   "symbolPaint": Object {
@@ -112,8 +125,21 @@ exports[`containers/pages/FocusInvestigation/activeMap displays historical indic
 Object {
   "id": "historical-index-cases-poly-symbol",
   "symbolLayout": Object {
+    "icon-allow-overlap": true,
     "icon-image": "case-confirmation",
-    "icon-size": 0.045,
+    "icon-size": Array [
+      "interpolate",
+      Array [
+        "linear",
+      ],
+      Array [
+        "zoom",
+      ],
+      1,
+      0.002,
+      22,
+      0.044,
+    ],
     "visibility": "visible",
   },
   "symbolPaint": Object {
@@ -340,8 +366,21 @@ exports[`containers/pages/FocusInvestigation/activeMap passes historical index c
 Object {
   "id": "historical-index-cases-poly-symbol",
   "symbolLayout": Object {
+    "icon-allow-overlap": true,
     "icon-image": "case-confirmation",
-    "icon-size": 0.045,
+    "icon-size": Array [
+      "interpolate",
+      Array [
+        "linear",
+      ],
+      Array [
+        "zoom",
+      ],
+      1,
+      0.002,
+      22,
+      0.044,
+    ],
     "visibility": "visible",
   },
   "symbolPaint": Object {
@@ -358,8 +397,21 @@ exports[`containers/pages/FocusInvestigation/activeMap passes historical index c
 Object {
   "id": "current-index-cases-point-symbol",
   "symbolLayout": Object {
+    "icon-allow-overlap": true,
     "icon-image": "current-case-confirmation",
-    "icon-size": 0.045,
+    "icon-size": Array [
+      "interpolate",
+      Array [
+        "linear",
+      ],
+      Array [
+        "zoom",
+      ],
+      1,
+      0.002,
+      22,
+      0.044,
+    ],
     "visibility": "visible",
   },
   "symbolPaint": Object {