@performant-software/geospatial 3.1.22-beta.3 → 3.1.22-beta.5

package/types/components/MapDraw.js.flow

@@ -1,268 +0,0 @@
-// @flow
-
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import { feature, type FeatureCollection, type GeometryCollection } from '@turf/turf';
-import maplibregl from 'maplibre-gl';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type Node
-} from 'react';
-import Map, {
-  FullscreenControl,
-  type MapboxMap,
-  NavigationControl
-} from 'react-map-gl/maplibre';
-import _ from 'underscore';
-import DrawControl from './DrawControl';
-import GeocodingControl from './GeocodingControl';
-import MapUtils from '../utils/Map';
-
-import '@maptiler/geocoding-control/style.css';
-import './MapDraw.css';
-
-// Override the MapboxDraw components to use MapLibre styles
-MapboxDraw.constants.classes.CONTROL_BASE = 'maplibregl-ctrl';
-MapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';
-MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';
-
-type Props = {
-  /**
-   * MapTiler API key.
-   */
-  apiKey?: string,
-
-  /**
-   * The number of miles to buffer the GeoJSON data.
-   */
-  buffer?: number,
-
-  /**
-   * Additional child nodes to render.
-   */
-  children?: Node,
-
-  /**
-   * If `true`, the map will require CTRL + scroll to zoom.
-   */
-  cooperativeGestures?: boolean,
-
-  /**
-   * GeoJSON structured data to be displayed on the map.
-   */
-  data: GeometryCollection | FeatureCollection,
-
-  /**
-   * If `true`, a control will be rendered to put the map in full screen mode.
-   */
-  fullscreen?: boolean,
-
-  /**
-   * Controls the type of GeoJSON data returned from the MapTiler Geocoding API.
-   */
-  geocoding?: undefined | 'point' | 'polygon',
-
-  /**
-   * URL of the map style to render. This URL should contain any necessary API keys.
-   */
-  mapStyle: string,
-
-  /**
-   * The maximum pitch of the map (0-85).
-   */
-  maxPitch?: number,
-
-  /**
-   * If `true`, the navigation controls will display.
-   */
-  navigation?: boolean,
-
-  /**
-   * Callback fired when the map geometries are changed.
-   *
-   * @param features
-   */
-  onChange: (features: Array<any>) => void,
-
-  /**
-   * Callback fired when an item is selected from the geocoding dropdown.
-   */
-  onGeocodingSelection?: (data: any) => void,
-
-  /**
-   * If `true`, the map's canvas can be exported to a PNG using `map.getCanvas().toDataURL()`.
-   */
-  preserveDrawingBuffer?: boolean,
-
-  /**
-   * Map style object.
-   */
-  style?: any,
-
-  /**
-   * The time in milliseconds to zoom into the location.
-   */
-  zoomDuration?: number
-};
-
-const DEFAULT_BUFFER = 2;
-const DEFAULT_ZOOM_DELAY = 1000;
-
-const GeometryTypes = {
-  geometryCollection: 'GeometryCollection',
-  point: 'Point',
-  polygon: ['Polygon', 'MultiPolygon']
-};
-
-/**
- * This component renders a map with controls for drawing one or more geometries. Geometries can be a point (lat/long),
- * a line, or a polygon.
- */
-const MapDraw = (props: Props) => {
-  const [loaded, setLoaded] = useState(false);
-
-  const drawRef = useRef<MapboxDraw>();
-  const mapRef = useRef<MapboxMap>();
-
-  /**
-   * Returns true if the passed geometry type is valid. MapTiler fires the onSelection callback twice: Once after
-   * selecting the record from the list (with a point geometry), and once after making a call to the server for the
-   * full record (polygon geometry). We should on fire the onGeocodingSelection callback and add the geometry to the
-   * map once.
-   *
-   * @type {function({geometry: {type: *}}): *}
-   */
-  const isValid = useCallback((detail) => {
-    if (!detail) {
-      return false;
-    }
-
-    const { geometry: { type } } = detail;
-
-    return (props.geocoding === 'point' && type === GeometryTypes.point)
-      || (props.geocoding === 'polygon' && GeometryTypes.polygon.includes(type));
-  }, [props.geocoding]);
-
-  /**
-   * Calls the onChange prop with all of the geometries in the current drawer.
-   *
-   * @type {(function(): void)|*}
-   */
-  const onChange = useCallback(() => props.onChange(drawRef.current.getAll()), [props.onChange]);
-
-  /**
-   * Adds the selected geometry to the map.
-   *
-   * @type {(function({feature: *}): void)|*}
-   */
-  const onSelection = useCallback(({ feature }) => {
-    if (isValid(feature)) {
-      // Add the geometry to the map
-      drawRef.current.add(feature.geometry);
-
-      // Trigger the onChange prop
-      onChange();
-
-      // Call the onGeocoding selection callback
-      if (props.onGeocodingSelection) {
-        props.onGeocodingSelection(feature);
-      }
-    }
-  }, [isValid, onChange, props.onGeocodingSelection]);
-
-  /**
-   * Sets the map style URL.
-   *
-   * @type {string}
-   */
-  const mapStyleUrl = useMemo(() => `${props.mapStyle}?key=${props.apiKey}`, [props.apiKey, props.mapStyle]);
-
-  /**
-   * Sets the element map style.
-   *
-   * @type {{width: string, height: number}}
-   */
-  const style = useMemo(() => ({ height: 500, width: '100%', ...(props.style || {}) }), [props.style]);
-
-  /**
-   * Updates the map bounding box and drawer when the geometry is changed.
-   */
-  useEffect(() => {
-    if (loaded && props.data) {
-      // Sets the bounding box for the current geometry
-      const bbox = MapUtils.getBoundingBox(props.data, props.buffer);
-
-      if (bbox) {
-        mapRef.current.fitBounds(bbox, { duration: props.zoomDuration });
-      }
-
-      // Handle special cases for geometry collection (not supported by mabox-gl-draw) and point
-      if (props.data.type === GeometryTypes.geometryCollection) {
-        _.each(props.data.geometries, (geometry) => {
-          drawRef.current.add(feature(geometry));
-        });
-      } else {
-        drawRef.current.add(props.data);
-      }
-    }
-  }, [loaded, props.data]);
-
-  return (
-    <Map
-      attributionControl={false}
-      cooperativeGestures={props.cooperativeGestures}
-      mapLib={maplibregl}
-      maxPitch={props.maxPitch}
-      onLoad={() => setLoaded(true)}
-      preserveDrawingBuffer={props.preserveDrawingBuffer}
-      ref={mapRef}
-      style={style}
-      mapStyle={mapStyleUrl}
-    >
-      <DrawControl
-        ref={drawRef}
-        controls={{
-          line_string: true,
-          point: true,
-          polygon: true,
-          trash: true
-        }}
-        displayControlsDefault={false}
-        onCreate={onChange}
-        onUpdate={onChange}
-        onDelete={onChange}
-        position='bottom-left'
-      />
-      { props.geocoding && (
-        <GeocodingControl
-          apiKey={props.apiKey}
-          key={props.geocoding}
-          marker={false}
-          pickedResultStyle={props.geocoding === 'polygon' ? 'full-geometry' : 'marker-only'}
-          position='top-left'
-          onSelection={onSelection}
-          showResultMarkers={false}
-        />
-      )}
-      { props.navigation && (
-        <NavigationControl />
-      )}
-      { props.fullscreen && (
-        <FullscreenControl />
-      )}
-      { props.children }
-    </Map>
-  );
-};
-
-MapDraw.defaultProps = {
-  buffer: DEFAULT_BUFFER,
-  cooperativeGestures: true,
-  preserveDrawingBuffer: false,
-  zoomDuration: DEFAULT_ZOOM_DELAY
-};
-
-export default MapDraw;

package/types/components/RasterLayer.js.flow

@@ -1,38 +0,0 @@
-// @flow
-
-import React from 'react';
-import { Layer, Source } from 'react-map-gl/maplibre';
-
-type Props = {
-  maxzoom?: number,
-  minzoom?: number,
-  opacity?: number,
-  tileSize?: number,
-  url?: string,
-};
-
-const RasterLayer = (props: Props) => (
-  <Source
-    tileSize={props.tileSize}
-    tiles={[props.url]}
-    type='raster'
-  >
-    <Layer
-      type='raster'
-      paint={{
-        'raster-opacity': props.opacity
-      }}
-      minzoom={props.minzoom}
-      maxzoom={props.maxzoom}
-    />
-  </Source>
-);
-
-RasterLayer.defaultProps = {
-  maxzoom: 22,
-  minzoom: 0,
-  opacity: 0.7,
-  tileSize: 256
-};
-
-export default RasterLayer;

package/types/components/WarpedImageLayer.js.flow

@@ -1,72 +0,0 @@
-// @flow
-
-import { useEffect, useState } from 'react';
-import { useMap } from 'react-map-gl/maplibre';
-import MapUtils from '../utils/Map';
-
-type Props = {
-  /**
-   * ID of the new layer.
-   */
-  id: string,
-
-  /**
-   * (Optional) IIIF manifest content containing the image and geo-reference annotations.
-   */
-  manifest?: string,
-
-  /**
-   * (Optional) layer opacity.
-   */
-  opacity?: number,
-
-  /**
-   * (Optional) URL to the IIIF manifest.
-   */
-  url?: string
-};
-
-const WarpedImageLayer = (props: Props) => {
-  const [loaded, setLoaded] = useState(false);
-
-  const mapRef = useMap();
-
-  /**
-   * Sets the "loaded" attribute on the state based on the current map state.
-   */
-  useEffect(() => {
-    const instance = mapRef?.current?.getMap();
-    if (instance && instance.loaded()) {
-      setLoaded(true);
-    } else if (instance) {
-      instance.on('load', () => setLoaded(true));
-    }
-  }, []);
-
-  /**
-   * Adds the WarpedMapLayer object to the map as a new layer.
-   */
-  useEffect(() => {
-    if (!loaded) {
-      return undefined;
-    }
-
-    const map = mapRef.current.getMap();
-
-    MapUtils.addGeoreferenceLayer(map, props.id, {
-      manifest: props.manifest,
-      opacity: props.opacity,
-      url: props.url
-    });
-
-    return () => MapUtils.removeLayer(map, props.id);
-  }, [loaded]);
-
-  return null;
-};
-
-WarpedImageLayer.defaultProps = {
-  opacity: 0.5
-};
-
-export default WarpedImageLayer;

package/types/components/WarpedImageLayerPeripleo.js.flow

@@ -1,56 +0,0 @@
-// @flow
-
-import { useEffect } from 'react';
-import { useLoadedMap } from '@peripleo/maplibre';
-import MapUtils from '../utils/Map';
-
-type Props = {
-  /**
-   * ID of the new layer.
-   */
-  id: string,
-
-  /**
-   * (Optional) IIIF manifest content containing the image and geo-reference annotations.
-   */
-  manifest?: string,
-
-  /**
-   * (Optional) layer opacity.
-   */
-  opacity?: number,
-
-  /**
-   * (Optional) URL to the IIIF manifest.
-   */
-  url?: string
-};
-
-const WarpedImageLayer = (props: Props) => {
-  const map = useLoadedMap();
-
-  /**
-   * Adds the WarpedMapLayer object to the map as a new layer.
-   */
-  useEffect(() => {
-    if (!map) {
-      return undefined;
-    }
-
-    MapUtils.addGeoreferenceLayer(map, props.id, {
-      manifest: props.manifest,
-      opacity: props.opacity,
-      url: props.url
-    });
-
-    return () => MapUtils.removeLayer(map, props.id);
-  }, [map]);
-
-  return null;
-};
-
-WarpedImageLayer.defaultProps = {
-  opacity: 0.5
-};
-
-export default WarpedImageLayer;

package/types/index.js.flow

@@ -1,18 +0,0 @@
-// @flow
-
-// Components
-export { default as CertaintyLayer } from './components/CertaintyLayer';
-export { default as DrawControl } from './components/DrawControl';
-export { default as GeoJsonLayer } from './components/GeoJsonLayer';
-export { default as GeocodingControl } from './components/GeocodingControl';
-export { default as LayerMenu } from './components/LayerMenu';
-export { default as LocationMarkers } from './components/LocationMarkers';
-export { default as MapControl } from './components/MapControl';
-export { default as MapDraw } from './components/MapDraw';
-export { default as RasterLayer } from './components/RasterLayer';
-export { default as WarpedImageLayer } from './components/WarpedImageLayer';
-export { default as WarpedImageLayerPeripleo } from './components/WarpedImageLayerPeripleo';
-
-// Utils
-export { default as Map } from './utils/Map';
-export { default as MapStyles } from './utils/MapStyles';

package/types/utils/Map.js.flow

@@ -1,214 +0,0 @@
-// @flow
-
-import { WarpedMapLayer } from '@allmaps/maplibre';
-import {
-  bbox,
-  bboxPolygon,
-  buffer,
-  feature,
-  featureCollection
-} from '@turf/turf';
-import _ from 'underscore';
-import circle from '@turf/circle';
-
-const MIN_LATITUDE = -90;
-const MAX_LATITUDE = 90;
-const MIN_LONGITUDE = -180;
-const MAX_LONGITUDE = 180;
-
-/**
- * Returns a GeoJSON circle feature with the given center point and radius.
- * @param point - The center point of the circle.
- * @param radius - The radius of the circle in kilometers.
- * @returns {Feature<Geometry, Properties>} - The GeoJSON circle feature.
- */
-const buildCircle = (point, radius) => (
-  circle(point.coordinates, radius, { units: 'kilometers', steps: 32 })
-);
-
-const toCertaintyCircle = (item, radius: number) => {
-  if (item.geometry?.type === 'FeatureCollection') {
-    let children = [];
-
-    for (const childFeature of item.geometry.features) {
-      if (childFeature.geometry?.type === 'Point') {
-        const { geometry, type } = buildCircle(childFeature.geometry, radius);
-        children.push({
-          ...childFeature,
-          geometry,
-          type
-        });
-      }
-    }
-
-    return featureCollection(children);
-  } else if (item.geometry?.type === 'GeometryCollection') {
-    return featureCollection(item.geometry.geometries.map((geometry) => geometry.type === 'Point'
-      ? buildCircle(geometry, radius)
-      : feature(geometry)));
-  } else if (item.geometry?.type === 'Point') {
-    const { geometry, type } = buildCircle(item.geometry, radius);
-    return {
-      ...item,
-      geometry,
-      type
-    };
-  }
-
-  return item;
-};
-
-/**
- * Adds the geo-referenced image layer to the passed map.
- *
- * @param map
- * @param layerId
- * @param options
- */
-const addGeoreferenceLayer = (map, layerId, options = {}) => {
-  const warpedMapLayer = new WarpedMapLayer(layerId);
-  map.addLayer(warpedMapLayer);
-
-  if (options.url) {
-    warpedMapLayer.addGeoreferenceAnnotationByUrl(options.url);
-  } else if (options.manifest) {
-    warpedMapLayer.addGeoreferenceAnnotation(options.manifest);
-  }
-
-  if (options.opacity) {
-    warpedMapLayer.setOpacity(options.opacity);
-  }
-};
-
-/**
- * Returns a bounding box for the passed geometry (with optional buffer).
- *
- * @param data
- * @param bufferDistance
- *
- * @returns {BBox}
- */
-const getBoundingBox = (data, bufferDistance = null) => {
-  // Convert the GeoJSON into a bounding box
-  const box = bbox(data);
-
-  if (!validateBoundingBox(box)) {
-    return null;
-  }
-
-  // Convert the bounding box to a polygon
-  const polygon = bboxPolygon(box);
-
-  // Create a buffer around the polygon (if a distance is provided)
-  let polygonBuffer;
-
-  if (bufferDistance) {
-    polygonBuffer = buffer(polygon, bufferDistance, { units: 'miles' });
-  } else {
-    polygonBuffer = polygon;
-  }
-
-  // Convert the buffer to a bounding box
-  return bbox(polygonBuffer);
-};
-
-/**
- * Removes a layer from the passed map.
- *
- * @param map
- * @param layerId
- *
- * @returns {*}
- */
-const removeLayer = (map, layerId) => map && map.removeLayer(layerId);
-
-/**
- * Wraps the passed record in a feature.
- *
- * @param record
- * @param item
- * @param geometry
- * @param originalProperties
- *
- * @returns {Feature<Geometry, {
- *  id: *,
- *  ccode: [],
- *  title: *,
- *  uuid: *,
- *  record_id: *,
- *  name: *,
- *  names: *,
- *  type: *,
- *  items: [*],
- *  url: *
- * }>}
- */
-const toFeature = (record: any, item: any, geometry: any, originalProperties?: any) => {
-  const properties = {
-    id: record.record_id,
-    ccode: [],
-    title: record.name,
-    uuid: record.uuid,
-    record_id: record.record_id,
-    name: record.name,
-    names: record.names?.map((toponym: string) => ({ toponym })),
-    type: record.type,
-    items: [item],
-    url: record.url,
-    originalProperties: originalProperties || {}
-  };
-
-  const id = parseInt(record.record_id, 10);
-  return feature(geometry, properties, { id });
-};
-
-/**
- * Returns a feature collection for the passed set of features.
- *
- * @param features
- *
- * @returns {FeatureCollection<Geometry, GeoJsonProperties>}
- */
-const toFeatureCollection = (features: Array<any>) => featureCollection(features);
-
-/**
- * Validates that the passed bounding box contains finite coordinates.
- *
- * @param boundingBox
- *
- * @returns {*}
- */
-const validateBoundingBox = (boundingBox: Array<number>) => _.every(boundingBox, _.isFinite);
-
-/**
- * Returns true if the passed coordinates are valid.
- *
- * @param coordinates
- *
- * @returns {boolean}
- */
-const validateCoordinates = (coordinates) => {
-  let valid = false;
-
-  if (coordinates) {
-    const [latitude, longitude] = coordinates;
-
-    valid = latitude >= MIN_LATITUDE
-      && latitude <= MAX_LATITUDE
-      && longitude >= MIN_LONGITUDE
-      && longitude <= MAX_LONGITUDE;
-  }
-
-  return valid;
-};
-
-export default {
-  addGeoreferenceLayer,
-  toCertaintyCircle,
-  getBoundingBox,
-  removeLayer,
-  toFeature,
-  toFeatureCollection,
-  validateBoundingBox,
-  validateCoordinates
-};

package/types/utils/MapStyles.js.flow

@@ -1,44 +0,0 @@
-// @flow
-
-const point = {
-  type: 'circle',
-  paint: {
-    'circle-radius': [
-      'interpolate',
-      ['linear'],
-      ['number', ['get', 'point_count'], 1],
-      0, 4,
-      10, 14
-    ],
-    'circle-stroke-width': 1,
-    'circle-color': [
-      'case',
-      ['boolean', ['feature-state', 'hover'], false],
-      '#3b62ff',
-      '#ff623b'
-    ],
-    'circle-stroke-color': '#8d260c'
-  }
-};
-
-const fill = {
-  type: 'fill',
-  paint: {
-    'fill-color': '#ff623b',
-    'fill-opacity': 0.2
-  }
-};
-
-const stroke = {
-  type: 'line',
-  paint: {
-    'line-color': '#ff623b',
-    'line-opacity': 0.6
-  }
-};
-
-export default {
-  point,
-  fill,
-  stroke
-};