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

package/types/components/LocationMarkers.js.flow

@@ -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/types/components/MapCertaintyControl.js.flow

@@ -1,71 +0,0 @@
-// @flow
-
-import cx from 'classnames';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { TbCircleDashed } from 'react-icons/tb';
-import MapControl from './MapControl';
-import './MapCertaintyControl.css';
-
-type Props = {
-  data: any,
-  onChange: (data: any) => void
-};
-
-const MapCertaintyControl = (props: Props) => {
-  const { t } = useTranslation();
-  const [showCertaintyRadiusInput, setShowCertaintyRadiusInput] = useState(false);
-
-  const certaintyRadius = useMemo(() => (
-    props.data?.certainty_radius || 0
-  ), [props.data]);
-
-  const onCertaintyRadiusChange = useCallback((e) => {
-    const radius = parseInt(e.target.value, 10) || 0;
-
-    props.onChange({
-      ...props.data,
-      certainty_radius: radius
-    });
-  }, [props.data, props.onChange]);
-
-  return (
-    <MapControl
-      position='bottom-left'
-    >
-      <div className='certaintyRadiusControl'>
-        <button
-          className={cx(
-            'mapbox-gl-draw_ctrl-draw-btn',
-            'layer-button'
-          )}
-          onClick={() => setShowCertaintyRadiusInput(!showCertaintyRadiusInput)}
-          title={t('PlaceForm.labels.certaintyRadius')}
-          type='button'
-        >
-          <TbCircleDashed />
-        </button>
-        { showCertaintyRadiusInput && (
-          <div
-            className={cx(
-              'certaintyRadiusInputContainer',
-              'mapbox-gl-draw_ctrl-draw-btn'
-            )}
-          >
-            <input
-              className='ui input'
-              type='number'
-              value={certaintyRadius}
-              min={0}
-              step={0.01}
-              onChange={onCertaintyRadiusChange}
-            />
-          </div>
-        )}
-      </div>
-    </MapControl>
-  );
-};
-
-export default MapCertaintyControl;
-

package/types/components/MapControl.js.flow

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