Created auto zoom configuration for the map component

datopian · Dec 22, 2023 · b13e3ad · b13e3ad
1 parent 1394f02
commit b13e3ad
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 3 deletions.
diff --git a/.changeset/wicked-apples-swim.md b/.changeset/wicked-apples-swim.md
@@ -0,0 +1,5 @@
+---
+'@portaljs/components': patch
+---
+
+Created auto zoom configuration for the map component
diff --git a/packages/components/src/components/Map.tsx b/packages/components/src/components/Map.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
 import loadData from '../lib/loadData';
 import chroma from 'chroma-js';
@@ -30,7 +30,10 @@ export type MapProps = {
   title?: string;
   center?: { latitude: number | undefined; longitude: number | undefined };
   zoom?: number;
-  style?: Object;
+  style?: CSSProperties;
+  autoZoomConfiguration?: {
+    layerName: string
+  }
 };
 
 export function Map({
@@ -45,7 +48,8 @@ export function Map({
   center = { latitude: 45, longitude: 45 },
   zoom = 2,
   title = '',
-  style = {}
+  style = {},
+  autoZoomConfiguration = undefined,
 }: MapProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [layersData, setLayersData] = useState<any>([]);
@@ -118,6 +122,24 @@ export function Map({
         };
 
         if (title) info.addTo(map.target);
+        if(!autoZoomConfiguration) return;
+
+        let layerToZoomBounds = L.latLngBounds(L.latLng(0, 0), L.latLng(0, 0));
+
+        layers.forEach((layer) => {
+          if(layer.name === autoZoomConfiguration.layerName) {
+            const data = layersData.find(
+              (layerData) => layerData.name === layer.name
+            )?.data;
+
+            if (data) {
+              layerToZoomBounds = L.geoJSON(data).getBounds();
+              return;
+            }
+          }
+        });
+
+        map.target.fitBounds(layerToZoomBounds);
       }}
     >
       <TileLayer

diff --git a/packages/components/stories/Map.stories.ts b/packages/components/stories/Map.stories.ts
@@ -23,6 +23,9 @@ const meta: Meta = {
     },
     style: {
       description: "Styles for the container"
+    },
+    autoZoomConfiguration: {
+      description: "Configuration to auto zoom in the specified layer data"
     }
   },
 };
@@ -91,4 +94,32 @@ export const GeoJSONMultipleLayers: Story = {
     center: { latitude: 45, longitude: 0 },
     zoom: 2,
   },
+}
+
+export const GeoJSONMultipleLayersWithAutoZoomInSpecifiedLayer: Story = {
+  name: 'GeoJSON polygons and points map with auto zoom in the points layer',
+  args: {
+    layers: [
+      {
+        data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        name: 'Points',
+        tooltip: true,
+      },
+      {
+        data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        name: 'Polygons',
+        tooltip: true,
+        colorScale: {
+          starting: '#ff0000',
+          ending: '#00ff00',
+        },
+      },
+    ],
+    title: 'Polygons and points',
+    center: { latitude: 45, longitude: 0 },
+    zoom: 2,
+    autoZoomConfiguration: {
+      layerName: 'Points'
+    }
+  },
 };