@map-colonies/react-components 3.15.1 → 4.0.1

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

@@ -1,92 +0,0 @@
-import React, { useCallback } from 'react';
-import { Tooltip } from '@map-colonies/react-core';
-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"
-          rel="noreferrer"
-        >
-          {imgText}
-        </a>
-      ),
-      typeof legendDoc === 'string' && (
-        <a
-          className="legendAction"
-          href={legendDoc}
-          target="_blank"
-          rel="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

@@ -1,47 +0,0 @@
-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

@@ -1,55 +0,0 @@
-import React from 'react';
-import {
-  Icon,
-  Drawer,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerContent,
-} from '@map-colonies/react-core';
-import { IMapLegend } from './MapLegend';
-import { MapLegendList } from './MapLegendList';
-
-import './MapLegend.css';
-
-interface MapLegendSidebarProps {
-  isOpen: boolean;
-  toggleSidebar: () => void;
-  title?: string;
-  noLegendsText?: string;
-  actionsTexts?: { docText: string; imgText: string };
-  legends?: IMapLegend[];
-}
-
-export const MapLegendSidebar: React.FC<MapLegendSidebarProps> = ({
-  isOpen,
-  toggleSidebar,
-  title = 'Map Legends',
-  noLegendsText = 'No legends to display...',
-  actionsTexts = { docText: 'Docs', imgText: 'View Image' },
-  legends = [],
-}) => {
-  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

@@ -1,31 +0,0 @@
-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

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

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

@@ -1,201 +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 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

@@ -1,59 +0,0 @@
-.cesium-widget-credits {
-  display: none !important;
-}
-
-.cesium-viewer-fullscreenContainer {
-  bottom: 8px;
-  right: 8px;
-  left: unset;
-}
-
-body[dir='rtl'] .cesium-viewer-fullscreenContainer {
-  left: 8px;
-  right: unset;
-}
-
-body[dir='rtl'] .cesium-viewer-toolbar {
-  left: 5px;
-  right: unset;
-}
-
-.cesium-button.cesium-fullscreenButton {
-  border-radius: 14%;
-}
-
-.toolsContainer {
-  color: var(--mdc-theme-on-surface);
-  display: flex;
-  gap: 8px;
-  z-index: 2000;
-  position: absolute;
-  bottom: 12px;
-  right: 40px;
-  opacity: 0.7;
-}
-
-body[dir='rtl'] .toolsContainer {
-  left: 40px;
-  right: unset;
-}
-
-.sideToolsContainer {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  z-index: 2000;
-  position: absolute;
-  top: 12px;
-  right: 40px;
-}
-
-body[dir='rtl'] .sideToolsContainer {
-  left: 40px;
-  right: unset;
-}
-
-.viewer {
-  display: flex;
-  flex-direction: row;
-}

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

@@ -1,144 +0,0 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap, CesiumMapProps } from './map';
-import { CesiumSceneMode } from './map.types';
-import { Proj } from '.';
-
-export default {
-  title: 'Cesium Map',
-  component: CesiumMap,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-export const BaseMap: Story = (args: CesiumMapProps) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}></CesiumMap>
-  </div>
-);
-
-export const ZoomedMap: Story = (args: CesiumMapProps) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}></CesiumMap>
-  </div>
-);
-
-ZoomedMap.argTypes = {
-  center: {
-    defaultValue: [34.9578094, 32.8178637],
-  },
-  zoom: {
-    defaultValue: 3,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-
-export const MapWithProjection: Story = (args: CesiumMapProps) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}></CesiumMap>
-  </div>
-);
-
-MapWithProjection.argTypes = {
-  center: {
-    defaultValue: [34.9578094, 32.8178637],
-  },
-  projection: {
-    defaultValue: Proj.WGS84,
-    control: {
-      type: 'radio',
-      options: [Proj.WEB_MERCATOR, Proj.WGS84],
-    },
-  },
-  zoom: {
-    defaultValue: 3,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-
-export const Map2DWithProjection: Story = (args: CesiumMapProps) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}></CesiumMap>
-  </div>
-);
-
-Map2DWithProjection.argTypes = {
-  center: {
-    defaultValue: [34.9578094, 32.8178637],
-  },
-  sceneMode: {
-    defaultValue: CesiumSceneMode.SCENE2D,
-  },
-  projection: {
-    defaultValue: Proj.WGS84,
-    control: {
-      type: 'radio',
-      options: [Proj.WEB_MERCATOR, Proj.WGS84],
-    },
-  },
-  zoom: {
-    defaultValue: 8,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-Map2DWithProjection.storyName = '2D Map With Projection';
-
-export const LocalizedMap: Story = (args: CesiumMapProps) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}></CesiumMap>
-  </div>
-);
-
-LocalizedMap.argTypes = {
-  center: {
-    defaultValue: [34.9578094, 32.8178637],
-  },
-  locale: {
-    /* eslint-disable @typescript-eslint/naming-convention */
-    defaultValue: {
-      METERS_UNIT: "מ'",
-      KILOMETERS_UNIT: "קמ'",
-      MAP_SETTINGS_DIALOG_TITLE: 'הגדרות מפה',
-      MAP_SETTINGS_SCENE_MODE_TITLE: 'תצורה',
-      MAP_SETTINGS_BASE_MAP_TITLE: 'מפות בסיס',
-      MAP_SETTINGS_OK_BUTTON_TEXT: 'אישור',
-      ZOOM_LABEL: 'זום',
-    },
-    /* eslint-enable @typescript-eslint/naming-convention */
-  },
-  projection: {
-    defaultValue: Proj.WGS84,
-    control: {
-      type: 'radio',
-      options: [Proj.WEB_MERCATOR, Proj.WGS84],
-    },
-  },
-  zoom: {
-    defaultValue: 3,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-LocalizedMap.storyName = 'Localized Map (ctrl+F5)';