@map-colonies/react-components 3.12.2 → 3.12.3

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

@@ -1,53 +1,53 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { Credit } from 'cesium';
-import { CesiumMap } from '../map';
-import { CesiumWMTSLayer } from './wmts.layer';
-
-export default {
-  title: 'Cesium Map/Layers/WMTSLayer',
-  component: CesiumWMTSLayer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const optionsWMTS = {
-  url:
-    'http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS',
-  layer: 'USGSShadedReliefOnly',
-  style: 'default',
-  format: 'image/jpeg',
-  tileMatrixSetID: 'default028mm',
-  // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
-  maximumLevel: 19,
-  credit: new Credit('U. S. Geological Survey'),
-};
-
-const optionsWMTS2 = {
-  url:
-    'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
-  layer: 'USGSShadedReliefOnly',
-  style: 'default',
-  format: 'image/jpeg',
-  tileMatrixSetID: 'default028mm',
-  // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
-  maximumLevel: 19,
-  credit: new Credit('U. S. Geological Survey'),
-};
-
-export const MapWithWMTSLayers: Story = () => (
-  <div style={mapDivStyle}>
-    <CesiumMap>
-      <CesiumWMTSLayer options={optionsWMTS} />
-      <CesiumWMTSLayer options={optionsWMTS2} alpha={0.5} />
-    </CesiumMap>
-  </div>
-);
-MapWithWMTSLayers.storyName = 'WMTS 2 layers';
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { Credit } from 'cesium';
+import { CesiumMap } from '../map';
+import { CesiumWMTSLayer } from './wmts.layer';
+
+export default {
+  title: 'Cesium Map/Layers/WMTSLayer',
+  component: CesiumWMTSLayer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const optionsWMTS = {
+  url:
+    'http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS',
+  layer: 'USGSShadedReliefOnly',
+  style: 'default',
+  format: 'image/jpeg',
+  tileMatrixSetID: 'default028mm',
+  // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
+  maximumLevel: 19,
+  credit: new Credit('U. S. Geological Survey'),
+};
+
+const optionsWMTS2 = {
+  url:
+    'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
+  layer: 'USGSShadedReliefOnly',
+  style: 'default',
+  format: 'image/jpeg',
+  tileMatrixSetID: 'default028mm',
+  // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
+  maximumLevel: 19,
+  credit: new Credit('U. S. Geological Survey'),
+};
+
+export const MapWithWMTSLayers: Story = () => (
+  <div style={mapDivStyle}>
+    <CesiumMap>
+      <CesiumWMTSLayer options={optionsWMTS} />
+      <CesiumWMTSLayer options={optionsWMTS2} alpha={0.5} />
+    </CesiumMap>
+  </div>
+);
+MapWithWMTSLayers.storyName = 'WMTS 2 layers';

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

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

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

@@ -1,37 +1,37 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap } from '../map';
-import { CesiumXYZLayer } from './xyz.layer';
-
-export default {
-  title: 'Cesium Map/Layers/XYZLayer',
-  component: CesiumXYZLayer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const optionsXYZ = {
-  url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
-};
-
-const optionsXYZ2 = {
-  url:
-    'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=0e6fc415256d4fbb9b5166a718591d71',
-};
-
-export const MapWithXYZLayers: Story = () => (
-  <div style={mapDivStyle}>
-    <CesiumMap>
-      <CesiumXYZLayer options={optionsXYZ} />
-      <CesiumXYZLayer options={optionsXYZ2} alpha={0.5} />
-    </CesiumMap>
-  </div>
-);
-MapWithXYZLayers.storyName = 'XYZ 2 layers';
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap } from '../map';
+import { CesiumXYZLayer } from './xyz.layer';
+
+export default {
+  title: 'Cesium Map/Layers/XYZLayer',
+  component: CesiumXYZLayer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const optionsXYZ = {
+  url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+};
+
+const optionsXYZ2 = {
+  url:
+    'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=0e6fc415256d4fbb9b5166a718591d71',
+};
+
+export const MapWithXYZLayers: Story = () => (
+  <div style={mapDivStyle}>
+    <CesiumMap>
+      <CesiumXYZLayer options={optionsXYZ} />
+      <CesiumXYZLayer options={optionsXYZ2} alpha={0.5} />
+    </CesiumMap>
+  </div>
+);
+MapWithXYZLayers.storyName = 'XYZ 2 layers';

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

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