@performant-software/geospatial 3.1.22-beta.0 → 3.1.22-beta.10

package/src/utils/Map.js

@@ -1,258 +0,0 @@
-// @flow
-
-import { WarpedMapLayer } from '@allmaps/maplibre';
-import {
-  bbox,
-  bboxPolygon,
-  bearing,
-  bezierSpline,
-  buffer,
-  destination,
-  distance,
-  feature,
-  featureCollection,
-  lineString,
-  midpoint
-} 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;
-};
-
-/**
- * Returns a GeoJSON FeatureCollection of LineStrings (arcs) for the passed coordinates.
- *
- * @param coordinates
- * @param options
- *
- * @returns {FeatureCollection<LineString, GeoJsonProperties>}
- */
-const toArcs = (coordinates, options = {}) => {
-  const { curvature = 0.2 } = options;
-  const features = [];
-
-  for (let i = 0; i < coordinates.length - 1; i += 1) {
-    const start = coordinates[i];
-    const end = coordinates[i + 1];
-
-    const d = distance(start, end);
-    const m = midpoint(start, end);
-    const b = bearing(start, end);
-
-    const offsetBearing = b + 90 > 180 ? b + 90 - 360 : b + 90;
-    const dest = destination(m, d * curvature, offsetBearing);
-
-    const line = lineString([start, dest.geometry.coordinates, end]);
-    const arc = bezierSpline(line);
-
-    arc.properties = {
-      ...arc.properties,
-      index: i
-    };
-
-    features.push(arc);
-  }
-
-  return featureCollection(features);
-};
-
-export default {
-  addGeoreferenceLayer,
-  toCertaintyCircle,
-  getBoundingBox,
-  removeLayer,
-  toArcs,
-  toFeature,
-  toFeatureCollection,
-  validateBoundingBox,
-  validateCoordinates
-};

package/src/utils/MapStyles.js

@@ -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
-};

package/types/components/CertaintyLayer.js.flow

@@ -1,42 +0,0 @@
-// @flow
-
-import React, { useMemo } from 'react';
-import { Layer, Source } from 'react-map-gl/maplibre';
-import MapStyles from '../utils/MapStyles';
-import MapUtils from '../utils/Map';
-
-type Props = {
-  geometry?: any,
-  certaintyRadius: number
-};
-
-/**
- * Renders circles with the given certainty_radius circumference around all points in a new layer.
- */
-const CertaintyLayer = (props: Props) => {
-  const data = useMemo(() => {
-    if (props.geometry) {
-      return MapUtils.toCertaintyCircle(props.geometry, props.certaintyRadius);
-    } else {
-      return {};
-    }
-  }, [props.geometry, props.certaintyRadius]);
-
-  return (
-    <Source
-      data={data}
-      type='geojson'
-    >
-      <Layer
-        {...MapStyles.fill}
-        id='certainty-layer'
-        paint={{
-          ...MapStyles.fill.paint
-        }}
-      />
-    </Source>
-  );
-};
-
-export default CertaintyLayer;
-

package/types/components/DrawControl.js.flow

@@ -1,43 +0,0 @@
-// @flow
-
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import { forwardRef, useImperativeHandle } from 'react';
-import { useControl, type ControlPosition, type MapboxMap } from 'react-map-gl/maplibre';
-
-type Props = {
-  position?: ControlPosition;
-  onCreate?: (evt: { features: Array<any> }) => void;
-  onUpdate?: (evt: { features: Array<any>, action: string }) => void;
-  onDelete?: (evt: { features: Array<any> }) => void;
-};
-
-const DrawControl = forwardRef((props: Props, ref) => {
-  /**
-   * Creates the drawer ref using MapboxDraw.
-   */
-  const drawRef = useControl(
-    () => new MapboxDraw(props),
-    ({ map }: { map: MapboxMap }) => {
-      map.on('draw.create', props.onCreate);
-      map.on('draw.update', props.onUpdate);
-      map.on('draw.delete', props.onDelete);
-    },
-    ({ map }: { map: MapboxMap }) => {
-      map.off('draw.create', props.onCreate);
-      map.off('draw.update', props.onUpdate);
-      map.off('draw.delete', props.onDelete);
-    },
-    {
-      position: props.position
-    }
-  );
-
-  /**
-   * Exposes the ref for the MapboxDraw object.
-   */
-  useImperativeHandle(ref, () => drawRef, [drawRef]);
-
-  return null;
-});
-
-export default DrawControl;

package/types/components/GeoJsonLayer.js.flow

@@ -1,44 +0,0 @@
-// @flow
-
-import React from 'react';
-import { Layer, Source } from 'react-map-gl/maplibre';
-import MapStyles from '../utils/MapStyles';
-
-type Props = {
-  data?: { [key: string]: any },
-  fillStyle?: { [key: string]: any },
-  lineStyle?: { [key: string]: any },
-  pointStyle?: { [key: string]: any },
-  url?: string
-};
-
-const GeoJsonLayer = (props: Props) => (
-  <Source
-    data={props.data || props.url}
-    type='geojson'
-  >
-    <Layer
-      filter={['!=', '$type', 'Point']}
-      paint={props.fillStyle}
-      type='fill'
-    />
-    <Layer
-      filter={['!=', '$type', 'Point']}
-      paint={props.lineStyle}
-      type='line'
-    />
-    <Layer
-      filter={['==', '$type', 'Point']}
-      paint={props.pointStyle}
-      type='circle'
-    />
-  </Source>
-);
-
-GeoJsonLayer.defaultProps = {
-  fillStyle: MapStyles.fill.paint,
-  pointStyle: MapStyles.point.paint,
-  strokeStyle: MapStyles.stroke.paint
-};
-
-export default GeoJsonLayer;

package/types/components/GeocodingControl.js.flow

@@ -1,34 +0,0 @@
-// @flow
-
-import { GeocodingControl as MapTilerGeocoding } from '@maptiler/geocoding-control/maplibregl';
-import maplibregl from 'maplibre-gl';
-import { forwardRef, useImperativeHandle } from 'react';
-import { useControl, type ControlPosition } from 'react-map-gl/maplibre';
-import './GeocodingControl.css';
-
-type Props = {
-  apiKey: string,
-  onSelection: () => void,
-  position?: ControlPosition
-};
-
-const GeocodingControl = forwardRef(({ position, ...props }: Props, ref) => {
-  /**
-   * Creates the drawer ref using MapboxDraw.
-   */
-  const geocodingRef = useControl(() => {
-    const control = new MapTilerGeocoding({ ...props, maplibregl });
-    control.on('pick', props.onSelection);
-
-    return control;
-  }, { position });
-
-  /**
-   * Exposes the ref for the MapboxDraw object.
-   */
-  useImperativeHandle(ref, () => geocodingRef, [geocodingRef]);
-
-  return null;
-});
-
-export default GeocodingControl;

package/types/components/LayerMenu.js.flow

@@ -1,162 +0,0 @@
-// @flow
-
-import React, {
-  Children,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
-import { BsStack } from 'react-icons/bs';
-import { IoCheckmarkOutline } from 'react-icons/io5';
-import _ from 'underscore';
-import MapControl from './MapControl';
-import './LayerMenu.css';
-
-type Props = {
-  children: Node,
-  className?: string,
-  names: Array<string>,
-  position: 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right'
-};
-
-const MENU_PADDING = 30;
-
-const LayerMenu = (props: Props) => {
-  const [canvasHeight, setCanvasHeight] = useState(0);
-  const [visible, setVisible] = useState();
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  const mapRef = useRef();
-
-  /**
-   * Returns the name of the layer at the passed index.
-   *
-   * @type {unknown}
-   */
-  const getLayerName = useCallback((index) => (
-    props.names && props.names.length > index && props.names[index]
-  ), [props.names]);
-
-  /**
-   * Returns true if the child element at the passed index is visible.
-   *
-   * @type {function(*): *}
-   */
-  const isVisible = useCallback((index) => _.includes(visible, index), [visible]);
-
-  /**
-   * Returns a memoized array of the child elements.
-   *
-   * @type {Array<$NonMaybeType<unknown>>}
-   */
-  const children = useMemo(() => Children.toArray(props.children), [props.children]);
-
-  /**
-   * Returns a memoized array of visible child elements.
-   */
-  const visibleChildren = useMemo(() => _.filter(children, (child, index) => isVisible(index)), [children, isVisible]);
-
-  /**
-   * Toggles the visibility for the child element at the passed index.
-   *
-   * @type {(function(*): void)|*}
-   */
-  const toggleVisibility = useCallback((index) => {
-    let value;
-
-    if (isVisible(index)) {
-      value = _.without(visible, index);
-    } else {
-      value = [...visible, index];
-    }
-
-    setVisible(value);
-  }, [isVisible, visible]);
-
-  /**
-   * Sets all of the child elements to be visible when the component mounts.
-   */
-  useEffect(() => {
-    setVisible(_.times(children.length, (index) => index));
-  }, []);
-
-  /**
-   * Sets the map canvas height.
-   */
-  useEffect(() => {
-    const { current: instance } = mapRef;
-
-    if (instance && instance._canvas) {
-      const { offsetHeight = 0 } = mapRef.current._canvas;
-      setCanvasHeight(offsetHeight);
-    }
-  }, [mapRef.current]);
-
-  if (_.isEmpty(children)) {
-    return null;
-  }
-
-  return (
-    <>
-      <MapControl
-        mapRef={mapRef}
-        position={props.position}
-      >
-        <button
-          aria-label='Toggle Menu'
-          className={props.className || 'mapbox-gl-draw_ctrl-draw-btn layer-button'}
-          onClick={() => setMenuOpen((prevMenuOpen) => !prevMenuOpen)}
-          type='button'
-        >
-          <BsStack
-            size='1.25em'
-          />
-        </button>
-        { menuOpen && (
-          <div
-            className='layer-menu'
-            style={{
-              maxHeight: `calc(${canvasHeight}px - ${MENU_PADDING}px)`
-            }}
-          >
-            <div
-              className='menu'
-            >
-              { _.map(children, (child, index) => (
-                <div
-                  aria-selected={isVisible(index)}
-                  className='option'
-                  key={index}
-                  onClick={() => toggleVisibility(index)}
-                  onKeyDown={() => toggleVisibility(index)}
-                  role='option'
-                  tabIndex={index}
-                >
-                  <div
-                    className='checkmark-container'
-                  >
-                    { isVisible(index) && (
-                      <IoCheckmarkOutline
-                        size='1em'
-                      />
-                    )}
-                  </div>
-                  { getLayerName(index) }
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </MapControl>
-      { visibleChildren }
-    </>
-  );
-};
-
-LayerMenu.defaultProps = {
-  position: 'top-left'
-};
-
-export default LayerMenu;