@map-colonies/react-components 3.12.0 → 3.12.2

package/src/lib/ol-map/source/stories/vector-source.stories.tsx

@@ -1,78 +1,78 @@
-import React from 'react';
-import { Geometries } from '@turf/helpers';
-import { Proj } from '../../../utils/projections';
-import { Map } from '../../map';
-import { TileLayer, VectorLayer } from '../../layers';
-import { GeoJSONFeature } from '../../feature';
-import { TileOsm } from '..';
-import { VectorSource } from '../vector-source';
-
-export default {
-  title: 'Map/Map Tiles/Geojson',
-  component: VectorLayer,
-  subcomponents: GeoJSONFeature,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-const geometries: Geometries[] = [
-  {
-    type: 'Polygon',
-    coordinates: [
-      [
-        [3864197.52, 3750764.97],
-        [3884682.65, 3750764.98],
-        [3884682.65, 3766052.38],
-        [3864197.53, 3766052.38],
-        [3864197.52, 3750764.97],
-      ],
-    ],
-  },
-  {
-    type: 'Polygon',
-    coordinates: [
-      [
-        [3904403.4, 3765899.51],
-        [3896912.58, 3758255.81],
-        [3905779.27, 3743579.9],
-        [3918162.07, 3755962.7],
-        [3904403.4, 3765899.51],
-      ],
-    ],
-  },
-  {
-    type: 'LineString',
-    coordinates: [
-      [3931767.86, 3763147.78],
-      [3931003.49, 3724776.39],
-    ],
-  },
-  {
-    type: 'Point',
-    coordinates: [3890186.12, 3734254.58],
-  },
-];
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-export const Basic = (): JSX.Element => (
-  <div style={mapDivStyle}>
-    <Map projection={Proj.WEB_MERCATOR}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-      <VectorLayer>
-        <VectorSource>
-          {geometries.map((geometry, index) => (
-            <GeoJSONFeature key={index} geometry={geometry} />
-          ))}
-        </VectorSource>
-      </VectorLayer>
-    </Map>
-  </div>
-);
+import React from 'react';
+import { Geometries } from '@turf/helpers';
+import { Proj } from '../../../utils/projections';
+import { Map } from '../../map';
+import { TileLayer, VectorLayer } from '../../layers';
+import { GeoJSONFeature } from '../../feature';
+import { TileOsm } from '..';
+import { VectorSource } from '../vector-source';
+
+export default {
+  title: 'Map/Map Tiles/Geojson',
+  component: VectorLayer,
+  subcomponents: GeoJSONFeature,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const geometries: Geometries[] = [
+  {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [3864197.52, 3750764.97],
+        [3884682.65, 3750764.98],
+        [3884682.65, 3766052.38],
+        [3864197.53, 3766052.38],
+        [3864197.52, 3750764.97],
+      ],
+    ],
+  },
+  {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [3904403.4, 3765899.51],
+        [3896912.58, 3758255.81],
+        [3905779.27, 3743579.9],
+        [3918162.07, 3755962.7],
+        [3904403.4, 3765899.51],
+      ],
+    ],
+  },
+  {
+    type: 'LineString',
+    coordinates: [
+      [3931767.86, 3763147.78],
+      [3931003.49, 3724776.39],
+    ],
+  },
+  {
+    type: 'Point',
+    coordinates: [3890186.12, 3734254.58],
+  },
+];
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+export const Basic = (): JSX.Element => (
+  <div style={mapDivStyle}>
+    <Map projection={Proj.WEB_MERCATOR}>
+      <TileLayer>
+        <TileOsm />
+      </TileLayer>
+      <VectorLayer>
+        <VectorSource>
+          {geometries.map((geometry, index) => (
+            <GeoJSONFeature key={index} geometry={geometry} />
+          ))}
+        </VectorSource>
+      </VectorLayer>
+    </Map>
+  </div>
+);

package/src/lib/ol-map/source/stories/wms.stories.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-import { CSFStory } from '../../../utils/story';
-import { Map } from '../../map';
-import { TileLayer } from '../../layers/tile-layer';
-import { getWMSOptions, TileWMS } from '../wms';
-
-const wmsOptions = getWMSOptions({
-  url: 'https://ahocevar.com/geoserver/wms',
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  params: { LAYERS: 'ne:NE1_HR_LC_SR_W_DR', TILED: true },
-  serverType: 'geoserver',
-  // Countries have transparency, so do not fade tiles:
-  transition: 0.5,
-});
-
-const mapDivStyle = {
-  height: '95%',
-  width: '95%',
-  position: 'absolute' as const,
-};
-
-export default {
-  title: 'Map/Map Tiles/WMS',
-  component: TileWMS,
-};
-
-export const Basic: CSFStory<JSX.Element> = () => (
-  <div style={mapDivStyle}>
-    <Map allowFullScreen={true} showMousePosition={true}>
-      <TileLayer>
-        <TileWMS options={wmsOptions} />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-Basic.argTypes = {
-  options: {
-    description: `{ Options } from 'ol/source/TileWMS'`,
-    table: {
-      type: {
-        summary: 'OpenLayers type',
-        detail:
-          'Go to "https://openlayers.org/en/latest/apidoc/module-ol_source_TileWMS-TileWMS.html"',
-      },
-    },
-    control: {
-      type: null,
-    },
-  },
-};
+import React from 'react';
+import { CSFStory } from '../../../utils/story';
+import { Map } from '../../map';
+import { TileLayer } from '../../layers/tile-layer';
+import { getWMSOptions, TileWMS } from '../wms';
+
+const wmsOptions = getWMSOptions({
+  url: 'https://ahocevar.com/geoserver/wms',
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  params: { LAYERS: 'ne:NE1_HR_LC_SR_W_DR', TILED: true },
+  serverType: 'geoserver',
+  // Countries have transparency, so do not fade tiles:
+  transition: 0.5,
+});
+
+const mapDivStyle = {
+  height: '95%',
+  width: '95%',
+  position: 'absolute' as const,
+};
+
+export default {
+  title: 'Map/Map Tiles/WMS',
+  component: TileWMS,
+};
+
+export const Basic: CSFStory<JSX.Element> = () => (
+  <div style={mapDivStyle}>
+    <Map allowFullScreen={true} showMousePosition={true}>
+      <TileLayer>
+        <TileWMS options={wmsOptions} />
+      </TileLayer>
+    </Map>
+  </div>
+);
+
+Basic.argTypes = {
+  options: {
+    description: `{ Options } from 'ol/source/TileWMS'`,
+    table: {
+      type: {
+        summary: 'OpenLayers type',
+        detail:
+          'Go to "https://openlayers.org/en/latest/apidoc/module-ol_source_TileWMS-TileWMS.html"',
+      },
+    },
+    control: {
+      type: null,
+    },
+  },
+};

package/src/lib/ol-map/source/stories/wmts.stories.tsx

@@ -1,72 +1,72 @@
-import React from 'react';
-import { CSFStory } from '../../../utils/story';
-import { Map } from '../../map';
-import { TileLayer } from '../../layers/tile-layer';
-import { getWMTSOptions, TileWMTS } from '../wmts';
-import { TileOsm } from '../osm';
-
-const wmtsOptions = getWMTSOptions({
-  attributions: 'Tiles © ArcGIS',
-  url:
-    'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
-  layer: '0',
-  projection: 'EPSG:3857',
-  format: 'image/png',
-  style: 'default',
-  matrixSet: 'EPSG:3857',
-  heightWidthRatio: 1,
-  requestEncoding: 'KVP',
-});
-
-const wmtsOptions1 = getWMTSOptions({
-  url:
-    'http://10.28.11.95:8080/wmts/{Layer}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png',
-  layer: 'combined_layers',
-  matrixSet: 'gridname',
-  format: 'png',
-  projection: 'EPSG:4326',
-  style: 'default',
-});
-
-const mapDivStyle = {
-  height: '95%',
-  width: '95%',
-  position: 'absolute' as const,
-};
-
-export default {
-  title: 'Map/Map Tiles/WMTS',
-  component: TileWMTS,
-};
-
-export const Basic: CSFStory<JSX.Element> = () => (
-  <div style={mapDivStyle}>
-    <Map allowFullScreen={true} showMousePosition={true}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-      <TileLayer>
-        <TileWMTS options={wmtsOptions} />
-      </TileLayer>
-      <TileLayer options={{ opacity: 0.4 }}>
-        <TileWMTS options={wmtsOptions1} />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-Basic.argTypes = {
-  options: {
-    description: `{ Options } from 'ol/source/WMTS'`,
-    table: {
-      type: {
-        summary: 'OpenLayers type',
-        detail:
-          'Go to "https://openlayers.org/en/latest/apidoc/module-ol_source_WMTS-WMTS.html"',
-      },
-    },
-    control: {
-      type: null,
-    },
-  },
-};
+import React from 'react';
+import { CSFStory } from '../../../utils/story';
+import { Map } from '../../map';
+import { TileLayer } from '../../layers/tile-layer';
+import { getWMTSOptions, TileWMTS } from '../wmts';
+import { TileOsm } from '../osm';
+
+const wmtsOptions = getWMTSOptions({
+  attributions: 'Tiles © ArcGIS',
+  url:
+    'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
+  layer: '0',
+  projection: 'EPSG:3857',
+  format: 'image/png',
+  style: 'default',
+  matrixSet: 'EPSG:3857',
+  heightWidthRatio: 1,
+  requestEncoding: 'KVP',
+});
+
+const wmtsOptions1 = getWMTSOptions({
+  url:
+    'http://10.28.11.95:8080/wmts/{Layer}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png',
+  layer: 'combined_layers',
+  matrixSet: 'gridname',
+  format: 'png',
+  projection: 'EPSG:4326',
+  style: 'default',
+});
+
+const mapDivStyle = {
+  height: '95%',
+  width: '95%',
+  position: 'absolute' as const,
+};
+
+export default {
+  title: 'Map/Map Tiles/WMTS',
+  component: TileWMTS,
+};
+
+export const Basic: CSFStory<JSX.Element> = () => (
+  <div style={mapDivStyle}>
+    <Map allowFullScreen={true} showMousePosition={true}>
+      <TileLayer>
+        <TileOsm />
+      </TileLayer>
+      <TileLayer>
+        <TileWMTS options={wmtsOptions} />
+      </TileLayer>
+      <TileLayer options={{ opacity: 0.4 }}>
+        <TileWMTS options={wmtsOptions1} />
+      </TileLayer>
+    </Map>
+  </div>
+);
+
+Basic.argTypes = {
+  options: {
+    description: `{ Options } from 'ol/source/WMTS'`,
+    table: {
+      type: {
+        summary: 'OpenLayers type',
+        detail:
+          'Go to "https://openlayers.org/en/latest/apidoc/module-ol_source_WMTS-WMTS.html"',
+      },
+    },
+    control: {
+      type: null,
+    },
+  },
+};

package/src/lib/ol-map/source/stories/xyz.stories.tsx

@@ -1,53 +1,53 @@
-import React from 'react';
-import { Proj } from '../../../utils/projections';
-import { CSFStory } from '../../../utils/story';
-import { Map } from '../../map';
-import { TileLayer } from '../../layers/tile-layer';
-import { getXYZOptions, TileXYZ } from '../xyz';
-
-const xyzOptions = getXYZOptions({
-  url:
-    'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
-    '?apikey=0e6fc415256d4fbb9b5166a718591d71',
-});
-
-const mapDivStyle = {
-  height: '95%',
-  width: '95%',
-  position: 'absolute' as const,
-};
-
-export default {
-  title: 'Map/Map Tiles/XYZ',
-  component: TileXYZ,
-};
-
-export const Basic: CSFStory<JSX.Element> = () => (
-  <div style={mapDivStyle}>
-    <Map
-      allowFullScreen={true}
-      showMousePosition={true}
-      projection={Proj.WEB_MERCATOR}
-    >
-      <TileLayer>
-        <TileXYZ options={xyzOptions} />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-Basic.argTypes = {
-  options: {
-    description: `{ Options } from 'ol/source/XYZ'`,
-    table: {
-      type: {
-        summary: 'OpenLayers type',
-        detail:
-          'Go to "https://openlayers.org/en/latest/apidoc/module-ol_source_XYZ-XYZ.html"',
-      },
-    },
-    control: {
-      type: null,
-    },
-  },
-};
+import React from 'react';
+import { Proj } from '../../../utils/projections';
+import { CSFStory } from '../../../utils/story';
+import { Map } from '../../map';
+import { TileLayer } from '../../layers/tile-layer';
+import { getXYZOptions, TileXYZ } from '../xyz';
+
+const xyzOptions = getXYZOptions({
+  url:
+    'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
+    '?apikey=0e6fc415256d4fbb9b5166a718591d71',
+});
+
+const mapDivStyle = {
+  height: '95%',
+  width: '95%',
+  position: 'absolute' as const,
+};
+
+export default {
+  title: 'Map/Map Tiles/XYZ',
+  component: TileXYZ,
+};
+
+export const Basic: CSFStory<JSX.Element> = () => (
+  <div style={mapDivStyle}>
+    <Map
+      allowFullScreen={true}
+      showMousePosition={true}
+      projection={Proj.WEB_MERCATOR}
+    >
+      <TileLayer>
+        <TileXYZ options={xyzOptions} />
+      </TileLayer>
+    </Map>
+  </div>
+);
+
+Basic.argTypes = {
+  options: {
+    description: `{ Options } from 'ol/source/XYZ'`,
+    table: {
+      type: {
+        summary: 'OpenLayers type',
+        detail:
+          'Go to "https://openlayers.org/en/latest/apidoc/module-ol_source_XYZ-XYZ.html"',
+      },
+    },
+    control: {
+      type: null,
+    },
+  },
+};

package/src/lib/ol-map/source/vector-source.tsx

@@ -1,30 +1,30 @@
-import React, { useEffect, useState, createContext, useContext } from 'react';
-
-import { Vector } from 'ol/source';
-import { useVectorLayer } from '../layers/vector-layer';
-
-const vectorSourceContext = createContext<Vector | null>(null);
-const VectorSourceProvider = vectorSourceContext.Provider;
-
-export const useVectorSource = (): Vector => {
-  const source = useContext(vectorSourceContext);
-
-  if (source === null) {
-    throw new Error('vector source context is null, please check the provider');
-  }
-
-  return source;
-};
-
-export const VectorSource: React.FC = ({ children }) => {
-  const vectorLayer = useVectorLayer();
-  const [vectorSource] = useState(new Vector());
-
-  useEffect((): void => {
-    vectorLayer.setSource(vectorSource);
-  }, [vectorSource, vectorLayer]);
-
-  return (
-    <VectorSourceProvider value={vectorSource}>{children}</VectorSourceProvider>
-  );
-};
+import React, { useEffect, useState, createContext, useContext } from 'react';
+
+import { Vector } from 'ol/source';
+import { useVectorLayer } from '../layers/vector-layer';
+
+const vectorSourceContext = createContext<Vector | null>(null);
+const VectorSourceProvider = vectorSourceContext.Provider;
+
+export const useVectorSource = (): Vector => {
+  const source = useContext(vectorSourceContext);
+
+  if (source === null) {
+    throw new Error('vector source context is null, please check the provider');
+  }
+
+  return source;
+};
+
+export const VectorSource: React.FC = ({ children }) => {
+  const vectorLayer = useVectorLayer();
+  const [vectorSource] = useState(new Vector());
+
+  useEffect((): void => {
+    vectorLayer.setSource(vectorSource);
+  }, [vectorSource, vectorLayer]);
+
+  return (
+    <VectorSourceProvider value={vectorSource}>{children}</VectorSourceProvider>
+  );
+};

package/src/lib/ol-map/source/wms.tsx

@@ -1,40 +1,40 @@
-import React, { useEffect } from 'react';
-import OlTileWMS, { Options } from 'ol/source/TileWMS';
-import { useTileLayer } from '../layers/tile-layer';
-
-interface TileWMSProps {
-  options: Options;
-}
-
-export interface WMSOptionParams {
-  attributions?: string;
-  url: string;
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  params: { [key: string]: any };
-  serverType: 'carmentaserver' | 'geoserver' | 'mapserver' | 'qgis';
-  transition: number;
-}
-
-export const getWMSOptions = (optionParams: WMSOptionParams): Options => {
-  const { attributions, url, params, serverType, transition } = optionParams;
-
-  const wmsOptions: Options = {
-    attributions,
-    url,
-    params,
-    serverType,
-    transition,
-  };
-
-  return wmsOptions;
-};
-export const TileWMS: React.FC<TileWMSProps> = (props) => {
-  const tileLayer = useTileLayer();
-  const { options } = props;
-
-  useEffect(() => {
-    tileLayer.setSource(new OlTileWMS(options));
-  }, [tileLayer, options]);
-
-  return null;
-};
+import React, { useEffect } from 'react';
+import OlTileWMS, { Options } from 'ol/source/TileWMS';
+import { useTileLayer } from '../layers/tile-layer';
+
+interface TileWMSProps {
+  options: Options;
+}
+
+export interface WMSOptionParams {
+  attributions?: string;
+  url: string;
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  params: { [key: string]: any };
+  serverType: 'carmentaserver' | 'geoserver' | 'mapserver' | 'qgis';
+  transition: number;
+}
+
+export const getWMSOptions = (optionParams: WMSOptionParams): Options => {
+  const { attributions, url, params, serverType, transition } = optionParams;
+
+  const wmsOptions: Options = {
+    attributions,
+    url,
+    params,
+    serverType,
+    transition,
+  };
+
+  return wmsOptions;
+};
+export const TileWMS: React.FC<TileWMSProps> = (props) => {
+  const tileLayer = useTileLayer();
+  const { options } = props;
+
+  useEffect(() => {
+    tileLayer.setSource(new OlTileWMS(options));
+  }, [tileLayer, options]);
+
+  return null;
+};