@map-colonies/react-components 3.12.2 → 3.12.3

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

@@ -1,171 +1,171 @@
-import React, { useLayoutEffect, useState } from 'react';
-import { Rectangle, Color } from 'cesium';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import bbox from '@turf/bbox';
-import { CesiumMap, CesiumMapProps, useCesiumMap } from '../map';
-import { CesiumSceneMode } from '../map.types';
-import { IRasterLayer, LayerType } from '../layers-manager';
-import { IBaseMaps } from '../settings/settings';
-import { CesiumXYZLayer } from './xyz.layer';
-
-export default {
-  title: 'Cesium Map/Layers/LayersRect',
-  component: CesiumMap,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '90%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const BASE_MAPS = {
-  maps: [
-    {
-      id: '3rd',
-      title: '3rd Map Title',
-      isCurrent: true,
-      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: [],
-    },
-  ],
-};
-
-const mapViewProps: CesiumMapProps = {
-  center: [34.811, 31.908],
-  zoom: 14,
-  imageryProvider: false,
-  sceneModes: [CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW],
-  baseMaps: BASE_MAPS as IBaseMaps,
-};
-
-const optionsRectXYZ = {
-  url:
-    'https://tiles.openaerialmap.org/5a831b4a2553e6000ce5ac80/0/d02ddc76-9c2e-4994-97d4-a623eb371456/{z}/{x}/{y}.png',
-  footprint: {
-    type: 'Polygon',
-    coordinates: [
-      [
-        [34.8043847068541, 31.9023297972932],
-        [34.8142791322292, 31.9023297972932],
-        [34.8142791322292, 31.9108796531516],
-        [34.8043847068541, 31.9108796531516],
-        [34.8043847068541, 31.9023297972932],
-      ],
-    ],
-  },
-};
-
-// Use Turf.js/bbox to calculate the bounding box from the supplied footprint.
-
-const childLayerRect = Rectangle.fromDegrees(...bbox(optionsRectXYZ.footprint));
-
-export const MapWithXYZLayersAndRect: Story = () => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...mapViewProps}>
-      <CesiumXYZLayer rectangle={childLayerRect} options={optionsRectXYZ} />
-    </CesiumMap>
-  </div>
-);
-
-MapWithXYZLayersAndRect.storyName = 'XYZ child layer with rect';
-
-export const MapWithSettings: Story = () => {
-  const layer = {
-    id: '2_raster_ext',
-    type: 'XYZ_LAYER' as LayerType,
-    opacity: 1,
-    zIndex: 0,
-    show: true,
-    options: {
-      url:
-        'https://tiles.openaerialmap.org/5a9f90c42553e6000ce5ad6c/0/eee1a570-128e-4947-9ffa-1e69c1efab7c/{z}/{x}/{y}.png',
-    },
-  };
-
-  return (
-    <div style={mapDivStyle}>
-      <CesiumMap {...mapViewProps}>
-        <LayerViewer layer={layer as IRasterLayer} />
-      </CesiumMap>
-    </div>
-  );
-};
-MapWithSettings.storyName = 'Layer manager rect';
-
-interface ILayerViewerProps {
-  layer: IRasterLayer;
-}
-
-const LayerViewer: React.FC<ILayerViewerProps> = (props) => {
-  const mapViewer = useCesiumMap();
-  const { layer } = props;
-
-  // Mockin footprint data on layer meta
-  const layerFootprint = {
-    type: 'Polygon',
-    coordinates: [
-      [
-        [34.8099445223518, 31.9061345394902],
-        [34.8200994167574, 31.9061345394902],
-        [34.8200994167574, 31.9106311613979],
-        [34.8099445223518, 31.9106311613979],
-        [34.8099445223518, 31.9061345394902],
-      ],
-    ],
-  };
-
-  useLayoutEffect(() => {
-    const layerManagerRect = Rectangle.fromDegrees(...bbox(layerFootprint));
-
-    layer.options.rectangle = layerManagerRect;
-
-    mapViewer.layersManager?.addRasterLayer(layer, 0, '');
-  }, [mapViewer, layerFootprint, layer]);
-  return <></>;
-};
+import React, { useLayoutEffect, useState } from 'react';
+import { Rectangle, Color } from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import bbox from '@turf/bbox';
+import { CesiumMap, CesiumMapProps, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { IRasterLayer, LayerType } from '../layers-manager';
+import { IBaseMaps } from '../settings/settings';
+import { CesiumXYZLayer } from './xyz.layer';
+
+export default {
+  title: 'Cesium Map/Layers/LayersRect',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '3rd',
+      title: '3rd Map Title',
+      isCurrent: true,
+      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: [],
+    },
+  ],
+};
+
+const mapViewProps: CesiumMapProps = {
+  center: [34.811, 31.908],
+  zoom: 14,
+  imageryProvider: false,
+  sceneModes: [CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW],
+  baseMaps: BASE_MAPS as IBaseMaps,
+};
+
+const optionsRectXYZ = {
+  url:
+    'https://tiles.openaerialmap.org/5a831b4a2553e6000ce5ac80/0/d02ddc76-9c2e-4994-97d4-a623eb371456/{z}/{x}/{y}.png',
+  footprint: {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [34.8043847068541, 31.9023297972932],
+        [34.8142791322292, 31.9023297972932],
+        [34.8142791322292, 31.9108796531516],
+        [34.8043847068541, 31.9108796531516],
+        [34.8043847068541, 31.9023297972932],
+      ],
+    ],
+  },
+};
+
+// Use Turf.js/bbox to calculate the bounding box from the supplied footprint.
+
+const childLayerRect = Rectangle.fromDegrees(...bbox(optionsRectXYZ.footprint));
+
+export const MapWithXYZLayersAndRect: Story = () => (
+  <div style={mapDivStyle}>
+    <CesiumMap {...mapViewProps}>
+      <CesiumXYZLayer rectangle={childLayerRect} options={optionsRectXYZ} />
+    </CesiumMap>
+  </div>
+);
+
+MapWithXYZLayersAndRect.storyName = 'XYZ child layer with rect';
+
+export const MapWithSettings: Story = () => {
+  const layer = {
+    id: '2_raster_ext',
+    type: 'XYZ_LAYER' as LayerType,
+    opacity: 1,
+    zIndex: 0,
+    show: true,
+    options: {
+      url:
+        'https://tiles.openaerialmap.org/5a9f90c42553e6000ce5ad6c/0/eee1a570-128e-4947-9ffa-1e69c1efab7c/{z}/{x}/{y}.png',
+    },
+  };
+
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap {...mapViewProps}>
+        <LayerViewer layer={layer as IRasterLayer} />
+      </CesiumMap>
+    </div>
+  );
+};
+MapWithSettings.storyName = 'Layer manager rect';
+
+interface ILayerViewerProps {
+  layer: IRasterLayer;
+}
+
+const LayerViewer: React.FC<ILayerViewerProps> = (props) => {
+  const mapViewer = useCesiumMap();
+  const { layer } = props;
+
+  // Mockin footprint data on layer meta
+  const layerFootprint = {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [34.8099445223518, 31.9061345394902],
+        [34.8200994167574, 31.9061345394902],
+        [34.8200994167574, 31.9106311613979],
+        [34.8099445223518, 31.9106311613979],
+        [34.8099445223518, 31.9061345394902],
+      ],
+    ],
+  };
+
+  useLayoutEffect(() => {
+    const layerManagerRect = Rectangle.fromDegrees(...bbox(layerFootprint));
+
+    layer.options.rectangle = layerManagerRect;
+
+    mapViewer.layersManager?.addRasterLayer(layer, 0, '');
+  }, [mapViewer, layerFootprint, layer]);
+  return <></>;
+};

package/src/lib/cesium-map/layers/osm.layer.stories.tsx

@@ -1,40 +1,40 @@
-import React, { useState } from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap } from '../map';
-import { CesiumSceneMode } from '../map.types';
-import { CesiumOSMLayer } from './osm.layer';
-import { CesiumXYZLayer } from './xyz.layer';
-
-export default {
-  title: 'Cesium Map/Layers/OSMLayer',
-  component: CesiumOSMLayer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const optionsOSM = {
-  url: 'https://a.tile.openstreetmap.org/',
-};
-const optionsXYZ = {
-  url: `https://tiles.openaerialmap.org/5b25fa612b6a08001185f80f/0/5b25fa612b6a08001185f810/{z}/{x}/{y}.png`,
-};
-
-export const MapWithOSMLayers: Story = (args) => {
-  const [center] = useState<[number, number]>([34.82, 32.04]);
-  return (
-    <div style={mapDivStyle}>
-      <CesiumMap center={center} sceneMode={CesiumSceneMode.SCENE2D} zoom={14}>
-        <CesiumOSMLayer options={optionsOSM} />
-        <CesiumXYZLayer options={optionsXYZ} />
-      </CesiumMap>
-    </div>
-  );
-};
-MapWithOSMLayers.storyName = 'OSM layer and XYZ';
+import React, { useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { CesiumOSMLayer } from './osm.layer';
+import { CesiumXYZLayer } from './xyz.layer';
+
+export default {
+  title: 'Cesium Map/Layers/OSMLayer',
+  component: CesiumOSMLayer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const optionsOSM = {
+  url: 'https://a.tile.openstreetmap.org/',
+};
+const optionsXYZ = {
+  url: `https://tiles.openaerialmap.org/5b25fa612b6a08001185f80f/0/5b25fa612b6a08001185f810/{z}/{x}/{y}.png`,
+};
+
+export const MapWithOSMLayers: Story = (args) => {
+  const [center] = useState<[number, number]>([34.82, 32.04]);
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap center={center} sceneMode={CesiumSceneMode.SCENE2D} zoom={14}>
+        <CesiumOSMLayer options={optionsOSM} />
+        <CesiumXYZLayer options={optionsXYZ} />
+      </CesiumMap>
+    </div>
+  );
+};
+MapWithOSMLayers.storyName = 'OSM layer and XYZ';

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

@@ -1,22 +1,22 @@
-import React from 'react';
-
-import { OpenStreetMapImageryProvider } from 'cesium';
-import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
-
-export interface RCesiumOSMLayerOptions
-  extends OpenStreetMapImageryProvider.ConstructorOptions {}
-
-export interface RCesiumOSMLayerProps
-  extends Partial<RCesiumImageryLayerProps> {
-  options: RCesiumOSMLayerOptions;
-}
-
-export const CesiumOSMLayer: React.FC<RCesiumOSMLayerProps> = (props) => {
-  const { options, ...restProps } = props;
-  return (
-    <CesiumImageryLayer
-      {...restProps}
-      imageryProvider={new OpenStreetMapImageryProvider(options)}
-    />
-  );
-};
+import React from 'react';
+
+import { OpenStreetMapImageryProvider } from 'cesium';
+import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
+
+export interface RCesiumOSMLayerOptions
+  extends OpenStreetMapImageryProvider.ConstructorOptions {}
+
+export interface RCesiumOSMLayerProps
+  extends Partial<RCesiumImageryLayerProps> {
+  options: RCesiumOSMLayerOptions;
+}
+
+export const CesiumOSMLayer: React.FC<RCesiumOSMLayerProps> = (props) => {
+  const { options, ...restProps } = props;
+  return (
+    <CesiumImageryLayer
+      {...restProps}
+      imageryProvider={new OpenStreetMapImageryProvider(options)}
+    />
+  );
+};

package/src/lib/cesium-map/layers/wms.layer.stories.tsx

@@ -1,38 +1,38 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap } from '../map';
-import { CesiumWMSLayer } from './wms.layer';
-
-export default {
-  title: 'Cesium Map/Layers/WMSLayer',
-  component: CesiumWMSLayer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const optionsWMS = {
-  url: 'https://ahocevar.com/geoserver/wms',
-  layers: 'ne:NE1_HR_LC_SR_W_DR',
-};
-
-const optionsWMS2 = {
-  url: 'https://ahocevar.com/geoserver/wms',
-  layers: 'opengeo:countries',
-};
-
-export const MapWithWMSLayers: Story = () => (
-  <div style={mapDivStyle}>
-    <CesiumMap>
-      <CesiumWMSLayer options={optionsWMS} />
-      <CesiumWMSLayer options={optionsWMS2} alpha={0.3} />
-    </CesiumMap>
-  </div>
-);
-MapWithWMSLayers.storyName = 'WMS 2 layers';
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap } from '../map';
+import { CesiumWMSLayer } from './wms.layer';
+
+export default {
+  title: 'Cesium Map/Layers/WMSLayer',
+  component: CesiumWMSLayer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const optionsWMS = {
+  url: 'https://ahocevar.com/geoserver/wms',
+  layers: 'ne:NE1_HR_LC_SR_W_DR',
+};
+
+const optionsWMS2 = {
+  url: 'https://ahocevar.com/geoserver/wms',
+  layers: 'opengeo:countries',
+};
+
+export const MapWithWMSLayers: Story = () => (
+  <div style={mapDivStyle}>
+    <CesiumMap>
+      <CesiumWMSLayer options={optionsWMS} />
+      <CesiumWMSLayer options={optionsWMS2} alpha={0.3} />
+    </CesiumMap>
+  </div>
+);
+MapWithWMSLayers.storyName = 'WMS 2 layers';

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

@@ -1,22 +1,22 @@
-import React from 'react';
-
-import { WebMapServiceImageryProvider } from 'cesium';
-import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
-
-export interface RCesiumWMSLayerOptions
-  extends WebMapServiceImageryProvider.ConstructorOptions {}
-
-export interface RCesiumWMSLayerProps
-  extends Partial<RCesiumImageryLayerProps> {
-  options: RCesiumWMSLayerOptions;
-}
-
-export const CesiumWMSLayer: React.FC<RCesiumWMSLayerProps> = (props) => {
-  const { options, ...restProps } = props;
-  return (
-    <CesiumImageryLayer
-      {...restProps}
-      imageryProvider={new WebMapServiceImageryProvider(options)}
-    />
-  );
-};
+import React from 'react';
+
+import { WebMapServiceImageryProvider } from 'cesium';
+import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
+
+export interface RCesiumWMSLayerOptions
+  extends WebMapServiceImageryProvider.ConstructorOptions {}
+
+export interface RCesiumWMSLayerProps
+  extends Partial<RCesiumImageryLayerProps> {
+  options: RCesiumWMSLayerOptions;
+}
+
+export const CesiumWMSLayer: React.FC<RCesiumWMSLayerProps> = (props) => {
+  const { options, ...restProps } = props;
+  return (
+    <CesiumImageryLayer
+      {...restProps}
+      imageryProvider={new WebMapServiceImageryProvider(options)}
+    />
+  );
+};