@map-colonies/react-components 3.11.0 → 3.12.0

package/dist/cesium-map/map.js

@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CesiumMap = exports.useCesiumMap = exports.CesiumViewer = void 0;
 var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
 var resium_1 = require("resium");
 var cesium_1 = require("cesium");
 var lodash_1 = require("lodash");
@@ -59,6 +60,7 @@ var projections_1 = require("../utils/projections");
 var coordinates_tracker_tool_1 = require("./tools/coordinates-tracker.tool");
 var scale_tracker_tool_1 = require("./tools/scale-tracker.tool");
 var settings_1 = require("./settings/settings");
+var map_legend_1 = require("./map-legend");
 var layers_manager_1 = __importDefault(require("./layers-manager"));
 var map_types_1 = require("./map.types");
 require("./map.css");
@@ -85,18 +87,20 @@ var useCesiumMap = function () {
 };
 exports.useCesiumMap = useCesiumMap;
 var CesiumMap = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var ref = react_1.useRef(null);
-    var _j = react_1.useState(), mapViewRef = _j[0], setMapViewRef = _j[1];
-    var _k = react_1.useState(), projection = _k[0], setProjection = _k[1];
-    var _l = react_1.useState(), showMousePosition = _l[0], setShowMousePosition = _l[1];
-    var _m = react_1.useState(), showScale = _m[0], setShowScale = _m[1];
-    var _o = react_1.useState(), locale = _o[0], setLocale = _o[1];
-    var _p = react_1.useState(), cameraState = _p[0], setCameraState = _p[1];
-    var _q = react_1.useState(), sceneModes = _q[0], setSceneModes = _q[1];
-    var _r = react_1.useState(), baseMaps = _r[0], setBaseMaps = _r[1];
-    var _s = react_1.useState(false), showImageryMenu = _s[0], setShowImageryMenu = _s[1];
-    var _t = react_1.useState(undefined), imageryMenuPosition = _t[0], setImageryMenuPosition = _t[1];
+    var _p = react_1.useState(), mapViewRef = _p[0], setMapViewRef = _p[1];
+    var _q = react_1.useState(), projection = _q[0], setProjection = _q[1];
+    var _r = react_1.useState(), showMousePosition = _r[0], setShowMousePosition = _r[1];
+    var _s = react_1.useState(), showScale = _s[0], setShowScale = _s[1];
+    var _t = react_1.useState(), locale = _t[0], setLocale = _t[1];
+    var _u = react_1.useState(), cameraState = _u[0], setCameraState = _u[1];
+    var _v = react_1.useState(), sceneModes = _v[0], setSceneModes = _v[1];
+    var _w = react_1.useState([]), legendsList = _w[0], setLegendsList = _w[1];
+    var _x = react_1.useState(), baseMaps = _x[0], setBaseMaps = _x[1];
+    var _y = react_1.useState(false), showImageryMenu = _y[0], setShowImageryMenu = _y[1];
+    var _z = react_1.useState(undefined), imageryMenuPosition = _z[0], setImageryMenuPosition = _z[1];
+    var _0 = react_1.useState(false), isLegendsSidebarOpen = _0[0], setIsLegendsSidebarOpen = _0[1];
     var viewerProps = __assign({ fullscreenButton: true, timeline: false, animation: false, baseLayerPicker: false, geocoder: false, navigationHelpButton: false, homeButton: false, sceneModePicker: false }, props);
     var getImageryMenuStyle = function (x, y, menuWidth, menuHeight, menuDynamicHeightIncrement) {
         var container = mapViewRef.container;
@@ -114,7 +118,6 @@ var CesiumMap = function (props) {
         var _a;
         if (ref.current) {
             var viewer = ref.current.cesiumElement;
-            viewer.layersManager = new layers_manager_1.default(viewer);
             if (props.imageryContextMenu) {
                 viewer.screenSpaceEventHandler.setInputAction(function (evt) {
                     // console.log('RIGHT click', evt.position);
@@ -126,6 +129,15 @@ var CesiumMap = function (props) {
         }
         setMapViewRef((_a = ref.current) === null || _a === void 0 ? void 0 : _a.cesiumElement);
     }, [ref, props.imageryContextMenu]);
+    react_1.useEffect(function () {
+        var _a;
+        if (mapViewRef) {
+            mapViewRef.layersManager = new layers_manager_1.default(mapViewRef, (_a = props.legends) === null || _a === void 0 ? void 0 : _a.mapLegendsExtractor, function () {
+                var _a;
+                setLegendsList((_a = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _a === void 0 ? void 0 : _a.legendsList);
+            });
+        }
+    }, [mapViewRef]);
     react_1.useEffect(function () {
         var _a;
         setSceneModes((_a = props.sceneModes) !== null && _a !== void 0 ? _a : [
@@ -243,25 +255,43 @@ var CesiumMap = function (props) {
             });
         }
     }, [props.zoom, props.center, mapViewRef]);
-    return (react_1.default.createElement(resium_1.Viewer, __assign({ full: true, ref: ref }, viewerProps),
+    var bindCustomToolsToViewer = react_1.useCallback(function () {
+        return (mapViewRef &&
+            react_dom_1.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(box_1.Box, { className: "sideToolsContainer" },
+                    react_1.default.createElement(settings_1.CesiumSettings, { sceneModes: sceneModes, baseMaps: baseMaps, locale: locale }),
+                    react_1.default.createElement(map_legend_1.MapLegendToggle, { onClick: function () { return setIsLegendsSidebarOpen(!isLegendsSidebarOpen); } })),
+                react_1.default.createElement(box_1.Box, { className: "toolsContainer" },
+                    showMousePosition === true ? (react_1.default.createElement(coordinates_tracker_tool_1.CoordinatesTrackerTool, { projection: projection })) : (react_1.default.createElement(react_1.default.Fragment, null)),
+                    showScale === true ? react_1.default.createElement(scale_tracker_tool_1.ScaleTrackerTool, { locale: locale }) : react_1.default.createElement(react_1.default.Fragment, null))), document.querySelector('.cesium-viewer')));
+    }, [
+        baseMaps,
+        locale,
+        mapViewRef,
+        projection,
+        sceneModes,
+        showMousePosition,
+        showScale,
+        isLegendsSidebarOpen,
+    ]);
+    return (react_1.default.createElement(resium_1.Viewer, __assign({ className: "viewer", full: true, ref: ref }, viewerProps),
         react_1.default.createElement(MapViewProvider, { value: mapViewRef },
+            react_1.default.createElement(map_legend_1.MapLegendSidebar, { title: (_a = props.legends) === null || _a === void 0 ? void 0 : _a.title, isOpen: isLegendsSidebarOpen, toggleSidebar: function () {
+                    return setIsLegendsSidebarOpen(!isLegendsSidebarOpen);
+                }, noLegendsText: (_b = props.legends) === null || _b === void 0 ? void 0 : _b.emptyText, legends: (_d = (_c = props.legends) === null || _c === void 0 ? void 0 : _c.legendsList) !== null && _d !== void 0 ? _d : legendsList, actionsTexts: (_e = props.legends) === null || _e === void 0 ? void 0 : _e.actionsTexts }),
             props.children,
-            react_1.default.createElement(box_1.Box, { className: "sideToolsContainer" },
-                react_1.default.createElement(settings_1.CesiumSettings, { sceneModes: sceneModes, baseMaps: baseMaps, locale: locale })),
-            react_1.default.createElement(box_1.Box, { className: "toolsContainer" },
-                showMousePosition === true ? (react_1.default.createElement(coordinates_tracker_tool_1.CoordinatesTrackerTool, { projection: projection })) : (react_1.default.createElement(react_1.default.Fragment, null)),
-                showScale === true ? react_1.default.createElement(scale_tracker_tool_1.ScaleTrackerTool, { locale: locale }) : react_1.default.createElement(react_1.default.Fragment, null)),
+            bindCustomToolsToViewer(),
             props.imageryContextMenu &&
                 showImageryMenu &&
                 imageryMenuPosition &&
                 react_1.default.cloneElement(props.imageryContextMenu, {
-                    data: (_a = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _a === void 0 ? void 0 : _a.findLayerByPOI(imageryMenuPosition.x, imageryMenuPosition.y),
+                    data: (_f = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _f === void 0 ? void 0 : _f.findLayerByPOI(imageryMenuPosition.x, imageryMenuPosition.y),
                     position: {
                         x: imageryMenuPosition.x,
                         y: imageryMenuPosition.y,
                     },
-                    style: getImageryMenuStyle(imageryMenuPosition.x, imageryMenuPosition.y, (_c = (_b = props.imageryContextMenuSize) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : DEFAULT_WIDTH, (_e = (_d = props.imageryContextMenuSize) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : DEFAULT_HEIGHT, (_g = (_f = props.imageryContextMenuSize) === null || _f === void 0 ? void 0 : _f.dynamicHeightIncrement) !== null && _g !== void 0 ? _g : DEFAULT_DYNAMIC_HEIGHT_INCREMENT),
-                    size: (_h = props.imageryContextMenuSize) !== null && _h !== void 0 ? _h : {
+                    style: getImageryMenuStyle(imageryMenuPosition.x, imageryMenuPosition.y, (_h = (_g = props.imageryContextMenuSize) === null || _g === void 0 ? void 0 : _g.width) !== null && _h !== void 0 ? _h : DEFAULT_WIDTH, (_k = (_j = props.imageryContextMenuSize) === null || _j === void 0 ? void 0 : _j.height) !== null && _k !== void 0 ? _k : DEFAULT_HEIGHT, (_m = (_l = props.imageryContextMenuSize) === null || _l === void 0 ? void 0 : _l.dynamicHeightIncrement) !== null && _m !== void 0 ? _m : DEFAULT_DYNAMIC_HEIGHT_INCREMENT),
+                    size: (_o = props.imageryContextMenuSize) !== null && _o !== void 0 ? _o : {
                         height: DEFAULT_HEIGHT,
                         width: DEFAULT_WIDTH,
                     },

package/dist/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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@here/quantized-mesh-decoder": "^1.2.8",
-    "@map-colonies/react-core": "^3.3.2",
+    "@map-colonies/react-core": "^3.3.3",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/pickers": "^3.2.10",
@@ -93,7 +93,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "52e983d1180b9fc19719b68e4bbc8745cf5d4581",
+  "gitHead": "fc727564af113a9fbfc599f1c7720dce840e8e83",
   "jest": {
     "coverageReporters": [
       "text",

package/src/lib/cesium-map/layers/imagery.layer.tsx

@@ -18,13 +18,18 @@ export const CesiumImageryLayer: React.FC<RCesiumImageryLayerProps> = (
   useLayoutEffect(() => {
     mapViewer.layersManager?.addMetaToLayer(
       meta,
-      (layer: ImageryLayer, idx: number): boolean => {
-        if (meta !== undefined) {
-          // eslint-disable-next-line
-          return (layer as any)._imageryProvider._resource._url === meta.url;
-        }
-        return false;
-      }
+      /* eslint-disable */
+      meta.searchLayerPredicate ??
+        ((layer: ImageryLayer, idx: number): boolean => {
+          if (meta !== undefined) {
+            return (
+              (layer as any)._imageryProvider._resource._url ===
+              meta.options.url
+            );
+          }
+          return false;
+        })
+      /* eslint-enable */
     );
   }, [meta, mapViewer]);
 

package/src/lib/cesium-map/layers-manager.ts

@@ -4,6 +4,7 @@ import {
   UrlTemplateImageryProvider,
   WebMapServiceImageryProvider,
   WebMapTileServiceImageryProvider,
+  Event,
 } from 'cesium';
 import { get } from 'lodash';
 import { Feature, Point, Polygon } from 'geojson';
@@ -17,6 +18,7 @@ import {
 import { CesiumViewer } from './map';
 import { IBaseMap } from './settings/settings';
 import { pointToGeoJSON } from './tools/geojson/point.geojson';
+import { IMapLegend } from './map-legend';
 
 const INC = 1;
 const DEC = -1;
@@ -48,15 +50,38 @@ export interface IVectorLayer {
   url: string;
 }
 
+export type LegendExtractor = (
+  layers: (any & {
+    meta: any;
+  })[]
+) => IMapLegend[];
 class LayerManager {
   public mapViewer: CesiumViewer;
 
   private readonly layers: ICesiumImageryLayer[];
-
-  public constructor(mapViewer: CesiumViewer) {
+  public legendsList: IMapLegend[];
+  public layerUpdated: Event;
+  private readonly legendsExtractor?: LegendExtractor;
+
+  public constructor(
+    mapViewer: CesiumViewer,
+    legendsExtractor?: LegendExtractor,
+    onLayersUpdate?: () => void
+  ) {
     this.mapViewer = mapViewer;
     // eslint-disable-next-line
     this.layers = (this.mapViewer.imageryLayers as any)._layers;
+    this.legendsList = [];
+    this.legendsExtractor = legendsExtractor;
+    this.layerUpdated = new Event();
+    if (onLayersUpdate) {
+      this.layerUpdated.addEventListener(onLayersUpdate, this);
+    }
+
+    this.mapViewer.imageryLayers.layerRemoved.addEventListener(() => {
+      this.setLegends();
+      this.layerUpdated.raiseEvent();
+    });
   }
 
   /* eslint-disable */
@@ -67,6 +92,8 @@ class LayerManager {
     const layer = this.layers.find(layerPredicate);
     if (layer) {
       layer.meta = meta;
+      this.setLegends();
+      this.layerUpdated.raiseEvent();
     }
   }
   /* eslint-enable */
@@ -287,6 +314,12 @@ class LayerManager {
     });
   }
 
+  private setLegends(): void {
+    if (typeof this.legendsExtractor !== 'undefined') {
+      this.legendsList = this.legendsExtractor(this.layers);
+    }
+  }
+
   private getBaseLayersCount(): number {
     const baseLayers = this.layers.filter((layer) => {
       const parentId = get(layer.meta, 'parentBasetMapId') as string;

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

@@ -0,0 +1,135 @@
+.mapLegendSidebarContainer {
+  width: 340px;
+  height: 100%;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 16px;
+}
+
+/* Disable drawer animation */
+
+.mapLegendSidebarContainer.mdc-drawer--animate {
+  transform: translateX(0) !important;
+  transition: none !important;
+}
+
+.mapLegendSidebarContainer.mdc-drawer--dismissible {
+  position: relative;
+}
+
+div.MuiPaper-root {
+  transition: none !important;
+}
+
+.mapLegendCloseBtn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  padding: 20px;
+  font-size: 24px;
+}
+
+body[dir='rtl'] .mapLegendCloseBtn {
+  right: unset;
+  left: 0;
+}
+
+.mapLegendToggleContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mapLegendIcon {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.sidebarHeaderContainer {
+  text-align: center;
+  margin-top: 40px;
+}
+
+.sidebarTitle {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.mapLegend {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 10px 14px;
+}
+
+.layerNameContainer {
+  width: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.layerName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.legendImg {
+  width: 90%;
+  height: 150px;
+  border: 1px solid black;
+  border-radius: 5px;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.legendActionsContainer {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+}
+
+.legendAction:not(:last-child)::after {
+  content: '|';
+  margin: 0px 4px;
+}
+
+.mapLegendsList {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0px;
+  width: 100%;
+  height: 90%;
+}
+
+.legendAction {
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: all 0.1s ease-in-out;
+  width: max-content;
+}
+
+.legendAction:hover {
+  filter: brightness(1.2);
+}
+
+.noLegendsContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.noLegendsMsg {
+  text-align: center;
+}

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

@@ -0,0 +1,91 @@
+import { Tooltip } from '@map-colonies/react-core';
+import React, { useCallback } from 'react';
+import { Box } from '../../box';
+import './MapLegend.css';
+
+export interface IMapLegend {
+  layer?: string;
+  legendDoc?: string;
+  legendImg?: string;
+  legend?: Record<string, unknown>[];
+}
+interface MapLegendProps {
+  legend: IMapLegend;
+  docText?: string;
+  imgText?: string;
+}
+
+export const MapLegend: React.FC<MapLegendProps> = ({
+  legend: { legendImg, legendDoc, layer },
+  docText,
+  imgText,
+}) => {
+  const handleLegendImgOpen = useCallback(() => {
+    // Open image in a new tab.
+    window.open(legendImg, '_blank');
+  }, [legendImg]);
+
+  const handleLegendDocOpen = useCallback(() => {
+    // Open doc in a new tab.
+    window.open(legendDoc, '_blank');
+  }, [legendDoc]);
+
+  const renderLayerName = useCallback(() => {
+    const MAX_LAYER_NAME_LENGTH = 15;
+
+    const layerNameContainer = (
+      <Box className="layerNameContainer">
+        <h3
+          style={{ maxWidth: `${MAX_LAYER_NAME_LENGTH}ch` }}
+          className="layerName"
+        >
+          {layer}
+        </h3>
+      </Box>
+    );
+
+    if ((layer ?? '').length > MAX_LAYER_NAME_LENGTH) {
+      return <Tooltip content={layer}>{layerNameContainer}</Tooltip>;
+    }
+
+    return layerNameContainer;
+  }, [layer]);
+
+  const renderLinks = useCallback(() => {
+    return [
+      typeof legendImg === 'string' && (
+        <a
+          className="legendAction"
+          href={legendImg}
+          target="_blank"
+          referrerPolicy="noreferrer"
+        >
+          {imgText}
+        </a>
+      ),
+      typeof legendDoc === 'string' && (
+        <a
+          className="legendAction"
+          href={legendDoc}
+          target="_blank"
+          referrerPolicy="noreferrer"
+        >
+          {docText}
+        </a>
+      ),
+    ];
+  }, [legendImg, imgText, legendDoc, docText]);
+
+  return (
+    <Box className="mapLegend">
+      {renderLayerName()}
+      <img
+        alt="Map Legend"
+        className="legendImg"
+        src={legendImg}
+        onClick={handleLegendImgOpen}
+      />
+      <Box className="legendActionsContainer">{renderLinks()}</Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { Box } from '../../box';
+import { IMapLegend, MapLegend } from './MapLegend';
+import './MapLegend.css';
+
+interface MapLegendListProps {
+  legends: IMapLegend[];
+  actionsTexts: {
+    docText: string;
+    imgText: string;
+  };
+  noLegendsText: string;
+}
+
+export const MapLegendList: React.FC<MapLegendListProps> = ({
+  legends,
+  actionsTexts: { docText, imgText },
+  noLegendsText,
+}) => {
+  const handleNoLegends = useCallback(() => {
+    return (
+      <Box className="noLegendsContainer">
+        <h2 className="noLegendsMsg">{noLegendsText}</h2>
+      </Box>
+    );
+  }, [noLegendsText]);
+
+  const renderList = useCallback(() => {
+    if (!legends.length) {
+      return handleNoLegends();
+    }
+
+    return legends.map((legend, i) => {
+      return (
+        <MapLegend
+          key={`${legend.layer as string}_${i}`}
+          legend={legend}
+          docText={docText}
+          imgText={imgText}
+        />
+      );
+    });
+  }, [legends]);
+
+  return <Box className="mapLegendsList">{renderList()}</Box>;
+};

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

@@ -0,0 +1,55 @@
+import {
+  Icon,
+  Drawer,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerContent,
+} from '@map-colonies/react-core';
+import React from 'react';
+import { Box } from '../../box';
+import { IMapLegend } from './MapLegend';
+import './MapLegend.css';
+import { MapLegendList } from './MapLegendList';
+
+interface MapLegendSidebarProps {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+  title?: string;
+  noLegendsText?: string;
+  legends?: IMapLegend[];
+  actionsTexts?: { docText: string; imgText: string };
+}
+
+export const MapLegendSidebar: React.FC<MapLegendSidebarProps> = ({
+  isOpen,
+  toggleSidebar,
+  title = 'Map Legends',
+  noLegendsText = 'No legends to display...',
+  legends = [],
+  actionsTexts = { docText: 'Docs', imgText: 'View Image' },
+}) => {
+  return isOpen ? (
+    <Drawer
+      className="mapLegendSidebarContainer"
+      modal={false}
+      dismissible={true}
+      open={isOpen}
+    >
+      <DrawerHeader className="sidebarHeaderContainer">
+        <DrawerTitle className="sidebarTitle">{title}</DrawerTitle>
+      </DrawerHeader>
+      <DrawerContent className="sidebarContent">
+        <Icon
+          onClick={toggleSidebar}
+          className="mapLegendCloseBtn"
+          icon={{ icon: 'close', size: 'small' }}
+        />
+        <MapLegendList
+          noLegendsText={noLegendsText}
+          legends={legends}
+          actionsTexts={actionsTexts}
+        />
+      </DrawerContent>
+    </Drawer>
+  ) : null;
+};

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Icon } from '@map-colonies/react-core';
+import { Box } from '../../box';
+import './MapLegend.css';
+
+interface MapLegendProps {
+  onClick: () => void;
+}
+
+const legendIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    enable-background="new 0 0 24 24"
+    height="24"
+    width="24"
+    viewBox="0 0 612 612"
+  >
+    <g xmlns="http://www.w3.org/2000/svg">
+      <path d="M322.4,173.9l-129,16.2l-4.6,21.4l25.3,4.7c16.5,3.9,19.8,9.9,16.2,26.4l-41.5,195.3c-10.9,50.5,5.9,74.3,45.5,74.3   c30.7,0,66.3-14.2,82.5-33.6l4.9-23.4c-11.3,9.9-27.7,13.9-38.6,13.9c-15.5,0-21.1-10.9-17.1-30L322.4,173.9z" />
+      <circle cx="270.1" cy="56.3" r="56.3" />
+    </g>
+  </svg>
+);
+
+export const MapLegendToggle: React.FC<MapLegendProps> = ({ onClick }) => {
+  return (
+    <Box onClick={onClick} className="mapLegendToggleContainer">
+      <Icon icon={legendIcon} className="mapLegendIcon" />
+    </Box>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from './MapLegendToggle';
+export * from './MapLegendSidebar';
+export type { IMapLegend } from './MapLegend';