From 10eda6dd4250ea929fca69bc4d5ce9689911a096 Mon Sep 17 00:00:00 2001 From: pixeledcode Date: Mon, 18 Dec 2023 15:01:50 +0530 Subject: [PATCH 1/5] add new map layers --- .../LeafletChoropleth.stories.tsx | 4 ++- .../LeafletChoropleth/LeafletChoropleth.tsx | 34 ++++++++++--------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.stories.tsx b/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.stories.tsx index 50d342d8..de83ca86 100644 --- a/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.stories.tsx +++ b/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.stories.tsx @@ -82,6 +82,8 @@ export const Default: Story = { legendData, mapDataFn, mapProperty: 'dt_code', - mapZoom: 7.4, + mapZoom: 7.8, + fillOpacity: 1, + mapCenter: [26.193, 92.3], }, }; diff --git a/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx b/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx index 6459a583..8b543787 100644 --- a/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx +++ b/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx @@ -5,15 +5,13 @@ import { IconBoxMultiple } from '@tabler/icons-react'; import React from 'react'; import { GeoJSON, MapContainer, TileLayer, ScaleControl } from 'react-leaflet'; -const layers = [ - 'light_all', - 'light_nolabels', - 'dark_all', - 'dark_nolabels', - 'rastertiles/voyager', - 'rastertiles/voyager_nolabels', -] as const; -type layerOptions = (typeof layers)[number]; +const layers = { + satellie: + 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', + dark: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', + light: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', +} as const; +type layerOptions = keyof typeof layers; type MapProps = { /* Map file to be used */ @@ -69,7 +67,7 @@ type Props = MapProps & LegendProps; const LeafletChoropleth = (props: Props) => { const { legendData, - defaultLayer = 'light_all', + defaultLayer = 'light', hideLayers = false, className, ...others @@ -178,7 +176,7 @@ const Map = ({ color: selectedLayer?.includes('dark') ? '#eee' : 'var(--mapareadistrict-border)', - fillOpacity: fillOpacity ? fillOpacity : 0.5, + fillOpacity: fillOpacity ? fillOpacity : 0.9, }; }; @@ -188,10 +186,14 @@ const Map = ({ if (!unmountMap) { return ( - - + + {features && ( <> Change Layer
- {layers.map((layer) => { + {Object.keys(layers).map((layer: any) => { return (