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

package/src/components/CertaintyLayer.js

@@ -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/src/components/DrawControl.js

@@ -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/src/components/GeoJsonLayer.js

@@ -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/src/components/GeocodingControl.css

@@ -1,3 +0,0 @@
-.maplibregl-ctrl-top-left .maplibregl-ctrl:empty {
-  margin: 0;
-}

package/src/components/GeocodingControl.js

@@ -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/src/components/LayerMenu.css

@@ -1,38 +0,0 @@
-.maplibregl-ctrl-group.maplibregl-ctrl button.layer-button.mapbox-gl-draw_ctrl-draw-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #000000;
-}
-
-.maplibregl-ctrl-group.maplibregl-ctrl .layer-menu {
-  background-color: #FFFFFF;
-  border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 2px;
-  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-  position: absolute;
-  top: 0px;
-  left: 40px;
-  overflow: auto;
-  width: max-content;
-}
-
-.maplibregl-ctrl-group.maplibregl-ctrl .layer-menu > .menu > .option {
-  cursor: pointer;
-  padding: 0.7em 2em 0.7em 2em;
-  pointer-events: all;
-  display: flex;
-  align-items: center;
-}
-
-.maplibregl-ctrl-group.maplibregl-ctrl .layer-menu > .menu > .option:hover {
-  background-color: rgba(0, 0, 0, .05);
-}
-
-.maplibregl-ctrl-group.maplibregl-ctrl .layer-menu > .menu > .option > .checkmark-container {
-  color: #009E60;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  width: 20px;
-}

package/src/components/LayerMenu.js

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

package/src/components/LocationMarkers.js

@@ -1,163 +0,0 @@
-// @flow
-
-import { GeoJSONLayer, PulsingMarkerLayer, useLoadedMap } from '@peripleo/maplibre';
-import React, { useEffect, useMemo } from 'react';
-import _ from 'underscore';
-import MapStyles from '../utils/MapStyles';
-import MapUtils from '../utils/Map';
-
-type Props = {
-  /**
-   * If `true`, the point marker will display with a pulsing animation.
-   */
-  animate?: boolean,
-
-  /**
-   * (Optional) data to pass to the fitToBounds function.
-   */
-  boundingBoxData?: any,
-
-  /**
-   * (Optional) options to pass to the fitToBounds function.
-   * See [spec](https://maplibre.org/maplibre-gl-js/docs/API/types/FitBoundsOptions/).
-   */
-  boundingBoxOptions?: any,
-
-  /**
-   * The number of miles to buffer the GeoJSON data.
-   */
-  buffer: number,
-
-  /**
-   * If true, markers will be clustered before the specified zoom level.
-   */
-  cluster?: boolean,
-
-  /**
-   * Max zoom to cluster points on.
-   */
-  clusterMaxZoom?: number,
-
-  /**
-   * Minimum number of points necessary to form a cluster.
-   */
-  clusterMinPoints?: number,
-
-  /**
-   * An object defining custom properties on the generated clusters.
-   */
-  clusterProperties?: any,
-
-  /**
-   * Radius of each cluster when clustering point.
-   */
-  clusterRadius?: number,
-
-  /**
-   * The GeoJSON data representing the location.
-   */
-  data: { [key: string]: any },
-
-  /**
-   * GeoJSON layer fill style.
-   */
-  fillStyle?: { [key: string]: any },
-
-  /**
-   * If `true`, the map will fit the bounding box around the passed data.
-   */
-  fitBoundingBox?: boolean,
-
-  /**
-   * If `true`, the selection and hover state will apply to the layer.
-   */
-  interactive?: boolean,
-
-  /**
-   * An ID value to apply to the layer.
-   */
-  layerId?: string,
-
-  /**
-   * GeoJSON layer point style.
-   */
-  pointStyle?: { [key: string]: any },
-
-  /**
-   * GeoJSON layer stroke style
-   */
-  strokeStyle?: { [key: string]: any },
-
-  /**
-   * If true, the layer will be visible on the map.
-   */
-  visible?: boolean
-};
-
-const DEFAULT_BUFFER = 2;
-
-/**
- * This component renders a location marker to be used in a Peripleo context.
- */
-const LocationMarkers = (props: Props) => {
-  const map = useLoadedMap();
-
-  /**
-   * Memo-izes the data prop.
-   *
-   * @type {{[p: string]: *}}
-   */
-  const data = useMemo(() => (_.isEmpty(props.data) ? null : props.data), [props.data]);
-
-  /**
-   * Sets the bounding box on the map.
-   */
-  useEffect(() => {
-    if (map && data && props.fitBoundingBox) {
-      const bbox = MapUtils.getBoundingBox(data, props.buffer);
-
-      if (bbox) {
-        map.fitBounds(bbox, props.boundingBoxOptions, props.boundingBoxData);
-      }
-    }
-  }, [map, props.buffer, props.data, props.boundingBoxData, props.boundingBoxOptions, props.fitBoundingBox]);
-
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <>
-      { props.animate && (
-        <PulsingMarkerLayer
-          data={props.data}
-          id={props.layerId}
-        />
-      )}
-      <GeoJSONLayer
-        cluster={props.cluster}
-        clusterMaxZoom={props.clusterMaxZoom}
-        clusterMinPoints={props.clusterMinPoints}
-        clusterProperties={props.clusterProperties}
-        clusterRadius={props.clusterRadius}
-        data={props.data}
-        fillStyle={props.fillStyle}
-        id={props.layerId}
-        interactive={props.interactive}
-        strokeStyle={props.strokeStyle}
-        pointStyle={props.pointStyle}
-        visible={props.visible}
-      />
-    </>
-  );
-};
-
-LocationMarkers.defaultProps = {
-  buffer: DEFAULT_BUFFER,
-  fillStyle: MapStyles.fill,
-  fitBoundingBox: true,
-  pointStyle: MapStyles.point,
-  strokeStyle: MapStyles.stroke
-};
-
-export default LocationMarkers;

package/src/components/MapControl.js

@@ -1,120 +0,0 @@
-// @flow
-
-import { IControl } from 'maplibre-gl';
-import {
-  Children,
-  cloneElement,
-  useCallback,
-  useEffect,
-  useState
-} from 'react';
-import { createPortal } from 'react-dom';
-import { type MapboxMap, useControl } from 'react-map-gl/maplibre';
-import _ from 'underscore';
-
-/**
- * Class to implement the IControl interface to allow custom controls to be drawn on the map.
- */
-class IControlImpl implements IControl {
-  _map: MapboxMap = null;
-  _container: HTMLElement;
-  _redraw: () => void;
-
-  /**
-   * Constructs a new IControlImpl object.
-   *
-   * @param redraw
-   */
-  constructor(redraw: () => void) {
-    this._redraw = redraw;
-  }
-
-  /**
-   * Creates the container when the component is added to the passed map.
-   *
-   * @param map
-   *
-   * @returns {HTMLElement}
-   */
-  onAdd(map) {
-    this._map = map;
-    map.on('move', this._redraw);
-
-    this._container = document.createElement('div');
-    this._container.className = 'maplibregl-ctrl-group maplibregl-ctrl';
-    this._redraw();
-    return this._container;
-  }
-
-  /**
-   * Removes the container when the component is removed from the map.
-   */
-  onRemove() {
-    this._container.remove();
-    this._map.off('move', this._redraw);
-    this._map = null;
-  }
-
-  /**
-   * Returns the map instance.
-   *
-   * @returns {mapboxgl.Map}
-   */
-  getMap() {
-    return this._map;
-  }
-
-  /**
-   * Returns the container instance.
-   *
-   * @returns {HTMLElement}
-   */
-  getElement() {
-    return this._container;
-  }
-}
-
-const MapControl = (props) => {
-  const [, setVersion] = useState(0);
-
-  /**
-   * Forces the component to re-render on map move.
-   *
-   * @type {function(): void}
-   */
-  const forceUpdate = useCallback(() => setVersion((v) => v + 1), []);
-
-  /**
-   * Creates the map control.
-   *
-   * @type {IControlImpl}
-   */
-  const ctrl = useControl(() => new IControlImpl(forceUpdate), { position: props.position });
-
-  /**
-   * Sets the map instance.
-   *
-   * @type {mapboxgl.Map}
-   */
-  const map = ctrl.getMap();
-
-  /**
-   * Creates the list of children to be added to the map instance.
-   *
-   * @type {Array<$NonMaybeType<*>>}
-   */
-  const children = Children.map(_.compact(Children.toArray(props.children)), (child) => cloneElement(child, { map }));
-
-  /**
-   * Sets the map ref.
-   */
-  useEffect(() => {
-    if (props.mapRef) {
-      props.mapRef.current = map;
-    }
-  }, [map, props.mapRef]);
-
-  return map && createPortal(children, ctrl.getElement());
-};
-
-export default MapControl;

package/src/components/MapDraw.css

@@ -1,2 +0,0 @@
-@import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
-@import 'maplibre-gl/dist/maplibre-gl.css';