intelligenceMap - static province centroid values

kc-leung · kc-leung · commit e0726b559639 · 2021-06-11T14:34:15.000-04:00
diff --git a/src/components/generic-map.js b/src/components/generic-map.js
@@ -47,7 +47,7 @@ const propTypes = {
   showTooltip: PropTypes.bool,
   renderTooltip: PropTypes.func,
   pitch: PropTypes.number,
-  controller: PropTypes.bool
+  controller: PropTypes.bool,
 }
 
 const defaultProps = {
@@ -61,7 +61,7 @@ const defaultProps = {
   showTooltip: false,
   renderTooltip: undefined,
   pitch: 0,
-  controller: true
+  controller: true,
 }
 
 // DeckGL react component
@@ -79,7 +79,7 @@ const Map = ({
   pitch,
   mapboxApiAccessToken,
   mapStyle,
-  controller
+  controller,
 }) => {
   const deckRef = useRef()
   const [viewState, setViewState] = useState(INIT_VIEW_STATE)
diff --git a/src/components/intelligenceMap/data/province-centroid.json b/src/components/intelligenceMap/data/province-centroid.json
@@ -0,0 +1,95 @@
+{
+  "centroid": [
+    {
+      "properties": {
+        "NAME": "Alberta",
+        "CODE": "AB"
+      },
+      "coordinates": [-114.921, 56.535]
+    },
+    {
+      "properties": {
+        "NAME": "Saskatchewan",
+        "CODE": "SK"
+      },
+      "coordinates": [-105.571, 54.463]
+    },
+    {
+      "properties": {
+        "NAME": "Manitoba",
+        "CODE": "MB"
+      },
+      "coordinates": [-97.135, 55.534]
+    },
+    {
+      "properties": {
+        "NAME": "Newfoundland & Labrador",
+        "CODE": "NL"
+      },
+      "coordinates": [-60.642, 54.945]
+    },
+    {
+      "properties": {
+      "NAME": "PEI",
+      "CODE": "PE"
+      },
+      "coordinates": [-61.304, 48.007]
+    },
+    {
+      "properties": {
+        "NAME": "Nova Scotia",
+        "CODE": "NS"
+      },
+      "coordinates": [-61.642, 43.522]
+    },
+    {
+      "properties": {
+        "NAME": "Northwest Territories",
+        "CODE": "NT"
+      },
+      "coordinates": [-118.069, 63.099]
+    },
+    {
+      "properties": {
+        "NAME": "Nunavut",
+        "CODE": "NU"
+      },
+      "coordinates": [-97.063, 62.997]
+    },
+    {
+      "properties": {
+        "NAME": "Ontario",
+        "CODE": "ON"
+      },
+      "coordinates": [-87.572, 51.515]
+    },
+    {
+      "properties": {
+        "NAME": "New Brunswick",
+        "CODE": "NB"
+      },
+      "coordinates": [-70.959, 45.570]
+    },
+    {
+      "properties": {
+        "NAME": "Yukon Territory",
+        "CODE": "YT"
+      },
+      "coordinates": [-134.181, 61.766]
+    },
+    {
+      "properties": {
+        "NAME": "British Columbia",
+        "CODE": "BC"
+      },
+      "coordinates": [-126.443, 54.904]
+    },
+    {
+      "properties": {
+        "NAME": "Quebec",
+        "CODE": "QC"
+      },
+      "coordinates": [-73.504, 51.220]
+    }
+  ]
+}
diff --git a/src/components/intelligenceMap/hooks.js b/src/components/intelligenceMap/hooks.js
@@ -30,4 +30,4 @@ export const getCityFillColor = (value, max, min) => {
   const totalLightnessDiff = maxLightness - minLightness
   const lightness = maxLightness - ((value - min) / totalDiff * totalLightnessDiff)
   return hslToRgbConverter(210, 63, lightness)
-}
+}
diff --git a/src/components/intelligenceMap/intelligence-map.js b/src/components/intelligenceMap/intelligence-map.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { FlyToInterpolator } from '@deck.gl/core'
@@ -13,11 +13,10 @@ import {
 } from '../../shared/map-props'
 
 const INIT_VIEW_STATE = {
-  pitch: 0,
-  bearing: 0,
+  bearing: -4,
   transitionDuration: 1000,
   transitionInterpolator: new FlyToInterpolator(),
-  latitude: 58,
+  latitude: 57,
   longitude: -94,
   zoom: 2.6,
 }
@@ -38,6 +37,7 @@ const IntelligenceMap = ({
   geoProvinceCentroidJson,
   intelligenceProvince,
   intelligenceCity,
+  pitch,
 }) => {
   const [hoverProvince, setHoverProvince] = useState({})
   const [hoverCity, setHoverCity] = useState({})
@@ -67,7 +67,7 @@ const IntelligenceMap = ({
   })
 
   const handleFillColor = (type, d) => {
-    let fillColor;
+    let fillColor
 
     if (type === 'outer') {
       fillColor = getProvinceFillColor(d.value.total, maxP, minP)
@@ -101,53 +101,50 @@ const IntelligenceMap = ({
     return toolTipText
   }
   
-  const layers = useMemo(() => { 
-    return [
-      new GeoJsonLayer({
-        id: 'outerGeo-layer',
-        data: intelligenceProvince,
-        pickable: true,
-        stroked: true,
-        filled: true,
-        getLineColor: [0, 0, 0],
-        lineWidthMinPixels: 1,
-        getFillColor: d => handleFillColor('outer', d),
-        updateTriggers: {
-          getFillColor: { hoverProvince },
-        },
-        onHover: data => setHoverProvince(data),
-      }),
-
-      new GeoJsonLayer({
-        id: 'innerGeo-layer',
-        data: intelligenceCity,
-        pickable: true,
-        stroked: true,
-        filled: true,
-        getLineColor: [0, 0, 0],
-        lineWidthMinPixels: 1,
-        getFillColor: d => handleFillColor('inner', d),
-        updateTriggers: {
-          getFillColor: [hoverCity],
-        },
-        onHover: data => setHoverCity(data),
-      }),
-
-      new TextLayer({
-        id: 'text-layer',
-        data: geoProvinceCentroidJson,
-        billboard: false,
-        pickable: false,
-        getPosition: d => d.centroid.coordinates,
-        getText: d => `${d.name}\n ${d.value.percentage}%`,
-        getPixelOffset: d => [d.offset.x, d.offset.y],
-        getSize: 12,
-        getAngle: 0,
-        getTextAnchor: 'middle',
-        getAlignmentBaseline: 'center',
-      }),
-    ]
-  })
+  const layers = [
+    new GeoJsonLayer({
+      id: 'outerGeo-layer',
+      data: intelligenceProvince,
+      pickable: true,
+      stroked: true,
+      filled: true,
+      getLineColor: [0, 0, 0],
+      lineWidthMinPixels: 1,
+      getFillColor: d => handleFillColor('outer', d),
+      updateTriggers: {
+        getFillColor: { hoverProvince },
+      },
+      onHover: data => setHoverProvince(data),
+    }),
+
+    new GeoJsonLayer({
+      id: 'innerGeo-layer',
+      data: intelligenceCity,
+      pickable: true,
+      stroked: true,
+      filled: true,
+      getLineColor: [0, 0, 0],
+      lineWidthMinPixels: 1,
+      getFillColor: d => handleFillColor('inner', d),
+      updateTriggers: {
+        getFillColor: [hoverCity],
+      },
+      onHover: data => setHoverCity(data),
+    }),
+
+    new TextLayer({
+      id: 'text-layer',
+      data: geoProvinceCentroidJson,
+      billboard: false,
+      pickable: false,
+      getPosition: d => d.coordinates,
+      getText: d => `${d.properties.NAME}\n ${d.value.percentage}%`,
+      getSize: 12,
+      getAngle: 0,
+      getTextAnchor: 'middle',
+      getAlignmentBaseline: 'center',
+    }),
+  ]
 
   return (
     <Map 
@@ -162,7 +159,7 @@ const IntelligenceMap = ({
         },
       }}
       controller={false}
-      pitch={20}
+      pitch={pitch}
       viewStateOverride={INIT_VIEW_STATE}
       mapboxApiAccessToken={mapboxApiAccessToken}
       mapStyle="mapbox://styles/chiuleung/ckon6rngz3wpg17pkwuj12hrx"
@@ -179,4 +176,4 @@ IntelligenceMap.defaultProps = {
   ...commonDefaultProps,
 }
 
-export default IntelligenceMap
+export default IntelligenceMap
diff --git a/src/hooks/index.js b/src/hooks/index.js
@@ -324,30 +324,30 @@ export const useResizeObserver = (ref) => {
  * @return  {Array}           The RGB representation
  */
 export const hslToRgbConverter = (hue, saturation, light) => {
-    let h = hue/360;
-    let s = saturation/100;
-    let l = light/100
-
-    var r, g, b;
-
-    if(s == 0){
-        r = g = b = l; // achromatic
-    }else{
-        var hue2rgb = function hue2rgb(p, q, t){
-            if(t < 0) t += 1;
-            if(t > 1) t -= 1;
-            if(t < 1/6) return p + (q - p) * 6 * t;
-            if(t < 1/2) return q;
-            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
-            return p;
-        }
-
-        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        var p = 2 * l - q;
-        r = hue2rgb(p, q, h + 1/3);
-        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1/3);
+  let h = hue/360
+  let s = saturation/100
+  let l = light/100
+
+  var r, g, b
+
+  if(s == 0){
+    r = g = b = l // achromatic
+  }else{
+    var hue2rgb = function hue2rgb(p, q, t){
+      if(t < 0) t += 1
+      if(t > 1) t -= 1
+      if(t < 1/6) return p + (q - p) * 6 * t
+      if(t < 1/2) return q
+      if(t < 2/3) return p + (q - p) * (2/3 - t) * 6
+      return p
     }
 
-    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    var p = 2 * l - q
+    r = hue2rgb(p, q, h + 1/3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1/3)
+  }
+
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
 }
diff --git a/stories/intelligence-map.stories.js b/stories/intelligence-map.stories.js
@@ -1,12 +1,11 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect, useState } from 'react'
 import { storiesOf } from '@storybook/react'
+
 import IntelligenceMap from '../src/components/intelligenceMap/intelligence-map'
-import geoProvinceValueJson from './data/geo-province-value.json'
 import intelligenceProvince from '../src/components/intelligenceMap/data/intelligence-province.json'
 import intelligenceCity from '../src/components/intelligenceMap/data/intelligence-city.json'
-
-import { getCircleRadiusCentroid } from '../src/shared/utils/index'
+import provinceCentroid from '../src/components/intelligenceMap/data/province-centroid.json'
 
 const MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN
 
@@ -19,8 +18,12 @@ const useGeoJsonCentroidData = () => {
 
       await Promise.all(geoJson.map(async (el, index) => {
         try {
-          let centroid = await getCircleRadiusCentroid({ polygon: el.geometry })
-          response.push({ name: el.properties.NAME, value: el.value, centroid, offset: el.offset ? el.offset : { x: 0, y: 0 } })
+          response.push(
+            { 
+              ...provinceCentroid.centroid[index],
+              value: el.value,
+            },
+          )
         } catch (error) {
           console.error(error)
         }
@@ -45,6 +48,7 @@ storiesOf('Intellignce Map', module)
         intelligenceProvince={ intelligenceProvince }
         intelligenceCity={ intelligenceCity }
         geoProvinceCentroidJson={ centroidJson }
+        pitch={25}
       />
     )
   })
