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

package/types/components/LayerMenuContainer.js.flow

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

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

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

@@ -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/webpack.config.js

@@ -7,6 +7,10 @@ module.exports = configure(__dirname, {
       './@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css$': path.resolve(
         __dirname,
         '../../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+      ),
+      './maplibre-gl/dist/maplibre-gl.css$': path.resolve(
+        __dirname,
+        '../../node_modules/maplibre-gl/dist/maplibre-gl.css'
       )
     }
   }