@map-colonies/react-components 3.15.0 → 4.0.1

package/src/lib/cesium-map/settings/scene-modes.tsx

@@ -1,100 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Icon } from '@map-colonies/react-core';
-
-import { CesiumSceneMode, CesiumSceneModeEnum } from '../map.types';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-import './scene-modes.css';
-
-const NOT_FOUND = -1;
-
-export interface RCesiumSceneModesProps {
-  sceneModes: CesiumSceneModeEnum[];
-}
-
-export const CesiumSceneModes: React.FC<RCesiumSceneModesProps> = (props) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-  const [currentSceneMode, setCurrentSceneMode] = useState<
-    CesiumSceneModeEnum
-  >();
-  const { sceneModes } = props;
-
-  const isInMapViews = (sceneMode: CesiumSceneModeEnum): boolean => {
-    return sceneModes.findIndex((item) => item === sceneMode) > NOT_FOUND;
-  };
-
-  useEffect(() => {
-    setCurrentSceneMode(mapViewer.scene.mode);
-  }, []);
-
-  return (
-    <>
-      {/* 3D */}
-      {isInMapViews(CesiumSceneMode.SCENE3D) && (
-        <Icon
-          icon={
-            <div
-              className={`mapViewIcon ${
-                currentSceneMode === CesiumSceneMode.SCENE3D
-                  ? 'mapViewCurrent'
-                  : ''
-              }`}
-            >
-              <svg width="100%" height="100%" viewBox="0 0 64 64">
-                <path d="m 32.401392,4.9330437 c -7.087603,0 -14.096095,2.884602 -19.10793,7.8946843 -5.0118352,5.010083 -7.9296167,11.987468 -7.9296167,19.072999 0,7.085531 2.9177815,14.097848 7.9296167,19.107931 4.837653,4.835961 11.541408,7.631372 18.374354,7.82482 0.05712,0.01231 0.454119,0.139729 0.454119,0.139729 l 0.03493,-0.104797 c 0.08246,7.84e-4 0.162033,0.03493 0.244525,0.03493 0.08304,0 0.161515,-0.03414 0.244526,-0.03493 l 0.03493,0.104797 c 0,0 0.309474,-0.129487 0.349323,-0.139729 6.867765,-0.168094 13.582903,-2.965206 18.444218,-7.82482 2.558195,-2.5573 4.551081,-5.638134 5.903547,-8.977584 1.297191,-3.202966 2.02607,-6.661489 2.02607,-10.130347 0,-6.237309 -2.366261,-12.31219 -6.322734,-17.116794 -0.0034,-0.02316 0.0049,-0.04488 0,-0.06986 -0.01733,-0.08745 -0.104529,-0.278855 -0.104797,-0.279458 -5.31e-4,-0.0012 -0.522988,-0.628147 -0.523984,-0.62878         -3.47e-4,-2.2e-4 -0.133444,-0.03532 -0.244525,-0.06987 C 51.944299,13.447603 51.751076,13.104317 51.474391,12.827728 46.462556,7.8176457 39.488996,4.9330437 32.401392,4.9330437 z m -2.130866,3.5281554 0.104797,9.6762289 c -4.111695,-0.08361 -7.109829,-0.423664 -9.257041,-0.943171 1.198093,-2.269271 2.524531,-4.124404 3.91241,-5.414496 2.167498,-2.0147811 3.950145,-2.8540169 5.239834,-3.3185619 z m 2.794579,0 c 1.280302,0.4754953 3.022186,1.3285948 5.065173,3.2486979 1.424667,1.338973 2.788862,3.303645 3.982275,5.728886 -2.29082,0.403367 -5.381258,0.621049 -8.942651,0.698645 L 33.065105,8.4611991 z m 5.728886,0.2445256 c 4.004072,1.1230822 7.793098,3.1481363 10.724195,6.0782083 0.03468,0.03466 0.07033,0.06991 0.104797,0.104797 -0.45375,0.313891 -0.923054,0.663002 -1.956205,1.082899 -0.647388,0.263114 -1.906242,0.477396 -2.829511,0.733577 -1.382296,-2.988132         -3.027146,-5.368585 -4.785716,-7.0213781 -0.422866,-0.397432 -0.835818,-0.6453247 -1.25756,-0.9781032 z m -15.33525,0.7685092 c -0.106753,0.09503 -0.207753,0.145402 -0.31439,0.244526 -1.684973,1.5662541 -3.298068,3.8232211 -4.680919,6.5672591 -0.343797,-0.14942 -1.035052,-0.273198 -1.292493,-0.419186 -0.956528,-0.542427 -1.362964,-1.022024 -1.537018,-1.292493 -0.0241,-0.03745 -0.01868,-0.0401 -0.03493,-0.06986 2.250095,-2.163342 4.948824,-3.869984 7.859752,-5.0302421 z m -9.641296,7.0912431 c 0.464973,0.571618 0.937729,1.169056 1.956205,1.746612 0.349907,0.198425 1.107143,0.335404 1.537018,0.523983 -1.20166,3.172984 -1.998037,7.051901 -2.165798,11.772162 C 14.256557,30.361384 12.934823,30.161483 12.280427,29.90959 10.644437,29.279855 9.6888882,28.674891 9.1714586,28.267775 8.6540289,27.860658 8.6474751,27.778724 8.6474751,27.778724 l -0.069864,0.03493 C 9.3100294,23.691285         11.163248,19.798527 13.817445,16.565477 z m 37.552149,0.523984 c 2.548924,3.289983 4.265057,7.202594 4.890513,11.318043 -0.650428,0.410896 -1.756876,1.001936 -3.563088,1.606882 -1.171552,0.392383 -3.163859,0.759153 -4.960377,1.117832 -0.04367,-4.752703 -0.784809,-8.591423 -1.88634,-11.807094 0.917574,-0.263678 2.170552,-0.486495 2.864443,-0.76851 1.274693,-0.518066 2.003942,-1.001558 2.654849,-1.467153 z m -31.439008,2.619917 c 2.487341,0.672766 5.775813,1.137775 10.479669,1.222628 l 0.104797,10.689263 0,0.03493 0,0.733577 c -5.435005,-0.09059 -9.512219,-0.519044 -12.610536,-1.117831 0.106127,-4.776683 0.879334,-8.55791 2.02607,-11.562569 z m 23.264866,0.31439 c 1.073459,3.067541 1.833795,6.821314 1.816476,11.702298 -3.054474,0.423245 -7.062018,0.648559 -11.702298,0.698644 l 0,-0.838373 -0.104796,-10.654331 c 4.082416,-0.0864 7.404468,-0.403886 9.990618,-0.908238 z         M 8.2632205,30.922625 c 0.7558676,0.510548 1.5529563,1.013339 3.0041715,1.57195 0.937518,0.360875 2.612202,0.647642 3.91241,0.978102 0.112814,3.85566 0.703989,7.107756 1.606883,9.920754 -1.147172,-0.324262 -2.644553,-0.640648 -3.423359,-0.978102 -1.516688,-0.657177 -2.386627,-1.287332 -2.864443,-1.71168 -0.477816,-0.424347 -0.489051,-0.489051 -0.489051,-0.489051 L 9.8002387,40.319395 C 8.791691,37.621767 8.1584238,34.769583 8.1584238,31.900727 c 0,-0.330153 0.090589,-0.648169 0.1047967,-0.978102 z m 48.2763445,0.419186 c 0.0047,0.188973 0.06986,0.36991 0.06986,0.558916 0,2.938869 -0.620228,5.873558 -1.676747,8.628261 -0.07435,0.07583 -0.06552,0.07411 -0.454119,0.349323 -0.606965,0.429857 -1.631665,1.042044 -3.318562,1.676747 -1.208528,0.454713 -3.204964,0.850894 -5.135038,1.25756 0.84593,-2.765726 1.41808,-6.005357 1.606883,-9.815957 2.232369,-0.413371 4.483758,-0.840201         5.938479,-1.327425 1.410632,-0.472457 2.153108,-0.89469 2.96924,-1.327425 z m -38.530252,2.864443 c 3.208141,0.56697 7.372279,0.898588 12.575603,0.978103 l 0.174662,9.885821 c -4.392517,-0.06139 -8.106722,-0.320566 -10.863925,-0.803441 -1.051954,-2.664695 -1.692909,-6.043794 -1.88634,-10.060483 z m 26.793022,0.31439 c -0.246298,3.923551 -0.877762,7.263679 -1.816476,9.885822 -2.561957,0.361954 -5.766249,0.560708 -9.431703,0.62878 l -0.174661,-9.815957 c 4.491734,-0.04969 8.334769,-0.293032 11.42284,-0.698645 z M 12.035901,44.860585 c 0.09977,0.04523 0.105535,0.09465 0.209594,0.139729 1.337656,0.579602 3.441099,1.058072 5.589157,1.537018 1.545042,3.399208 3.548524,5.969402 5.589157,7.789888 -3.034411,-1.215537 -5.871615,-3.007978 -8.174142,-5.309699 -1.245911,-1.245475 -2.271794,-2.662961 -3.213766,-4.156936 z m 40.69605,0 c -0.941972,1.493975 -1.967855,2.911461         -3.213765,4.156936 -2.74253,2.741571 -6.244106,4.696717 -9.955686,5.868615 0.261347,-0.241079 0.507495,-0.394491 0.768509,-0.663713 1.674841,-1.727516 3.320792,-4.181056 4.645987,-7.265904 2.962447,-0.503021 5.408965,-1.122293 7.161107,-1.781544 0.284034,-0.106865 0.337297,-0.207323 0.593848,-0.31439 z m -31.404076,2.305527 c 2.645807,0.376448 5.701178,0.649995 9.466635,0.698645 l 0.139729,7.789888 c -1.38739,-0.480844 -3.316218,-1.29837 -5.659022,-3.388427 -1.388822,-1.238993 -2.743668,-3.0113 -3.947342,-5.100106 z m 20.365491,0.104797 c -1.04872,2.041937 -2.174337,3.779068 -3.353494,4.995309 -1.853177,1.911459 -3.425515,2.82679 -4.611055,3.353494 l -0.139729,-7.789887 c 3.13091,-0.05714 5.728238,-0.278725 8.104278,-0.558916 z"></path>
-              </svg>
-            </div>
-          }
-          onClick={(): void => {
-            mapViewer.scene.morphTo3D();
-            setCurrentSceneMode(CesiumSceneMode.SCENE3D);
-          }}
-        />
-      )}
-      {/* 2D */}
-      {isInMapViews(CesiumSceneMode.SCENE2D) && (
-        <Icon
-          icon={
-            <div
-              className={`mapViewIcon ${
-                currentSceneMode === CesiumSceneMode.SCENE2D
-                  ? 'mapViewCurrent'
-                  : ''
-              }`}
-            >
-              <svg width="100%" height="100%" viewBox="0 0 64 64">
-                <path d="m 2.9825053,17.550598 0,1.368113 0,26.267766 0,1.368113 1.36811,0 54.9981397,0 1.36811,0 0,-1.368113 0,-26.267766 0,-1.368113 -1.36811,0 -54.9981397,0 -1.36811,0 z m 2.73623,2.736226 10.3292497,0 0,10.466063 -10.3292497,0 0,-10.466063 z m 13.0654697,0 11.69737,0 0,10.466063 -11.69737,0 0,-10.466063 z m 14.43359,0 11.69737,0 0,10.466063 -11.69737,0 0,-10.466063 z m 14.43359,0 10.32926,0 0,10.466063 -10.32926,0 0,-10.466063 z m -41.9326497,13.202288 10.3292497,0 0,10.329252 -10.3292497,0 0,-10.329252 z m 13.0654697,0 11.69737,0 0,10.329252 -11.69737,0 0,-10.329252 z m 14.43359,0 11.69737,0 0,10.329252 -11.69737,0 0,-10.329252 z m 14.43359,0 10.32926,0 0,10.329252 -10.32926,0 0,-10.329252 z"></path>
-              </svg>
-            </div>
-          }
-          onClick={(): void => {
-            mapViewer.scene.morphTo2D();
-            setCurrentSceneMode(CesiumSceneMode.SCENE2D);
-          }}
-        />
-      )}
-      {/* 2.5D COLOMBUS */}
-      {isInMapViews(CesiumSceneMode.COLUMBUS_VIEW) && (
-        <Icon
-          icon={
-            <div
-              className={`mapViewIcon ${
-                currentSceneMode === CesiumSceneMode.COLUMBUS_VIEW
-                  ? 'mapViewCurrent'
-                  : ''
-              }`}
-            >
-              <svg width="100%" height="100%" viewBox="0 0 64 64">
-                <path d="m 14.723969,17.675598 -0.340489,0.817175 -11.1680536,26.183638 -0.817175,1.872692 2.076986,0 54.7506996,0 2.07698,0 -0.81717,-1.872692 -11.16805,-26.183638 -0.34049,-0.817175 -0.91933,0 -32.414586,0 -0.919322,0 z m 1.838643,2.723916 6.196908,0 -2.928209,10.418977 -7.729111,0 4.460412,-10.418977 z m 9.02297,0 4.903049,0 0,10.418977 -7.831258,0 2.928209,-10.418977 z m 7.626964,0 5.584031,0 2.62176,10.418977 -8.205791,0 0,-10.418977 z m 8.410081,0 5.51593,0 4.46042,10.418977 -7.38863,0 -2.58772,-10.418977 z m -30.678091,13.142892 8.103649,0 -2.89416,10.282782 -9.6018026,0 4.3923136,-10.282782 z m 10.929711,0 8.614384,0 0,10.282782 -11.508544,0 2.89416,-10.282782 z m 11.338299,0 8.852721,0 2.58772,10.282782 -11.440441,0 0,-10.282782 z m 11.678781,0 7.86531,0 4.39231,10.282782 -9.6699,0 -2.58772,-10.282782 z"></path>
-              </svg>
-            </div>
-          }
-          onClick={(): void => {
-            mapViewer.scene.morphToColumbusView();
-            setCurrentSceneMode(CesiumSceneMode.COLUMBUS_VIEW);
-          }}
-        />
-      )}
-    </>
-  );
-};

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

@@ -1,52 +0,0 @@
-.mapScenesContainer {
-  display: flex;
-  gap: 8px;
-}
-
-.settingsIconContainer,
-.mapLegendToggleContainer {
-  fill: #fff;
-  width: 40px;
-  height: 40px;
-  background: #303336;
-  border: 1px solid #444;
-  border-radius: 4px;
-}
-
-.settingsIconContainer:hover,
-.mapLegendToggleContainer:hover {
-  background: #48b;
-  border-color: #aef;
-}
-
-.baseMapsContainer {
-  margin-top: 12px;
-  min-height: 58%;
-}
-
-.settingsDialogPortal {
-  transform: translateZ(0);
-  height: calc(100vh - 220px);
-  max-height: 460px;
-  width: 280px;
-  position: absolute;
-  top: 40px;
-  right: 80px;
-}
-
-.settingsDialogPortal .mdc-dialog__container {
-  align-items: unset;
-}
-
-.settingsDialogPortal .mdc-dialog .mdc-dialog__surface {
-  max-height: unset;
-}
-
-body[dir='rtl'] .settingsDialogPortal {
-  left: 80px;
-  right: unset;
-}
-
-.sectionLabel {
-  margin-block-end: 0.5em;
-}

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

@@ -1,186 +0,0 @@
-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 MapWithSettings: 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.SCENE2D,
-          CesiumSceneMode.COLUMBUS_VIEW,
-        ]}
-        baseMaps={BASE_MAPS}
-      >
-        <CesiumXYZLayer options={optionsXYZSanDiego} />
-      </CesiumMap>
-    </div>
-  );
-};
-MapWithSettings.storyName = 'Map Settings';

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

@@ -1,141 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  Icon,
-} from '@map-colonies/react-core';
-import { get } from 'lodash';
-import { Box } from '../../box';
-import { IRasterLayer, IVectorLayer } from '../layers-manager';
-import { CesiumSceneModeEnum } from '../map.types';
-import { CesiumSceneModes } from './scene-modes';
-import { CesiumBaseMaps } from './base-maps';
-import './settings.css';
-
-export interface IBaseMap {
-  id: string;
-  title?: string;
-  thumbnail?: string;
-  isCurrent?: boolean;
-  baseRasteLayers: IRasterLayer[];
-  baseVectorLayers: IVectorLayer[];
-}
-
-export interface IBaseMaps {
-  maps: IBaseMap[];
-}
-
-export interface RCesiumMapProps {
-  sceneModes: CesiumSceneModeEnum[];
-  baseMaps?: IBaseMaps;
-  locale?: { [key: string]: string };
-}
-
-const SETTINGS_SVG_ID = 'ic_settings_24px';
-
-export const CesiumSettings: React.FC<RCesiumMapProps> = (props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const { sceneModes, baseMaps, locale } = props;
-  const dialogPortalRef = useRef(null);
-
-  const dlgTitle = get(locale, 'MAP_SETTINGS_DIALOG_TITLE') ?? 'Map Settings';
-  const sceneModeTitle =
-    get(locale, 'MAP_SETTINGS_SCENE_MODE_TITLE') ?? 'Scene Mode';
-  const baseMapTitle = get(locale, 'MAP_SETTINGS_BASE_MAP_TITLE') ?? 'Base Map';
-  // const btnOkText = get(locale, 'MAP_SETTINGS_OK_BUTTON_TEXT') ?? 'Ok';
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent): void => {
-      /* eslint-disable */
-      const target: any = event.target;
-      const dlgPortalRef: any = get(dialogPortalRef, 'current');
-      if (
-        dlgPortalRef &&
-        !dlgPortalRef.contains(target) &&
-        target.id !== SETTINGS_SVG_ID &&
-        target.parentElement?.id !== SETTINGS_SVG_ID
-      ) {
-        document.removeEventListener('click', handleClickOutside, false);
-        setIsOpen(false);
-      }
-      /* eslint-enable */
-    };
-
-    document.addEventListener('click', handleClickOutside, false);
-
-    return (): void => {
-      document.removeEventListener('click', handleClickOutside, false);
-    };
-  });
-
-  return (
-    <>
-      <Icon
-        icon={
-          <div className="settingsIconContainer">
-            <svg
-              width="100%"
-              height="100%"
-              viewBox="0 0 24 24"
-              id={SETTINGS_SVG_ID}
-              x="288"
-              y="24"
-            >
-              <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
-            </svg>
-            {/* Layers ICON */}
-            {/* <svg width="100%" height="100%" viewBox="0 0 24 24">
-              <path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/>
-            </svg> */}
-          </div>
-        }
-        onClick={(): void => {
-          setIsOpen(!isOpen);
-        }}
-      />
-      {isOpen && (
-        <div
-          id="dialog-portal-example"
-          className="settingsDialogPortal"
-          ref={dialogPortalRef}
-        >
-          <Dialog
-            open={isOpen}
-            onClosed={(): void => {
-              setIsOpen(false);
-            }}
-          >
-            <DialogTitle>{dlgTitle}</DialogTitle>
-            <DialogContent>
-              <h4 className="sectionLabel">{sceneModeTitle}</h4>
-              <Box className="mapScenesContainer">
-                <CesiumSceneModes sceneModes={sceneModes}></CesiumSceneModes>
-              </Box>
-
-              <Box className="baseMapsContainer">
-                {baseMaps && (
-                  <>
-                    <h4 className="sectionLabel">{baseMapTitle}</h4>
-                    <CesiumBaseMaps baseMaps={baseMaps}></CesiumBaseMaps>
-                  </>
-                )}
-              </Box>
-
-              {/* <Button
-              raised
-              type="button"
-              style={{margin: 'auto 40%'}}
-              onClick={(): void => {
-                setIsOpen(false);
-              }}
-            >
-              {btnOkText}
-            </Button> */}
-            </DialogContent>
-          </Dialog>
-        </div>
-      )}
-    </>
-  );
-};