Update map stories

the-deep · Mar 11, 2024 · 3849151 · 3849151
1 parent 3dfc598
commit 3849151
Show file tree

Hide file tree

Showing 23 changed files with 350,392 additions and 2,193 deletions.
diff --git a/lib/src/components/Map/Layers/HeatmapLayer.tsx b/lib/src/components/Map/Layers/HeatmapLayer.tsx
@@ -1,36 +1,53 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { Map as MapFromLib } from 'ol';
+import {
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react';
 import { Heatmap } from 'ol/layer';
 import Feature from 'ol/Feature';
 import Point from 'ol/geom/Point';
 import { fromLonLat } from 'ol/proj';
 import * as d3ColorScale from 'd3-scale-chromatic';
 import { scaleLog } from 'd3-scale';
 
-import { HeatMapLayer, HeatMapLayerProperty } from '../index';
 import { vector } from '../helpers';
+import MapContext from '../MapContext';
 
-interface Props extends Pick<HeatMapLayer, 'data' | 'zIndex' | 'opacity' | 'blur' | 'radius' | 'fillPalette' | 'weighted' | 'scaleDataMax'>
-{
-    map: MapFromLib | undefined;
-    weightProperty?: string;
+export type HeatMapLayerProperty = GeoJSON.GeoJsonProperties & {
+    lon: number;
+    lat: number;
+    // FIXME: This is not used consistently
+    exclude_from_heatmap?: boolean;
+}
+
+export interface Props {
+    data: HeatMapLayerProperty[] | GeoJSON.FeatureCollection<GeoJSON.Point>;
+    zIndex: number;
+    opacity: number;
+    blur: number;
+    radius: number;
+    fillPalette: 'YlOrRd'; // FIXME: enum is not complete
+    weighted: boolean;
+    weightPropertyKey: string;
+    scaleDataMax: number;
 }
 
 function HeatmapLayer(props: Props) {
     const {
-        map,
         data,
         zIndex = 1,
         opacity = 1,
         blur,
         radius,
         fillPalette,
         weighted = false,
-        // FIXME: there should not be any default weightProperty
-        weightProperty = 'fatalities',
+        weightPropertyKey,
         scaleDataMax = 350,
     } = props;
 
+    const { map } = useContext(MapContext);
+
     const scaleWeight = useMemo(
         () => scaleLog()
             .domain([1, scaleDataMax])
@@ -40,7 +57,7 @@ function HeatmapLayer(props: Props) {
 
     const configRef = useRef({
         weighted,
-        weightProperty,
+        weightPropertyKey,
         blur,
         radius,
         scaleWeight,
@@ -81,7 +98,7 @@ function HeatmapLayer(props: Props) {
                 weight: (feature) => {
                     if (configRef.current.weighted) {
                         const w = scaleWeight(
-                            parseFloat(feature.get(configRef.current.weightProperty)),
+                            parseFloat(feature.get(configRef.current.weightPropertyKey)),
                         ) || 0;
                         return w;
                     }

diff --git a/lib/src/components/Map/Layers/MapboxLayer.tsx b/lib/src/components/Map/Layers/MapboxLayer.tsx
@@ -1,25 +1,31 @@
-import { useEffect, useRef, useMemo } from 'react';
+import {
+    useEffect,
+    useRef,
+    useMemo,
+    useContext,
+} from 'react';
 import { isNotDefined } from '@togglecorp/fujs';
-import { Map as MapFromLib } from 'ol';
 import TileLayer from 'ol/layer/Tile';
 import { XYZ } from 'ol/source';
+import MapContext from '../MapContext';
 
-import { MapboxLayer } from '../index';
-
-interface Props extends Pick<MapboxLayer, 'zIndex' | 'opacity' | 'accessToken'> {
-    map: MapFromLib | undefined;
+export interface Props {
     styleUrl: string;
+    accessToken: string;
+    opacity: number;
+    zIndex: number;
 }
 
 function MapboxLayer(props: Props) {
     const {
-        map,
         zIndex = 1,
         opacity = 1,
         styleUrl,
         accessToken,
     } = props;
 
+    const { map } = useContext(MapContext);
+
     const configRef = useRef({
         zIndex,
         opacity,
@@ -34,7 +40,6 @@ function MapboxLayer(props: Props) {
                 source: new XYZ({
                     url: `https://api.mapbox.com/${styleUrlParsed}/tiles/{z}/{x}/{y}?access_token=${accessToken}`,
                     tileSize: 512,
-                    // preload: 10,
                     crossOrigin: 'anonymous',
                 }),
                 zIndex: configRef.current.zIndex,