@map-colonies/react-components 3.15.1 → 4.0.2

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

@@ -1,23 +0,0 @@
-import React, { useEffect } from 'react';
-import { Geometry } from 'geojson';
-import { GeoJSON } from 'ol/format';
-import { useVectorSource } from './source/vector-source';
-
-export interface FeatureProps {
-  geometry: Geometry;
-}
-
-export const GeoJSONFeature: React.FC<FeatureProps> = ({ geometry }) => {
-  const source = useVectorSource();
-
-  useEffect(() => {
-    const geoJSON = new GeoJSON();
-    const feature = geoJSON.readFeature(geometry);
-    source.addFeature(feature);
-    return (): void => {
-      source.removeFeature(feature);
-    };
-  }, [geometry, source]);
-
-  return null;
-};

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

@@ -1,6 +0,0 @@
-export * from './interactions';
-export * from './layers';
-export * from './source';
-export * from './feature';
-export * from './map';
-export * from '../utils/projections';

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

@@ -1,56 +0,0 @@
-import React, { useEffect } from 'react';
-import { Draw } from 'ol/interaction';
-import {
-  createBox,
-  DrawEvent,
-  Options as DrawOptions,
-} from 'ol/interaction/Draw';
-import GeometryType from 'ol/geom/GeometryType';
-import { GeoJSON } from 'ol/format';
-import { Geometry } from 'geojson';
-import { useMap } from '../map';
-import { DrawType } from '../../models/enums';
-
-export interface DrawProps {
-  drawType: DrawType;
-  onPolygonSelected?: (geometry: Geometry) => void;
-}
-
-export const DrawInteraction: React.FC<DrawProps> = ({
-  drawType,
-  onPolygonSelected,
-}) => {
-  const map = useMap();
-
-  useEffect(() => {
-    const options: DrawOptions = { type: GeometryType.CIRCLE };
-    switch (drawType) {
-      case DrawType.BOX:
-        options.geometryFunction = createBox();
-        break;
-      case DrawType.POLYGON:
-        options.type = GeometryType.POLYGON;
-        break;
-      default:
-        return;
-    }
-
-    const draw = new Draw(options);
-    map.addInteraction(draw);
-
-    const onDrawEnd = (e: DrawEvent): void => {
-      const geoJson = new GeoJSON();
-      const geom = geoJson.writeGeometryObject(e.feature.getGeometry());
-      onPolygonSelected?.(geom);
-    };
-
-    draw.on('drawend', onDrawEnd);
-
-    return (): void => {
-      draw.un('drawend', onDrawEnd);
-      map.removeInteraction(draw);
-    };
-  }, [onPolygonSelected, drawType, map]);
-
-  return null;
-};

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

@@ -1 +0,0 @@
-export * from './draw';

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

@@ -1,3 +0,0 @@
-export * from './tile-layer';
-export * from './vector-layer';
-export * from './vector-tile-layer';

package/src/lib/ol-map/layers/tile-layer.tsx

@@ -1,36 +0,0 @@
-import React, { useEffect, useState, createContext, useContext } from 'react';
-import { Tile } from 'ol/layer';
-import { Options } from 'ol/layer/Base';
-import { useMap } from '../map';
-
-const tileLayerContext = createContext<Tile | null>(null);
-const TileLayerProvider = tileLayerContext.Provider;
-
-interface TileLayerProps {
-  options?: Options;
-}
-
-export const useTileLayer = (): Tile => {
-  const layer = useContext(tileLayerContext);
-
-  if (layer === null) {
-    throw new Error('tile layer context is null, please check the provider');
-  }
-
-  return layer;
-};
-
-export const TileLayer: React.FC<TileLayerProps> = ({ options, children }) => {
-  const map = useMap();
-  const [tileLayer] = useState(new Tile(options));
-
-  useEffect(() => {
-    map.addLayer(tileLayer);
-
-    return (): void => {
-      map.removeLayer(tileLayer);
-    };
-  }, [map, tileLayer]);
-
-  return <TileLayerProvider value={tileLayer}>{children}</TileLayerProvider>;
-};

package/src/lib/ol-map/layers/vector-layer.tsx

@@ -1,32 +0,0 @@
-import React, { useEffect, useState, createContext, useContext } from 'react';
-import { Vector } from 'ol/layer';
-import { useMap } from '../map';
-
-const vectorLayerContext = createContext<Vector | null>(null);
-const VectorLayerProvider = vectorLayerContext.Provider;
-
-export const useVectorLayer = (): Vector => {
-  const layer = useContext(vectorLayerContext);
-
-  if (layer === null) {
-    throw new Error('vector layer context is null, please check the provider');
-  }
-
-  return layer;
-};
-
-export const VectorLayer: React.FC = ({ children }) => {
-  const map = useMap();
-  const [vectorLayer] = useState(new Vector());
-
-  useEffect(() => {
-    map.addLayer(vectorLayer);
-    return (): void => {
-      map.removeLayer(vectorLayer);
-    };
-  }, [map, vectorLayer]);
-
-  return (
-    <VectorLayerProvider value={vectorLayer}>{children}</VectorLayerProvider>
-  );
-};

package/src/lib/ol-map/layers/vector-tile-layer.tsx

@@ -1,56 +0,0 @@
-import React, { useEffect, useState, createContext, useContext } from 'react';
-import VectorTile from 'ol/layer/VectorTile';
-import { Options } from 'ol/layer/Base';
-import { useMap } from '../map';
-import { MapStyle, defaultStyle } from '../style';
-
-export interface VectorTileLayerProps {
-  options?: Options;
-  style?: MapStyle;
-}
-
-const vectorTileLayerContext = createContext<VectorTile | null>(null);
-const VectorTileLayerProvider = vectorTileLayerContext.Provider;
-
-export const useVectorTileLayer = (): VectorTile => {
-  const layer = useContext(vectorTileLayerContext);
-
-  if (layer === null) {
-    throw new Error(
-      'vector tile layer context is null, please check the provider'
-    );
-  }
-
-  return layer;
-};
-
-export const VectorTileLayer: React.FC<VectorTileLayerProps> = ({
-  children,
-  options,
-  style,
-}) => {
-  const map = useMap();
-  const [vectorTileLayer] = useState(
-    new VectorTile({
-      ...options,
-      style: style ? style : defaultStyle,
-    })
-  );
-
-  useEffect(() => {
-    map.addLayer(vectorTileLayer);
-    return (): void => {
-      map.removeLayer(vectorTileLayer);
-    };
-  }, [map, vectorTileLayer]);
-
-  useEffect(() => {
-    vectorTileLayer.setStyle(style ? style : defaultStyle);
-  }, [vectorTileLayer, style]);
-
-  return (
-    <VectorTileLayerProvider value={vectorTileLayer}>
-      {children}
-    </VectorTileLayerProvider>
-  );
-};

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

@@ -1,17 +0,0 @@
-.map {
-  height: 100%;
-  width: 100%;
-}
-
-.ol-mouse-position {
-  top: auto !important;
-  right: auto !important;
-  bottom: 8px;
-  left: 8px;
-  background-color: white;
-  opacity: 0.7;
-  font-size: 12px;
-  padding: 2px 2px;
-  border-radius: 2px;
-}
-/* @import '../../../../node_modules/ol/ol.css'; */

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

@@ -1,137 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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>
-);

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

@@ -1,78 +0,0 @@
-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 +0,0 @@
-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,
-    },
-  },
-};