@map-colonies/react-components 3.12.2 → 3.13.0

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

@@ -1,137 +1,137 @@
-import React, {
-  useRef,
-  useEffect,
-  createContext,
-  useContext,
-  useState,
-} from 'react';
-import { Map as OlMap, View } from 'ol';
-import './map.css';
-import 'ol/ol.css';
-import { format, Coordinate, CoordinateFormat } from 'ol/coordinate';
-import { defaults as defaultControls, FullScreen } from 'ol/control';
-import MousePosition from 'ol/control/MousePosition';
-import Collection from 'ol/Collection';
-import Control from 'ol/control/Control';
-import { transform } from 'ol/proj';
-import {
-  Proj,
-  COORDINATES_WGS_FRACTION_DIGITS,
-  COORDINATES_MERCATOR_FRACTION_DIGITS,
-} from '../utils/projections';
-
-export interface MapProps {
-  allowFullScreen?: boolean;
-  showMousePosition?: boolean;
-  projection?: Proj;
-  center?: [number, number];
-  zoom?: number;
-}
-
-const mapContext = createContext<OlMap | null>(null);
-const MapProvider = mapContext.Provider;
-
-const CENTER_LAT = 35,
-  CENTER_LON = 32,
-  DEFAULT_ZOOM = 10;
-
-const getDefaultCenter = (projection: string | undefined): Coordinate => {
-  return projection !== undefined && projection !== Proj.WGS84
-    ? transform([CENTER_LAT, CENTER_LON], Proj.WGS84, projection)
-    : [CENTER_LAT, CENTER_LON];
-};
-
-const getCoordinateFormatString = (projection?: Proj): CoordinateFormat => {
-  switch (projection) {
-    case Proj.WEB_MERCATOR:
-      return (coord?: Coordinate): string =>
-        format(
-          coord as Coordinate,
-          'Mercator: {y}m, {x}m',
-          COORDINATES_MERCATOR_FRACTION_DIGITS
-        );
-    case Proj.WGS84:
-      return (coord?: Coordinate): string =>
-        format(
-          coord as Coordinate,
-          'WGS84: {y}°N {x}°E',
-          COORDINATES_WGS_FRACTION_DIGITS
-        );
-    default:
-      return (coord?: Coordinate): string => '';
-  }
-};
-
-export const useMap = (): OlMap => {
-  const map = useContext(mapContext);
-
-  if (map === null) {
-    throw new Error('map context is null, please check the provider');
-  }
-
-  return map;
-};
-
-export const Map: React.FC<MapProps> = (props) => {
-  const mapElementRef = useRef<HTMLDivElement>(null);
-  const { allowFullScreen, showMousePosition, projection } = props;
-
-  const [map] = useState(
-    new OlMap({
-      view: new View({
-        projection: projection ?? Proj.WGS84,
-      }),
-      controls: defaultControls(),
-    })
-  );
-
-  useEffect(() => {
-    map.getView().setCenter(props.center ?? getDefaultCenter(props.projection));
-  }, [map, props.center, props.projection]);
-
-  useEffect(() => {
-    map.getView().setZoom(props.zoom ?? DEFAULT_ZOOM);
-  }, [map, props.zoom, props.projection]);
-
-  // eslint-disable-next-line
-  const removeControl = (ctrType: any, mapInst: OlMap): void => {
-    const controls: Collection<Control> = mapInst.getControls();
-    controls.forEach((control: Control) => {
-      if (control instanceof ctrType) {
-        mapInst.removeControl(control);
-      }
-    });
-  };
-
-  useEffect(() => {
-    map.setTarget(mapElementRef.current as HTMLElement);
-
-    if (allowFullScreen !== undefined && allowFullScreen) {
-      map.addControl(new FullScreen());
-    } else {
-      removeControl(FullScreen, map);
-    }
-  }, [map, allowFullScreen]);
-
-  useEffect(() => {
-    if (showMousePosition !== undefined && showMousePosition) {
-      removeControl(MousePosition, map);
-      map.addControl(
-        new MousePosition({
-          coordinateFormat: getCoordinateFormatString(projection ?? Proj.WGS84),
-          projection: projection ?? Proj.WGS84,
-          undefinedHTML: '&nbsp;',
-        })
-      );
-    } else {
-      removeControl(MousePosition, map);
-    }
-  }, [map, showMousePosition, projection]);
-
-  return (
-    <MapProvider value={map}>
-      <div className="map" ref={mapElementRef}></div>
-      {props.children}
-    </MapProvider>
-  );
-};
+import React, {
+  useRef,
+  useEffect,
+  createContext,
+  useContext,
+  useState,
+} from 'react';
+import { Map as OlMap, View } from 'ol';
+import './map.css';
+import 'ol/ol.css';
+import { format, Coordinate, CoordinateFormat } from 'ol/coordinate';
+import { defaults as defaultControls, FullScreen } from 'ol/control';
+import MousePosition from 'ol/control/MousePosition';
+import Collection from 'ol/Collection';
+import Control from 'ol/control/Control';
+import { transform } from 'ol/proj';
+import {
+  Proj,
+  COORDINATES_WGS_FRACTION_DIGITS,
+  COORDINATES_MERCATOR_FRACTION_DIGITS,
+} from '../utils/projections';
+
+export interface MapProps {
+  allowFullScreen?: boolean;
+  showMousePosition?: boolean;
+  projection?: Proj;
+  center?: [number, number];
+  zoom?: number;
+}
+
+const mapContext = createContext<OlMap | null>(null);
+const MapProvider = mapContext.Provider;
+
+const CENTER_LAT = 35,
+  CENTER_LON = 32,
+  DEFAULT_ZOOM = 10;
+
+const getDefaultCenter = (projection: string | undefined): Coordinate => {
+  return projection !== undefined && projection !== Proj.WGS84
+    ? transform([CENTER_LAT, CENTER_LON], Proj.WGS84, projection)
+    : [CENTER_LAT, CENTER_LON];
+};
+
+const getCoordinateFormatString = (projection?: Proj): CoordinateFormat => {
+  switch (projection) {
+    case Proj.WEB_MERCATOR:
+      return (coord?: Coordinate): string =>
+        format(
+          coord as Coordinate,
+          'Mercator: {y}m, {x}m',
+          COORDINATES_MERCATOR_FRACTION_DIGITS
+        );
+    case Proj.WGS84:
+      return (coord?: Coordinate): string =>
+        format(
+          coord as Coordinate,
+          'WGS84: {y}°N {x}°E',
+          COORDINATES_WGS_FRACTION_DIGITS
+        );
+    default:
+      return (coord?: Coordinate): string => '';
+  }
+};
+
+export const useMap = (): OlMap => {
+  const map = useContext(mapContext);
+
+  if (map === null) {
+    throw new Error('map context is null, please check the provider');
+  }
+
+  return map;
+};
+
+export const Map: React.FC<MapProps> = (props) => {
+  const mapElementRef = useRef<HTMLDivElement>(null);
+  const { allowFullScreen, showMousePosition, projection } = props;
+
+  const [map] = useState(
+    new OlMap({
+      view: new View({
+        projection: projection ?? Proj.WGS84,
+      }),
+      controls: defaultControls(),
+    })
+  );
+
+  useEffect(() => {
+    map.getView().setCenter(props.center ?? getDefaultCenter(props.projection));
+  }, [map, props.center, props.projection]);
+
+  useEffect(() => {
+    map.getView().setZoom(props.zoom ?? DEFAULT_ZOOM);
+  }, [map, props.zoom, props.projection]);
+
+  // eslint-disable-next-line
+  const removeControl = (ctrType: any, mapInst: OlMap): void => {
+    const controls: Collection<Control> = mapInst.getControls();
+    controls.forEach((control: Control) => {
+      if (control instanceof ctrType) {
+        mapInst.removeControl(control);
+      }
+    });
+  };
+
+  useEffect(() => {
+    map.setTarget(mapElementRef.current as HTMLElement);
+
+    if (allowFullScreen !== undefined && allowFullScreen) {
+      map.addControl(new FullScreen());
+    } else {
+      removeControl(FullScreen, map);
+    }
+  }, [map, allowFullScreen]);
+
+  useEffect(() => {
+    if (showMousePosition !== undefined && showMousePosition) {
+      removeControl(MousePosition, map);
+      map.addControl(
+        new MousePosition({
+          coordinateFormat: getCoordinateFormatString(projection ?? Proj.WGS84),
+          projection: projection ?? Proj.WGS84,
+          undefinedHTML: '&nbsp;',
+        })
+      );
+    } else {
+      removeControl(MousePosition, map);
+    }
+  }, [map, showMousePosition, projection]);
+
+  return (
+    <MapProvider value={map}>
+      <div className="map" ref={mapElementRef}></div>
+      {props.children}
+    </MapProvider>
+  );
+};

package/src/lib/ol-map/source/index.ts

@@ -1,6 +1,6 @@
-export * from './osm';
-export * from './vector-source';
-export * from './wmts';
-export * from './wms';
-export * from './xyz';
-export * from './mvt';
+export * from './osm';
+export * from './vector-source';
+export * from './wmts';
+export * from './wms';
+export * from './xyz';
+export * from './mvt';

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

@@ -1,46 +1,46 @@
-import React, { useEffect, createContext, useContext } from 'react';
-import VectorTileSource, { Options } from 'ol/source/VectorTile';
-import { MVT } from 'ol/format';
-import { useVectorTileLayer } from '../layers/vector-tile-layer';
-
-const vectorTileSourceContext = createContext<VectorTileSource | null>(null);
-
-export const useVectorTileSource = (): VectorTileSource => {
-  const source = useContext(vectorTileSourceContext);
-
-  if (source === null) {
-    throw new Error(
-      'vector tile source context is null, please check the provider'
-    );
-  }
-
-  return source;
-};
-
-export interface MVTSourceProps {
-  options: Options;
-}
-
-export interface MVTOptionParams {
-  url: string;
-}
-
-export const getMVTOptions = (optionParams: MVTOptionParams): Options => {
-  const { url } = optionParams;
-  const mvtOptions: Options = {
-    url,
-    format: new MVT(),
-  };
-
-  return mvtOptions;
-};
-
-export const MVTSource: React.FC<MVTSourceProps> = ({ children, options }) => {
-  const vectorTileLayer = useVectorTileLayer();
-
-  useEffect((): void => {
-    vectorTileLayer.setSource(new VectorTileSource(options));
-  }, [options, vectorTileLayer]);
-
-  return null;
-};
+import React, { useEffect, createContext, useContext } from 'react';
+import VectorTileSource, { Options } from 'ol/source/VectorTile';
+import { MVT } from 'ol/format';
+import { useVectorTileLayer } from '../layers/vector-tile-layer';
+
+const vectorTileSourceContext = createContext<VectorTileSource | null>(null);
+
+export const useVectorTileSource = (): VectorTileSource => {
+  const source = useContext(vectorTileSourceContext);
+
+  if (source === null) {
+    throw new Error(
+      'vector tile source context is null, please check the provider'
+    );
+  }
+
+  return source;
+};
+
+export interface MVTSourceProps {
+  options: Options;
+}
+
+export interface MVTOptionParams {
+  url: string;
+}
+
+export const getMVTOptions = (optionParams: MVTOptionParams): Options => {
+  const { url } = optionParams;
+  const mvtOptions: Options = {
+    url,
+    format: new MVT(),
+  };
+
+  return mvtOptions;
+};
+
+export const MVTSource: React.FC<MVTSourceProps> = ({ children, options }) => {
+  const vectorTileLayer = useVectorTileLayer();
+
+  useEffect((): void => {
+    vectorTileLayer.setSource(new VectorTileSource(options));
+  }, [options, vectorTileLayer]);
+
+  return null;
+};

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

@@ -1,13 +1,13 @@
-import React, { useEffect } from 'react';
-import { OSM } from 'ol/source';
-import { useTileLayer } from '../layers/tile-layer';
-
-export const TileOsm: React.FC = (props) => {
-  const tileLayer = useTileLayer();
-
-  useEffect(() => {
-    tileLayer.setSource(new OSM());
-  }, [tileLayer]);
-
-  return null;
-};
+import React, { useEffect } from 'react';
+import { OSM } from 'ol/source';
+import { useTileLayer } from '../layers/tile-layer';
+
+export const TileOsm: React.FC = (props) => {
+  const tileLayer = useTileLayer();
+
+  useEffect(() => {
+    tileLayer.setSource(new OSM());
+  }, [tileLayer]);
+
+  return null;
+};

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

@@ -1,68 +1,68 @@
-import React from 'react';
-import { Style, Fill, Circle, Stroke } from 'ol/style';
-import { Proj } from '../../../utils/projections';
-import { VectorTileLayer } from '../../layers/vector-tile-layer';
-import { Map } from '../../map';
-import { TileLayer } from '../../layers';
-import { MVTSource, getMVTOptions } from '../mvt';
-import { TileOsm } from '..';
-
-export default {
-  title: 'Map/Map Tiles/MVT',
-  component: VectorTileLayer,
-  subcomponents: MVTSource,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-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>
-      <VectorTileLayer>
-        <MVTSource
-          options={getMVTOptions({
-            url: 'http://localhost:9090/maps/osm/{z}/{x}/{y}.pbf',
-          })}
-        />
-      </VectorTileLayer>
-    </Map>
-  </div>
-);
-
-export const Styled = (): JSX.Element => (
-  <div style={mapDivStyle}>
-    <Map projection={Proj.WEB_MERCATOR}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-      <VectorTileLayer
-        style={
-          new Style({
-            fill: new Fill({ color: 'red' }),
-            image: new Circle({
-              fill: new Fill({ color: 'orange' }),
-              radius: 1,
-            }),
-            stroke: new Stroke({ color: 'blue' }),
-          })
-        }
-      >
-        <MVTSource
-          options={getMVTOptions({
-            url: 'http://localhost:9090/maps/osm/{z}/{x}/{y}.pbf',
-          })}
-        />
-      </VectorTileLayer>
-    </Map>
-  </div>
-);
+import React from 'react';
+import { Style, Fill, Circle, Stroke } from 'ol/style';
+import { Proj } from '../../../utils/projections';
+import { VectorTileLayer } from '../../layers/vector-tile-layer';
+import { Map } from '../../map';
+import { TileLayer } from '../../layers';
+import { MVTSource, getMVTOptions } from '../mvt';
+import { TileOsm } from '..';
+
+export default {
+  title: 'Map/Map Tiles/MVT',
+  component: VectorTileLayer,
+  subcomponents: MVTSource,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+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>
+      <VectorTileLayer>
+        <MVTSource
+          options={getMVTOptions({
+            url: 'http://localhost:9090/maps/osm/{z}/{x}/{y}.pbf',
+          })}
+        />
+      </VectorTileLayer>
+    </Map>
+  </div>
+);
+
+export const Styled = (): JSX.Element => (
+  <div style={mapDivStyle}>
+    <Map projection={Proj.WEB_MERCATOR}>
+      <TileLayer>
+        <TileOsm />
+      </TileLayer>
+      <VectorTileLayer
+        style={
+          new Style({
+            fill: new Fill({ color: 'red' }),
+            image: new Circle({
+              fill: new Fill({ color: 'orange' }),
+              radius: 1,
+            }),
+            stroke: new Stroke({ color: 'blue' }),
+          })
+        }
+      >
+        <MVTSource
+          options={getMVTOptions({
+            url: 'http://localhost:9090/maps/osm/{z}/{x}/{y}.pbf',
+          })}
+        />
+      </VectorTileLayer>
+    </Map>
+  </div>
+);