@performant-software/geospatial 2.2.8-beta.1 → 2.2.8-beta.3

package/dist/index.es65.js

@@ -1,5 +1,13 @@
-var a = { exports: {} };
+import e from "react";
+var t = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+}, d = e.createContext && /* @__PURE__ */ e.createContext(t);
 export {
-  a as __module
+  t as DefaultContext,
+  d as IconContext
 };
 //# sourceMappingURL=index.es65.js.map

package/dist/index.es65.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es65.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.es65.js","sources":["../../../node_modules/react-icons/lib/iconContext.mjs"],"sourcesContent":["import React from \"react\";\nexport var DefaultContext = {\n  color: undefined,\n  size: undefined,\n  className: undefined,\n  style: undefined,\n  attr: undefined\n};\nexport var IconContext = React.createContext && /*#__PURE__*/React.createContext(DefaultContext);"],"names":["DefaultContext","IconContext","React"],"mappings":";AACU,IAACA,IAAiB;AAAA,EAC1B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AACR,GACWC,IAAcC,EAAM,iBAA8BA,gBAAAA,EAAM,cAAcF,CAAc;","x_google_ignoreList":[0]}

package/dist/index.es77.js

@@ -1,4 +1,4 @@
-import { __exports as a } from "./index.es189.js";
+import { __exports as a } from "./index.es204.js";
 function i(r, s) {
   for (var o = 0; o < s.length; o++) {
     const e = s[o];

package/dist/index.es8.js

@@ -1,10 +1,10 @@
 import { j as i } from "./index.es17.js";
 import l from "./index.es14.js";
 import b from "./index.es19.js";
-import { useState as h, useRef as u, useCallback as a, useMemo as g, useEffect as x } from "react";
-import { Map as R, NavigationControl as D } from "./index.es15.js";
-import { FullscreenControl as G } from "./index.es51.js";
-import L from "./index.es22.js";
+import { useState as D, useRef as u, useCallback as a, useMemo as g, useEffect as h } from "react";
+import { Map as x, NavigationControl as R } from "./index.es15.js";
+import { FullscreenControl as w } from "./index.es51.js";
+import G from "./index.es22.js";
 import "./index.es23.js";
 import "./index.es24.js";
 import "./index.es25.js";
@@ -32,49 +32,50 @@ import "./index.es46.js";
 import "./index.es47.js";
 import "./index.es48.js";
 import "./index.es49.js";
-import O from "./index.es2.js";
-import S from "./index.es4.js";
-import E from "./index.es12.js";
+import L from "./index.es2.js";
+import O from "./index.es4.js";
+import S from "./index.es12.js";
 import "./index.es52.js";
-import { feature as _ } from "./index.es53.js";
+import { feature as v } from "./index.es53.js";
 l.constants.classes.CONTROL_BASE = "maplibregl-ctrl";
 l.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-";
 l.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group";
-const j = 2, w = 1e3, m = {
+const B = 2, E = 1e3, m = {
   geometryCollection: "GeometryCollection",
   point: "Point",
   polygon: "Polygon"
-}, F = (t) => {
-  const [c, d] = h(!1), e = u(), s = u(), f = a((o) => {
-    if (!o)
+}, _ = (t) => {
+  const [s, d] = D(!1), o = u(), c = u(), f = a((e) => {
+    if (!e)
       return !1;
-    const { geometry: { type: n } } = o;
+    const { geometry: { type: n } } = e;
     return t.geocoding === "point" && n === m.point || t.geocoding === "polygon" && n === m.polygon;
-  }, [t.geocoding]), r = a(() => t.onChange(e.current.getAll()), [t.onChange]), y = a(({ detail: o }) => {
-    f(o) && (e.current.add(o.geometry), r(), t.onGeocodingSelection(o));
+  }, [t.geocoding]), r = a(() => t.onChange(o.current.getAll()), [t.onChange]), y = a(({ detail: e }) => {
+    f(e) && (o.current.add(e.geometry), r(), t.onGeocodingSelection(e));
   }, [f, r, t.onGeocodingSelection]), p = g(() => `${t.mapStyle}?key=${t.apiKey}`, [t.apiKey, t.mapStyle]), C = g(() => ({ height: 500, width: "100%", ...t.style || {} }), [t.style]);
-  return x(() => {
-    if (c && t.data) {
-      const o = E.getBoundingBox(t.data, t.buffer);
-      o && s.current.fitBounds(o, { duration: t.zoomDuration }), t.data.type === m.geometryCollection ? L.each(t.data.geometries, (n) => {
-        e.current.add(_(n));
-      }) : e.current.add(t.data);
+  return h(() => {
+    if (s && t.data) {
+      const e = S.getBoundingBox(t.data, t.buffer);
+      e && c.current.fitBounds(e, { duration: t.zoomDuration }), t.data.type === m.geometryCollection ? G.each(t.data.geometries, (n) => {
+        o.current.add(v(n));
+      }) : o.current.add(t.data);
     }
-  }, [c, t.data]), /* @__PURE__ */ i.jsxs(
-    R,
+  }, [s, t.data]), /* @__PURE__ */ i.jsxs(
+    x,
     {
       attributionControl: !1,
       cooperativeGestures: t.cooperativeGestures,
-      onLoad: () => d(!0),
       mapLib: b,
-      ref: s,
+      onLoad: () => d(!0),
+      preserveDrawingBuffer: t.preserveDrawingBuffer,
+      ref: c,
       style: C,
       mapStyle: p,
       children: [
         /* @__PURE__ */ i.jsx(
-          O,
+          L,
           {
-            ref: e,
+            ref: o,
             controls: {
               line_string: !0,
               point: !0,
@@ -89,7 +90,7 @@ const j = 2, w = 1e3, m = {
           }
         ),
         t.geocoding && /* @__PURE__ */ i.jsx(
-          S,
+          O,
           {
             apiKey: t.apiKey,
             marker: !1,
@@ -99,19 +100,20 @@ const j = 2, w = 1e3, m = {
             showResultMarkers: !1
           }
         ),
-        t.navigation && /* @__PURE__ */ i.jsx(D, {}),
-        t.fullscreen && /* @__PURE__ */ i.jsx(G, {}),
+        t.navigation && /* @__PURE__ */ i.jsx(R, {}),
+        t.fullscreen && /* @__PURE__ */ i.jsx(w, {}),
         t.children
       ]
     }
   );
 };
-F.defaultProps = {
-  buffer: j,
+_.defaultProps = {
+  buffer: B,
   cooperativeGestures: !0,
-  zoomDuration: w
+  preserveDrawingBuffer: !1,
+  zoomDuration: E
 };
 export {
-  F as default
+  _ as default
 };
 //# sourceMappingURL=index.es8.js.map

package/dist/index.es8.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es8.js","sources":["../src/components/MapDraw.js"],"sourcesContent":["// @flow\n\nimport MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport { feature, type FeatureCollection, type GeometryCollection } from '@turf/turf';\nimport maplibregl from 'maplibre-gl';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Node\n} from 'react';\nimport Map, { type MapboxMap, NavigationControl } from 'react-map-gl';\nimport { FullscreenControl } from 'react-map-gl/maplibre';\nimport _ from 'underscore';\nimport DrawControl from './DrawControl';\nimport GeocodingControl from './GeocodingControl';\nimport MapUtils from '../utils/Map';\nimport './MapDraw.css';\n\n// Override the MapboxDraw components to use MapLibre styles\nMapboxDraw.constants.classes.CONTROL_BASE = 'maplibregl-ctrl';\nMapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';\nMapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';\n\ntype Props = {\n  /**\n   * MapTiler API key.\n   */\n  apiKey?: string,\n\n  /**\n   * The number of miles to buffer the GeoJSON data.\n   */\n  buffer?: number,\n\n  /**\n   * Additional child nodes to render.\n   */\n  children?: Node,\n\n  /**\n   * If `true`, the map will require CTRL + scroll to zoom.\n   */\n  cooperativeGestures?: boolean,\n\n  /**\n   * GeoJSON structured data to be displayed on the map.\n   */\n  data: GeometryCollection | FeatureCollection,\n\n  /**\n   * If `true`, a control will be rendered to put the map in full screen mode.\n   */\n  fullscreen?: boolean,\n\n  /**\n   * Controls the type of GeoJSON data returned from the MapTiler Geocoding API.\n   */\n  geocoding?: undefined | 'point' | 'polygon',\n\n  /**\n   * URL of the map style to render. This URL should contain any necessary API keys.\n   */\n  mapStyle: string,\n\n  /**\n   * If `true`, the navigation controls will display.\n   */\n  navigation?: boolean,\n\n  /**\n   * Callback fired when the map geometries are changed.\n   *\n   * @param features\n   */\n  onChange: (features: Array<any>) => void,\n\n  /**\n   * Callback fired when an item is selected from the geocoding dropdown.\n   */\n  onGeocodingSelection?: (data: any) => void,\n\n  /**\n   * Map style object.\n   */\n  style?: any,\n\n  /**\n   * The time in milliseconds to zoom into the location.\n   */\n  zoomDuration?: number\n};\n\nconst DEFAULT_BUFFER = 2;\nconst DEFAULT_ZOOM_DELAY = 1000;\n\nconst GeometryTypes = {\n  geometryCollection: 'GeometryCollection',\n  point: 'Point',\n  polygon: 'Polygon'\n};\n\n/**\n * This component renders a map with controls for drawing one or more geometries. Geometries can be a point (lat/long),\n * a line, or a polygon.\n */\nconst MapDraw = (props: Props) => {\n  const [loaded, setLoaded] = useState(false);\n\n  const drawRef = useRef<MapboxDraw>();\n  const mapRef = useRef<MapboxMap>();\n\n  /**\n   * Returns true if the passed geometry type is valid. MapTiler fires the onSelection callback twice: Once after\n   * selecting the record from the list (with a point geometry), and once after making a call to the server for the\n   * full record (polygon geometry). We should on fire the onGeocodingSelection callback and add the geometry to the\n   * map once.\n   *\n   * @type {function({geometry: {type: *}}): *}\n   */\n  const isValid = useCallback((detail) => {\n    if (!detail) {\n      return false;\n    }\n\n    const { geometry: { type } } = detail;\n\n    return (props.geocoding === 'point' && type === GeometryTypes.point)\n      || (props.geocoding === 'polygon' && type === GeometryTypes.polygon);\n  }, [props.geocoding]);\n\n  /**\n   * Calls the onChange prop with all of the geometries in the current drawer.\n   *\n   * @type {(function(): void)|*}\n   */\n  const onChange = useCallback(() => props.onChange(drawRef.current.getAll()), [props.onChange]);\n\n  /**\n   * Adds the selected geometry to the map.\n   *\n   * @type {(function({detail: *}): void)|*}\n   */\n  const onSelection = useCallback(({ detail }) => {\n    if (isValid(detail)) {\n      // Add the geometry to the map\n      drawRef.current.add(detail.geometry);\n\n      // Trigger the onChange prop\n      onChange();\n\n      // Call the onGeocoding selection callback\n      props.onGeocodingSelection(detail);\n    }\n  }, [isValid, onChange, props.onGeocodingSelection]);\n\n  /**\n   * Sets the map style URL.\n   *\n   * @type {string}\n   */\n  const mapStyleUrl = useMemo(() => `${props.mapStyle}?key=${props.apiKey}`, [props.apiKey, props.mapStyle]);\n\n  /**\n   * Sets the element map style.\n   *\n   * @type {{width: string, height: number}}\n   */\n  const style = useMemo(() => ({ height: 500, width: '100%', ...(props.style || {}) }), [props.style]);\n\n  /**\n   * Updates the map bounding box and drawer when the geometry is changed.\n   */\n  useEffect(() => {\n    if (loaded && props.data) {\n      // Sets the bounding box for the current geometry\n      const bbox = MapUtils.getBoundingBox(props.data, props.buffer);\n\n      if (bbox) {\n        mapRef.current.fitBounds(bbox, { duration: props.zoomDuration });\n      }\n\n      // Handle special cases for geometry collection (not supported by mabox-gl-draw) and point\n      if (props.data.type === GeometryTypes.geometryCollection) {\n        _.each(props.data.geometries, (geometry) => {\n          drawRef.current.add(feature(geometry));\n        });\n      } else {\n        drawRef.current.add(props.data);\n      }\n    }\n  }, [loaded, props.data]);\n\n  return (\n    <Map\n      attributionControl={false}\n      cooperativeGestures={props.cooperativeGestures}\n      onLoad={() => setLoaded(true)}\n      mapLib={maplibregl}\n      ref={mapRef}\n      style={style}\n      mapStyle={mapStyleUrl}\n    >\n      <DrawControl\n        ref={drawRef}\n        controls={{\n          line_string: true,\n          point: true,\n          polygon: true,\n          trash: true\n        }}\n        displayControlsDefault={false}\n        onCreate={onChange}\n        onUpdate={onChange}\n        onDelete={onChange}\n        position='bottom-left'\n      />\n      { props.geocoding && (\n        <GeocodingControl\n          apiKey={props.apiKey}\n          marker={false}\n          position='top-left'\n          onSelection={onSelection}\n          showFullGeometry={props.geocoding === 'polygon'}\n          showResultMarkers={false}\n        />\n      )}\n      { props.navigation && (\n        <NavigationControl />\n      )}\n      { props.fullscreen && (\n        <FullscreenControl />\n      )}\n      { props.children }\n    </Map>\n  );\n};\n\nMapDraw.defaultProps = {\n  buffer: DEFAULT_BUFFER,\n  cooperativeGestures: true,\n  zoomDuration: DEFAULT_ZOOM_DELAY\n};\n\nexport default MapDraw;\n"],"names":["MapboxDraw","DEFAULT_BUFFER","DEFAULT_ZOOM_DELAY","GeometryTypes","MapDraw","props","loaded","setLoaded","useState","drawRef","useRef","mapRef","isValid","useCallback","detail","type","onChange","onSelection","mapStyleUrl","useMemo","style","useEffect","bbox","MapUtils","_","geometry","feature","jsxs","Map","maplibregl","jsx","DrawControl","GeocodingControl","NavigationControl","FullscreenControl"],"mappings":"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"}
+{"version":3,"file":"index.es8.js","sources":["../src/components/MapDraw.js"],"sourcesContent":["// @flow\n\nimport MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport { feature, type FeatureCollection, type GeometryCollection } from '@turf/turf';\nimport maplibregl from 'maplibre-gl';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Node\n} from 'react';\nimport Map, { type MapboxMap, NavigationControl } from 'react-map-gl';\nimport { FullscreenControl } from 'react-map-gl/maplibre';\nimport _ from 'underscore';\nimport DrawControl from './DrawControl';\nimport GeocodingControl from './GeocodingControl';\nimport MapUtils from '../utils/Map';\nimport './MapDraw.css';\n\n// Override the MapboxDraw components to use MapLibre styles\nMapboxDraw.constants.classes.CONTROL_BASE = 'maplibregl-ctrl';\nMapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';\nMapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';\n\ntype Props = {\n  /**\n   * MapTiler API key.\n   */\n  apiKey?: string,\n\n  /**\n   * The number of miles to buffer the GeoJSON data.\n   */\n  buffer?: number,\n\n  /**\n   * Additional child nodes to render.\n   */\n  children?: Node,\n\n  /**\n   * If `true`, the map will require CTRL + scroll to zoom.\n   */\n  cooperativeGestures?: boolean,\n\n  /**\n   * GeoJSON structured data to be displayed on the map.\n   */\n  data: GeometryCollection | FeatureCollection,\n\n  /**\n   * If `true`, a control will be rendered to put the map in full screen mode.\n   */\n  fullscreen?: boolean,\n\n  /**\n   * Controls the type of GeoJSON data returned from the MapTiler Geocoding API.\n   */\n  geocoding?: undefined | 'point' | 'polygon',\n\n  /**\n   * URL of the map style to render. This URL should contain any necessary API keys.\n   */\n  mapStyle: string,\n\n  /**\n   * If `true`, the navigation controls will display.\n   */\n  navigation?: boolean,\n\n  /**\n   * Callback fired when the map geometries are changed.\n   *\n   * @param features\n   */\n  onChange: (features: Array<any>) => void,\n\n  /**\n   * Callback fired when an item is selected from the geocoding dropdown.\n   */\n  onGeocodingSelection?: (data: any) => void,\n\n  /**\n   * If `true`, the map's canvas can be exported to a PNG using `map.getCanvas().toDataURL()`.\n   */\n  preserveDrawingBuffer?: boolean,\n\n  /**\n   * Map style object.\n   */\n  style?: any,\n\n  /**\n   * The time in milliseconds to zoom into the location.\n   */\n  zoomDuration?: number\n};\n\nconst DEFAULT_BUFFER = 2;\nconst DEFAULT_ZOOM_DELAY = 1000;\n\nconst GeometryTypes = {\n  geometryCollection: 'GeometryCollection',\n  point: 'Point',\n  polygon: 'Polygon'\n};\n\n/**\n * This component renders a map with controls for drawing one or more geometries. Geometries can be a point (lat/long),\n * a line, or a polygon.\n */\nconst MapDraw = (props: Props) => {\n  const [loaded, setLoaded] = useState(false);\n\n  const drawRef = useRef<MapboxDraw>();\n  const mapRef = useRef<MapboxMap>();\n\n  /**\n   * Returns true if the passed geometry type is valid. MapTiler fires the onSelection callback twice: Once after\n   * selecting the record from the list (with a point geometry), and once after making a call to the server for the\n   * full record (polygon geometry). We should on fire the onGeocodingSelection callback and add the geometry to the\n   * map once.\n   *\n   * @type {function({geometry: {type: *}}): *}\n   */\n  const isValid = useCallback((detail) => {\n    if (!detail) {\n      return false;\n    }\n\n    const { geometry: { type } } = detail;\n\n    return (props.geocoding === 'point' && type === GeometryTypes.point)\n      || (props.geocoding === 'polygon' && type === GeometryTypes.polygon);\n  }, [props.geocoding]);\n\n  /**\n   * Calls the onChange prop with all of the geometries in the current drawer.\n   *\n   * @type {(function(): void)|*}\n   */\n  const onChange = useCallback(() => props.onChange(drawRef.current.getAll()), [props.onChange]);\n\n  /**\n   * Adds the selected geometry to the map.\n   *\n   * @type {(function({detail: *}): void)|*}\n   */\n  const onSelection = useCallback(({ detail }) => {\n    if (isValid(detail)) {\n      // Add the geometry to the map\n      drawRef.current.add(detail.geometry);\n\n      // Trigger the onChange prop\n      onChange();\n\n      // Call the onGeocoding selection callback\n      props.onGeocodingSelection(detail);\n    }\n  }, [isValid, onChange, props.onGeocodingSelection]);\n\n  /**\n   * Sets the map style URL.\n   *\n   * @type {string}\n   */\n  const mapStyleUrl = useMemo(() => `${props.mapStyle}?key=${props.apiKey}`, [props.apiKey, props.mapStyle]);\n\n  /**\n   * Sets the element map style.\n   *\n   * @type {{width: string, height: number}}\n   */\n  const style = useMemo(() => ({ height: 500, width: '100%', ...(props.style || {}) }), [props.style]);\n\n  /**\n   * Updates the map bounding box and drawer when the geometry is changed.\n   */\n  useEffect(() => {\n    if (loaded && props.data) {\n      // Sets the bounding box for the current geometry\n      const bbox = MapUtils.getBoundingBox(props.data, props.buffer);\n\n      if (bbox) {\n        mapRef.current.fitBounds(bbox, { duration: props.zoomDuration });\n      }\n\n      // Handle special cases for geometry collection (not supported by mabox-gl-draw) and point\n      if (props.data.type === GeometryTypes.geometryCollection) {\n        _.each(props.data.geometries, (geometry) => {\n          drawRef.current.add(feature(geometry));\n        });\n      } else {\n        drawRef.current.add(props.data);\n      }\n    }\n  }, [loaded, props.data]);\n\n  return (\n    <Map\n      attributionControl={false}\n      cooperativeGestures={props.cooperativeGestures}\n      mapLib={maplibregl}\n      onLoad={() => setLoaded(true)}\n      preserveDrawingBuffer={props.preserveDrawingBuffer}\n      ref={mapRef}\n      style={style}\n      mapStyle={mapStyleUrl}\n    >\n      <DrawControl\n        ref={drawRef}\n        controls={{\n          line_string: true,\n          point: true,\n          polygon: true,\n          trash: true\n        }}\n        displayControlsDefault={false}\n        onCreate={onChange}\n        onUpdate={onChange}\n        onDelete={onChange}\n        position='bottom-left'\n      />\n      { props.geocoding && (\n        <GeocodingControl\n          apiKey={props.apiKey}\n          marker={false}\n          position='top-left'\n          onSelection={onSelection}\n          showFullGeometry={props.geocoding === 'polygon'}\n          showResultMarkers={false}\n        />\n      )}\n      { props.navigation && (\n        <NavigationControl />\n      )}\n      { props.fullscreen && (\n        <FullscreenControl />\n      )}\n      { props.children }\n    </Map>\n  );\n};\n\nMapDraw.defaultProps = {\n  buffer: DEFAULT_BUFFER,\n  cooperativeGestures: true,\n  preserveDrawingBuffer: false,\n  zoomDuration: DEFAULT_ZOOM_DELAY\n};\n\nexport default MapDraw;\n"],"names":["MapboxDraw","DEFAULT_BUFFER","DEFAULT_ZOOM_DELAY","GeometryTypes","MapDraw","props","loaded","setLoaded","useState","drawRef","useRef","mapRef","isValid","useCallback","detail","type","onChange","onSelection","mapStyleUrl","useMemo","style","useEffect","bbox","MapUtils","_","geometry","feature","jsxs","Map","maplibregl","jsx","DrawControl","GeocodingControl","NavigationControl","FullscreenControl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBAA,EAAW,UAAU,QAAQ,eAAe;AAC5CA,EAAW,UAAU,QAAQ,iBAAiB;AAC9CA,EAAW,UAAU,QAAQ,gBAAgB;AA4E7C,MAAMC,IAAiB,GACjBC,IAAqB,KAErBC,IAAgB;AAAA,EACpB,oBAAoB;AAAA,EACpB,OAAO;AAAA,EACP,SAAS;AACX,GAMMC,IAAU,CAACC,MAAiB;AAChC,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAUC,KACVC,IAASD,KAUTE,IAAUC,EAAY,CAACC,MAAW;AACtC,QAAI,CAACA;AACI,aAAA;AAGT,UAAM,EAAE,UAAU,EAAE,MAAAC,QAAWD;AAEvB,WAAAT,EAAM,cAAc,WAAWU,MAASZ,EAAc,SACxDE,EAAM,cAAc,aAAaU,MAASZ,EAAc;AAAA,EAAA,GAC7D,CAACE,EAAM,SAAS,CAAC,GAOdW,IAAWH,EAAY,MAAMR,EAAM,SAASI,EAAQ,QAAQ,OAAQ,CAAA,GAAG,CAACJ,EAAM,QAAQ,CAAC,GAOvFY,IAAcJ,EAAY,CAAC,EAAE,QAAAC,QAAa;AAC1C,IAAAF,EAAQE,CAAM,MAERL,EAAA,QAAQ,IAAIK,EAAO,QAAQ,GAG1BE,KAGTX,EAAM,qBAAqBS,CAAM;AAAA,KAElC,CAACF,GAASI,GAAUX,EAAM,oBAAoB,CAAC,GAO5Ca,IAAcC,EAAQ,MAAM,GAAGd,EAAM,QAAQ,QAAQA,EAAM,MAAM,IAAI,CAACA,EAAM,QAAQA,EAAM,QAAQ,CAAC,GAOnGe,IAAQD,EAAQ,OAAO,EAAE,QAAQ,KAAK,OAAO,QAAQ,GAAId,EAAM,SAAS,CAAA,MAAQ,CAACA,EAAM,KAAK,CAAC;AAKnG,SAAAgB,EAAU,MAAM;AACV,QAAAf,KAAUD,EAAM,MAAM;AAExB,YAAMiB,IAAOC,EAAS,eAAelB,EAAM,MAAMA,EAAM,MAAM;AAE7D,MAAIiB,KACFX,EAAO,QAAQ,UAAUW,GAAM,EAAE,UAAUjB,EAAM,cAAc,GAI7DA,EAAM,KAAK,SAASF,EAAc,qBACpCqB,EAAE,KAAKnB,EAAM,KAAK,YAAY,CAACoB,MAAa;AAC1C,QAAAhB,EAAQ,QAAQ,IAAIiB,EAAQD,CAAQ,CAAC;AAAA,MAAA,CACtC,IAEOhB,EAAA,QAAQ,IAAIJ,EAAM,IAAI;AAAA,IAElC;AAAA,EACC,GAAA,CAACC,GAAQD,EAAM,IAAI,CAAC,GAGrBsB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,oBAAoB;AAAA,MACpB,qBAAqBvB,EAAM;AAAA,MAC3B,QAAQwB;AAAA,MACR,QAAQ,MAAMtB,EAAU,EAAI;AAAA,MAC5B,uBAAuBF,EAAM;AAAA,MAC7B,KAAKM;AAAA,MACL,OAAAS;AAAA,MACA,UAAUF;AAAA,MAEV,UAAA;AAAA,QAAAY,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKtB;AAAA,YACL,UAAU;AAAA,cACR,aAAa;AAAA,cACb,OAAO;AAAA,cACP,SAAS;AAAA,cACT,OAAO;AAAA,YACT;AAAA,YACA,wBAAwB;AAAA,YACxB,UAAUO;AAAA,YACV,UAAUA;AAAA,YACV,UAAUA;AAAA,YACV,UAAS;AAAA,UAAA;AAAA,QACX;AAAA,QACEX,EAAM,aACNyB,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ3B,EAAM;AAAA,YACd,QAAQ;AAAA,YACR,UAAS;AAAA,YACT,aAAAY;AAAA,YACA,kBAAkBZ,EAAM,cAAc;AAAA,YACtC,mBAAmB;AAAA,UAAA;AAAA,QACrB;AAAA,QAEAA,EAAM,cACNyB,gBAAAA,MAACG,GAAkB,CAAA,CAAA;AAAA,QAEnB5B,EAAM,cACNyB,gBAAAA,MAACI,GAAkB,CAAA,CAAA;AAAA,QAEnB7B,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGd;AAEAD,EAAQ,eAAe;AAAA,EACrB,QAAQH;AAAA,EACR,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,cAAcC;AAChB;"}

package/dist/index.es81.js

@@ -2,7 +2,7 @@ import r from "./index.es27.js";
 import n from "./index.es148.js";
 import f from "./index.es109.js";
 import { push as u } from "./index.es23.js";
-import m from "./index.es231.js";
+import m from "./index.es233.js";
 function l(o) {
   return n(f(o), function(t) {
     var i = r[t] = o[t];

package/dist/index.es88.js

@@ -1,4 +1,4 @@
-import t from "./index.es205.js";
+import t from "./index.es207.js";
 const e = t("String");
 export {
   e as default

package/dist/index.es89.js

@@ -1,4 +1,4 @@
-import e from "./index.es205.js";
+import e from "./index.es207.js";
 const t = e("Number");
 export {
   t as default

package/dist/index.es90.js

@@ -1,4 +1,4 @@
-import t from "./index.es205.js";
+import t from "./index.es207.js";
 const a = t("Date");
 export {
   a as default

package/dist/index.es91.js

@@ -1,4 +1,4 @@
-import e from "./index.es205.js";
+import e from "./index.es207.js";
 const o = e("RegExp");
 export {
   o as default

package/dist/index.es92.js

@@ -1,4 +1,4 @@
-import r from "./index.es205.js";
+import r from "./index.es207.js";
 const t = r("Error");
 export {
   t as default

package/dist/index.es93.js

@@ -1,4 +1,4 @@
-import o from "./index.es205.js";
+import o from "./index.es207.js";
 const e = o("Symbol");
 export {
   e as default

package/dist/index.es94.js

@@ -1,4 +1,4 @@
-import r from "./index.es205.js";
+import r from "./index.es207.js";
 const f = r("ArrayBuffer");
 export {
   f as default

package/dist/index.es95.js

@@ -1,4 +1,4 @@
-import r from "./index.es205.js";
+import r from "./index.es207.js";
 import i from "./index.es24.js";
 import a from "./index.es94.js";
 import { hasStringTagBug as e } from "./index.es25.js";

package/dist/index.es96.js

@@ -1,5 +1,5 @@
 import { nativeIsArray as r } from "./index.es23.js";
-import t from "./index.es205.js";
+import t from "./index.es207.js";
 const e = r || t("Array");
 export {
   e as default

package/dist/index.es99.js

@@ -1,7 +1,7 @@
 import { supportsArrayBuffer as i, nativeIsView as t, toString as a } from "./index.es23.js";
 import e from "./index.es95.js";
 import o from "./index.es120.js";
-import n from "./index.es207.js";
+import n from "./index.es209.js";
 var s = /\[object ((I|Ui)nt(8|16|32)|Float(32|64)|Uint8Clamped|Big(I|Ui)nt64)Array\]/;
 function f(r) {
   return t ? t(r) && !e(r) : n(r) && s.test(a.call(r));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "2.2.8-beta.1",
+  "version": "2.2.8-beta.3",
   "description": "A package of components for all things map-related.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",

package/src/components/MapDraw.js

@@ -82,6 +82,11 @@ type Props = {
    */
   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.
    */
@@ -197,8 +202,9 @@ const MapDraw = (props: Props) => {
     <Map
       attributionControl={false}
       cooperativeGestures={props.cooperativeGestures}
-      onLoad={() => setLoaded(true)}
       mapLib={maplibregl}
+      onLoad={() => setLoaded(true)}
+      preserveDrawingBuffer={props.preserveDrawingBuffer}
       ref={mapRef}
       style={style}
       mapStyle={mapStyleUrl}
@@ -241,6 +247,7 @@ const MapDraw = (props: Props) => {
 MapDraw.defaultProps = {
   buffer: DEFAULT_BUFFER,
   cooperativeGestures: true,
+  preserveDrawingBuffer: false,
   zoomDuration: DEFAULT_ZOOM_DELAY
 };
 

package/src/components/WarpedImageLayer.js

@@ -31,9 +31,16 @@ const WarpedImageLayer = (props: Props) => {
 
   const mapRef = useMap();
 
+  /**
+   * Sets the "loaded" attribute on the state based on the current map state.
+   */
   useEffect(() => {
     const instance = mapRef?.current?.getMap();
-    instance.on('load', () => setLoaded(true));
+    if (instance && instance.loaded()) {
+      setLoaded(true);
+    } else if (instance) {
+      instance.on('load', () => setLoaded(true));
+    }
   }, []);
 
   /**

package/types/components/MapDraw.js.flow

@@ -82,6 +82,11 @@ type Props = {
    */
   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.
    */
@@ -197,8 +202,9 @@ const MapDraw = (props: Props) => {
     <Map
       attributionControl={false}
       cooperativeGestures={props.cooperativeGestures}
-      onLoad={() => setLoaded(true)}
       mapLib={maplibregl}
+      onLoad={() => setLoaded(true)}
+      preserveDrawingBuffer={props.preserveDrawingBuffer}
       ref={mapRef}
       style={style}
       mapStyle={mapStyleUrl}
@@ -241,6 +247,7 @@ const MapDraw = (props: Props) => {
 MapDraw.defaultProps = {
   buffer: DEFAULT_BUFFER,
   cooperativeGestures: true,
+  preserveDrawingBuffer: false,
   zoomDuration: DEFAULT_ZOOM_DELAY
 };
 

package/types/components/WarpedImageLayer.js.flow

@@ -31,9 +31,16 @@ const WarpedImageLayer = (props: Props) => {
 
   const mapRef = useMap();
 
+  /**
+   * Sets the "loaded" attribute on the state based on the current map state.
+   */
   useEffect(() => {
     const instance = mapRef?.current?.getMap();
-    instance.on('load', () => setLoaded(true));
+    if (instance && instance.loaded()) {
+      setLoaded(true);
+    } else if (instance) {
+      instance.on('load', () => setLoaded(true));
+    }
   }, []);
 
   /**