@map-colonies/react-components 3.11.0 → 3.12.0

package/src/lib/cesium-map/map-legend/legends-sidebar.stories.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap } from '../map';
+import { CesiumXYZLayer } from '../layers/xyz.layer';
+import { CesiumSceneMode } from '../map.types';
+
+export default {
+  title: 'Cesium Map',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const optionsXYZSanDiego = {
+  url:
+    'https://tiles.openaerialmap.org/5d73614588556200055f10d6/0/5d73614588556200055f10d7/{z}/{x}/{y}',
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/3456d1802ab2ef330ae2732387726771.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+        {
+          id: 'INFRARED_RASTER',
+          type: 'WMS_LAYER',
+          opacity: 0.6,
+          zIndex: 1,
+          options: {
+            url:
+              'https://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?',
+            layers: 'goes_conus_ir',
+            credit: 'Infrared data courtesy Iowa Environmental Mesonet',
+            parameters: {
+              transparent: 'true',
+              format: 'image/png',
+            },
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+    {
+      id: '2nd',
+      title: '2nd Map Title',
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'RADAR_RASTER',
+          type: 'WMS_LAYER',
+          opacity: 0.6,
+          zIndex: 1,
+          options: {
+            url:
+              'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?',
+            layers: 'nexrad-n0r',
+            credit: 'Radar data courtesy Iowa Environmental Mesonet',
+            parameters: {
+              transparent: 'true',
+              format: 'image/png',
+            },
+          },
+        },
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+        {
+          id: 'VECTOR_TILES_GPS',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 2,
+          options: {
+            url: 'https://gps.tile.openstreetmap.org/lines/{z}/{x}/{y}.png',
+            layers: '',
+            credit: 'openstreetmap',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+    {
+      id: '3rd',
+      title: '3rd Map Title',
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/d8b97d3e38a0d43e5a06dea9aae17a3e.png',
+      baseRasteLayers: [
+        {
+          id: 'VECTOR_TILES',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url:
+              'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=6170aad10dfd42a38d4d8c709a536f38',
+            layers: '',
+            credit: 'thunderforest',
+          },
+        },
+        {
+          id: 'VECTOR_TILES_GPS',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 1,
+          options: {
+            url: 'https://gps.tile.openstreetmap.org/lines/{z}/{x}/{y}.png',
+            layers: '',
+            credit: 'openstreetmap',
+          },
+        },
+        {
+          id: 'WMTS_POPULATION_TILES',
+          type: 'WMTS_LAYER',
+          opacity: 0.4,
+          zIndex: 2,
+          options: {
+            url:
+              'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
+            layer: 'USGSShadedReliefOnly',
+            style: 'default',
+            format: 'image/jpeg',
+            tileMatrixSetID: 'default028mm',
+            maximumLevel: 19,
+            credit: 'U. S. Geological Survey',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+export const MapWithLegends: Story = () => {
+  const [center] = useState<[number, number]>([
+    -117.30644008676421,
+    33.117098433617564,
+  ]); //Sandiego Poinsettia Park
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap
+        center={center}
+        zoom={14}
+        imageryProvider={false}
+        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        // @ts-ignore
+        baseMaps={BASE_MAPS}
+        legends={{
+          legendsList: [
+            {
+              layer: 'bluemarble',
+              legendImg:
+                'https://c8.alamy.com/comp/F5HF5D/map-icon-legend-symbol-sign-toolkit-element-F5HF5D.jpg',
+              legendDoc: 'http://www.africau.edu/images/default/sample.pdf',
+            },
+            {
+              layer: 'bluemarble2',
+              legendImg:
+                'https://i.pinimg.com/564x/55/cf/a1/55cfa147dfef99d231ec95ab8cd3652d--outdoor-code-cub-scouts-brownie-hiking-badge.jpg',
+              legendDoc: 'http://www.africau.edu/images/default/sample.pdf',
+            },
+          ],
+          title: 'Map Legends',
+          emptyText: 'No legends for this basemap',
+        }}
+      >
+        <CesiumXYZLayer options={optionsXYZSanDiego} />
+      </CesiumMap>
+    </div>
+  );
+};
+MapWithLegends.storyName = 'Map with legends sidebar';

package/src/lib/cesium-map/map.css

@@ -40,7 +40,7 @@ body[dir='rtl'] .toolsContainer {
 
 .sideToolsContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 8px;
   z-index: 2000;
   position: absolute;
@@ -52,3 +52,8 @@ body[dir='rtl'] .sideToolsContainer {
   left: 40px;
   right: unset;
 }
+
+.viewer {
+  display: flex;
+  flex-direction: row;
+}

package/src/lib/cesium-map/map.tsx

@@ -4,7 +4,9 @@ import React, {
   useEffect,
   useState,
   useRef,
+  useCallback,
 } from 'react';
+import { createPortal } from 'react-dom';
 import { Viewer, CesiumComponentRef } from 'resium';
 import { ViewerProps } from 'resium/dist/types/src/Viewer/Viewer';
 import {
@@ -26,7 +28,8 @@ import { Proj } from '../utils/projections';
 import { CoordinatesTrackerTool } from './tools/coordinates-tracker.tool';
 import { ScaleTrackerTool } from './tools/scale-tracker.tool';
 import { CesiumSettings, IBaseMap, IBaseMaps } from './settings/settings';
-import LayerManager from './layers-manager';
+import { IMapLegend, MapLegendSidebar, MapLegendToggle } from './map-legend';
+import LayerManager, { LegendExtractor } from './layers-manager';
 import { CesiumSceneMode, CesiumSceneModeEnum } from './map.types';
 
 import './map.css';
@@ -80,6 +83,14 @@ export interface IContextMenuData {
   handleClose: () => void;
 }
 
+interface ILegends {
+  legendsList?: IMapLegend[];
+  emptyText?: string;
+  title?: string;
+  actionsTexts?: { docText: string; imgText: string };
+  mapLegendsExtractor?: LegendExtractor;
+}
+
 export interface CesiumMapProps extends ViewerProps {
   showMousePosition?: boolean;
   showScale?: boolean;
@@ -96,6 +107,9 @@ export interface CesiumMapProps extends ViewerProps {
     width: number;
     dynamicHeightIncrement?: number;
   };
+  legendSidebarTitle?: string;
+  noLegendsText?: string;
+  legends?: ILegends;
 }
 
 export const useCesiumMap = (): CesiumViewer => {
@@ -119,11 +133,15 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
   const [sceneModes, setSceneModes] = useState<
     CesiumSceneModeEnum[] | undefined
   >();
+  const [legendsList, setLegendsList] = useState<IMapLegend[]>([]);
   const [baseMaps, setBaseMaps] = useState<IBaseMaps | undefined>();
   const [showImageryMenu, setShowImageryMenu] = useState<boolean>(false);
   const [imageryMenuPosition, setImageryMenuPosition] = useState<
     Record<string, unknown> | undefined
   >(undefined);
+  const [isLegendsSidebarOpen, setIsLegendsSidebarOpen] = useState<boolean>(
+    false
+  );
 
   const viewerProps = {
     fullscreenButton: true,
@@ -163,7 +181,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
   useEffect(() => {
     if (ref.current) {
       const viewer = ref.current.cesiumElement as CesiumViewer;
-      viewer.layersManager = new LayerManager(viewer);
+
       if (props.imageryContextMenu) {
         viewer.screenSpaceEventHandler.setInputAction(
           (evt: Record<string, unknown>) => {
@@ -179,6 +197,20 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
     setMapViewRef(ref.current?.cesiumElement);
   }, [ref, props.imageryContextMenu]);
 
+  useEffect(() => {
+    if (mapViewRef) {
+      mapViewRef.layersManager = new LayerManager(
+        mapViewRef,
+        props.legends?.mapLegendsExtractor,
+        () => {
+          setLegendsList(
+            mapViewRef?.layersManager?.legendsList as IMapLegend[]
+          );
+        }
+      );
+    }
+  }, [mapViewRef]);
+
   useEffect(() => {
     setSceneModes(
       props.sceneModes ?? [
@@ -326,27 +358,61 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
     }
   }, [props.zoom, props.center, mapViewRef]);
 
+  const bindCustomToolsToViewer = useCallback((): JSX.Element | undefined => {
+    return (
+      mapViewRef &&
+      createPortal(
+        <>
+          <Box className="sideToolsContainer">
+            <CesiumSettings
+              sceneModes={sceneModes as CesiumSceneModeEnum[]}
+              baseMaps={baseMaps}
+              locale={locale}
+            />
+            <MapLegendToggle
+              onClick={() => setIsLegendsSidebarOpen(!isLegendsSidebarOpen)}
+            />
+          </Box>
+          <Box className="toolsContainer">
+            {showMousePosition === true ? (
+              <CoordinatesTrackerTool
+                projection={projection}
+              ></CoordinatesTrackerTool>
+            ) : (
+              <></>
+            )}
+            {showScale === true ? <ScaleTrackerTool locale={locale} /> : <></>}
+          </Box>
+        </>,
+        document.querySelector('.cesium-viewer') as Element
+      )
+    );
+  }, [
+    baseMaps,
+    locale,
+    mapViewRef,
+    projection,
+    sceneModes,
+    showMousePosition,
+    showScale,
+    isLegendsSidebarOpen,
+  ]);
+
   return (
-    <Viewer full ref={ref} {...viewerProps}>
+    <Viewer className="viewer" full ref={ref} {...viewerProps}>
       <MapViewProvider value={mapViewRef as CesiumViewer}>
+        <MapLegendSidebar
+          title={props.legends?.title}
+          isOpen={isLegendsSidebarOpen}
+          toggleSidebar={(): void =>
+            setIsLegendsSidebarOpen(!isLegendsSidebarOpen)
+          }
+          noLegendsText={props.legends?.emptyText}
+          legends={props.legends?.legendsList ?? legendsList}
+          actionsTexts={props.legends?.actionsTexts}
+        />
         {props.children}
-        <Box className="sideToolsContainer">
-          <CesiumSettings
-            sceneModes={sceneModes as CesiumSceneModeEnum[]}
-            baseMaps={baseMaps}
-            locale={locale}
-          />
-        </Box>
-        <Box className="toolsContainer">
-          {showMousePosition === true ? (
-            <CoordinatesTrackerTool
-              projection={projection}
-            ></CoordinatesTrackerTool>
-          ) : (
-            <></>
-          )}
-          {showScale === true ? <ScaleTrackerTool locale={locale} /> : <></>}
-        </Box>
+        {bindCustomToolsToViewer()}
         {props.imageryContextMenu &&
           showImageryMenu &&
           imageryMenuPosition &&

package/src/lib/cesium-map/settings/settings.css

@@ -3,7 +3,8 @@
   gap: 8px;
 }
 
-.settingsIconContainer {
+.settingsIconContainer,
+.mapLegendToggleContainer {
   fill: #fff;
   width: 40px;
   height: 40px;
@@ -12,7 +13,8 @@
   border-radius: 4px;
 }
 
-.settingsIconContainer:hover {
+.settingsIconContainer:hover,
+.mapLegendToggleContainer:hover {
   background: #48b;
   border-color: #aef;
 }
@@ -35,6 +37,7 @@
 .settingsDialogPortal .mdc-dialog__container {
   align-items: unset;
 }
+
 .settingsDialogPortal .mdc-dialog .mdc-dialog__surface {
   max-height: unset;
 }