@performant-software/geospatial 1.1.3-beta.4 → 1.1.3-beta.6

package/src/components/LayerMenu.js

@@ -0,0 +1,158 @@
+// @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 LayerMenuContainer from './LayerMenuContainer';
+import './LayerMenu.css';
+
+type Props = {
+  children: Node,
+  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 (
+    <>
+      <LayerMenuContainer
+        mapRef={mapRef}
+        position={props.position}
+      >
+        <button
+          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'
+                  role='option'
+                  onClick={() => toggleVisibility(index)}
+                  onKeyDown={() => toggleVisibility(index)}
+                  tabIndex={index}
+                >
+                  <div
+                    className='checkmark-container'
+                  >
+                    { isVisible(index) && (
+                      <IoCheckmarkOutline
+                        size='1em'
+                      />
+                    )}
+                  </div>
+                  { getLayerName(index) }
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </LayerMenuContainer>
+      { visibleChildren }
+    </>
+  );
+};
+
+LayerMenu.defaultProps = {
+  position: 'top-left'
+};
+
+export default LayerMenu;

package/src/components/LayerMenuContainer.js

@@ -0,0 +1,80 @@
+// @flow
+
+import {
+  Children,
+  cloneElement,
+  useEffect,
+  useState
+} from 'react';
+import { createPortal } from 'react-dom';
+import { MapboxMap, useControl } from 'react-map-gl';
+import { IControl } from 'maplibre-gl';
+import _ from 'underscore';
+
+/**
+ * Layer control implementation.
+ */
+class LayerControl implements IControl {
+  _map: MapboxMap = null;
+  _container: HTMLElement;
+  _redraw: () => void;
+
+  constructor(redraw: () => void) {
+    this._redraw = redraw;
+  }
+
+  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;
+  }
+
+  onRemove() {
+    this._container.remove();
+    this._map.off('move', this._redraw);
+    this._map = null;
+  }
+
+  getMap() {
+    return this._map;
+  }
+
+  getElement() {
+    return this._container;
+  }
+}
+
+/**
+ * Layer container.
+ *
+ * @param props
+ *
+ * @returns {React$Portal}
+ */
+const LayerMenuContainer = (props) => {
+  const [, setVersion] = useState(0);
+
+  const ctrl = useControl(() => {
+    const forceUpdate = () => setVersion((v) => v + 1);
+    return new LayerControl(forceUpdate);
+  }, { position: props.position });
+
+  const map = ctrl.getMap();
+
+  const children = Children.map(_.compact(props.children), (child) => cloneElement(child, { map }));
+
+  useEffect(() => {
+    if (props.mapRef) {
+      // eslint-disable-next-line no-param-reassign
+      props.mapRef.current = map;
+    }
+  }, [map, props.mapRef]);
+
+  return map && createPortal(children, ctrl.getElement());
+};
+
+export default LayerMenuContainer;

package/src/components/MapDraw.css

@@ -1,5 +1,2 @@
 @import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
-
-div[mapboxgl-children] {
-  height: unset !important;
-}
+@import 'maplibre-gl/dist/maplibre-gl.css';

package/src/components/MapDraw.js

@@ -3,6 +3,8 @@
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import {
   bbox,
+  bboxPolygon,
+  buffer,
   feature,
   type FeatureCollection,
   type GeometryCollection
@@ -16,18 +18,22 @@ import React, {
   useState,
   type Node
 } from 'react';
-import Map, { Layer, MapRef, Source } from 'react-map-gl';
+import Map, { MapRef } from 'react-map-gl';
 import _ from 'underscore';
 import DrawControl from './DrawControl';
 import './MapDraw.css';
 
-type LayerType = {
-  id?: string | number,
-  type: string,
-  data: any
-};
+// 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 = {
+  /**
+   * The number of miles to buffer the GeoJSON data.
+   */
+  buffer?: number,
+
   /**
    * Additional child nodes to render.
    */
@@ -38,8 +44,6 @@ type Props = {
    */
   data: GeometryCollection | FeatureCollection,
 
-  layers: Array<LayerType>,
-
   /**
    * URL of the map style to render. This URL should contain any necessary API keys.
    */
@@ -55,9 +59,17 @@ type Props = {
   /**
    * Map style object.
    */
-  style?: any
+  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'
@@ -73,8 +85,6 @@ const MapDraw = (props: Props) => {
   const drawRef = useRef<MapboxDraw>();
   const mapRef = useRef<MapRef>();
 
-  const geojsonLayers = useMemo(() => _.filter(props.layers, (layer) => !!layer.data), [props.layers]);
-
   /**
    * Calls the onChange prop with all of the geometries in the current drawer.
    *
@@ -96,14 +106,24 @@ const MapDraw = (props: Props) => {
    */
   useEffect(() => {
     if (loaded && props.data) {
-      // Sets the bounding box for the current geometry.
-      const boundingBox = bbox(props.data);
+      // Convert the GeoJSON into a bounding box
+      const box = bbox(props.data);
+
+      // Convert the bounding box to a polygon
+      const polygon = bboxPolygon(box);
+
+      // Create a buffer around the polygon
+      const polygonBuffer = buffer(polygon, props.buffer, { units: 'miles' });
 
+      // Convert the buffer to a bounding box
+      const boundingBox = bbox(polygonBuffer);
+
+      // Sets the bounding box for the current geometry.
       if (_.every(boundingBox, _.isFinite)) {
         const [minLng, minLat, maxLng, maxLat] = boundingBox;
         const bounds = [[minLng, minLat], [maxLng, maxLat]];
 
-        mapRef.current.fitBounds(bounds, { padding: 40, duration: 1000 });
+        mapRef.current.fitBounds(bounds, { duration: props.zoomDuration });
       }
 
       // Handle special cases for geometry collection (not supported by mabox-gl-draw) and point
@@ -138,20 +158,16 @@ const MapDraw = (props: Props) => {
         onCreate={onChange}
         onUpdate={onChange}
         onDelete={onChange}
+        position='bottom-left'
       />
-      { _.map(geojsonLayers, (layer) => (
-        <Source
-          type='geojson'
-          data={layer.data}
-        >
-          <Layer
-            {..._.omit(layer, 'data')}
-          />
-        </Source>
-      ))}
       { props.children }
     </Map>
   );
 };
 
+MapDraw.defaultProps = {
+  buffer: DEFAULT_BUFFER,
+  zoomDuration: DEFAULT_ZOOM_DELAY
+};
+
 export default MapDraw;

package/src/components/RasterLayer.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react';
+import { Layer, Source } from 'react-map-gl';
+
+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 = {
+  opacity: 0.7,
+  tileSize: 256
+};
+
+export default RasterLayer;

package/src/index.js

@@ -2,4 +2,7 @@
 
 // Components
 export { default as DrawControl } from './components/DrawControl';
+export { default as GeoJsonLayer } from './components/GeoJsonLayer';
+export { default as LayerMenu } from './components/LayerMenu';
 export { default as MapDraw } from './components/MapDraw';
+export { default as RasterLayer } from './components/RasterLayer';

package/types/components/GeoJsonLayer.js.flow

@@ -0,0 +1,118 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import { Layer, Source } from 'react-map-gl';
+import _ from 'underscore';
+
+type Props = {
+  data?: { [key: string]: any },
+  fillStyle?: { [key: string]: any },
+  lineStyle?: { [key: string]: any },
+  pointStyle?: { [key: string]: any },
+  url?: string
+};
+
+const DEFAULT_COLOR = '#CC3333';
+const HIGHLIGHT_COLOR = '#990000';
+
+const DEFAULT_FILL_STYLES = {
+  'fill-color': DEFAULT_COLOR,
+  'fill-opacity': 0.2
+};
+
+const DEFAULT_LINE_STYLES = {
+  'line-color': HIGHLIGHT_COLOR,
+  'line-opacity': 0.6
+};
+
+const DEFAULT_POINT_STYLES = {
+  'circle-radius': [
+    'interpolate',
+    ['linear'],
+    ['number', ['get', 'point_count'], 1],
+    0, 4,
+    10, 14
+  ],
+  'circle-stroke-width': 1,
+  'circle-color': DEFAULT_COLOR,
+  'circle-stroke-color': HIGHLIGHT_COLOR
+};
+
+const GeoJsonLayer = (props: Props) => {
+  const [data, setData] = useState(props.data);
+
+  /**
+   * Returns the layer style for the passed style and default.
+   *
+   * @type {function(*, *): *}
+   */
+  const getLayerStyles = useCallback((style, defaultStyle) => _.defaults(style, defaultStyle), []);
+
+  /**
+   * Sets the fill layer style.
+   *
+   * @type {*}
+   */
+  const fillStyle = useMemo(() => (
+    getLayerStyles(props.fillStyle, DEFAULT_FILL_STYLES)
+  ), [getLayerStyles, props.fillStyle]);
+
+  /**
+   * Sets the line layer style.
+   *
+   * @type {*}
+   */
+  const lineStyle = useMemo(() => (
+    getLayerStyles(props.lineStyle, DEFAULT_LINE_STYLES)
+  ), [getLayerStyles, props.lineStyle]);
+
+  /**
+   * Sets the point layer style.
+   *
+   * @type {*}
+   */
+  const pointStyle = useMemo(() => (
+    getLayerStyles(props.pointStyle, DEFAULT_POINT_STYLES)
+  ), [getLayerStyles, props.pointStyle]);
+
+  /**
+   * If the data is passed as a URL, fetches the passed URL and sets the response on the state.
+   */
+  useEffect(() => {
+    if (props.url) {
+      fetch(props.url)
+        .then((response) => response.json())
+        .then((json) => setData(json));
+    }
+  }, [props.url]);
+
+  return (
+    <Source
+      data={data}
+      type='geojson'
+    >
+      <Layer
+        filter={['!=', '$type', 'Point']}
+        paint={fillStyle}
+        type='fill'
+      />
+      <Layer
+        filter={['!=', '$type', 'Point']}
+        paint={lineStyle}
+        type='line'
+      />
+      <Layer
+        filter={['==', '$type', 'Point']}
+        paint={pointStyle}
+        type='circle'
+      />
+    </Source>
+  );
+};
+
+export default GeoJsonLayer;

package/types/components/LayerMenu.js.flow

@@ -0,0 +1,158 @@
+// @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 LayerMenuContainer from './LayerMenuContainer';
+import './LayerMenu.css';
+
+type Props = {
+  children: Node,
+  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 (
+    <>
+      <LayerMenuContainer
+        mapRef={mapRef}
+        position={props.position}
+      >
+        <button
+          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'
+                  role='option'
+                  onClick={() => toggleVisibility(index)}
+                  onKeyDown={() => toggleVisibility(index)}
+                  tabIndex={index}
+                >
+                  <div
+                    className='checkmark-container'
+                  >
+                    { isVisible(index) && (
+                      <IoCheckmarkOutline
+                        size='1em'
+                      />
+                    )}
+                  </div>
+                  { getLayerName(index) }
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </LayerMenuContainer>
+      { visibleChildren }
+    </>
+  );
+};
+
+LayerMenu.defaultProps = {
+  position: 'top-left'
+};
+
+export default LayerMenu;