@performant-software/geospatial 2.2.23-beta.13 → 2.2.23-beta.15

package/dist/index.es80.js

@@ -1,68 +1,14 @@
-import * as u from "react";
-import { useContext as f, useRef as y, useState as m, useMemo as g, useEffect as S, cloneElement as h } from "react";
-import { MapContext as C } from "./index.es67.js";
-import s from "./index.es204.js";
-import { deepEqual as v } from "./index.es203.js";
-let x = 0;
-function U(t, e, a) {
-  if (t.style && t.style._loaded) {
-    const n = { ...a };
-    return delete n.id, delete n.children, t.addSource(e, n), t.getSource(e);
-  }
-  return null;
-}
-function b(t, e, a) {
-  s(e.id === a.id, "source id changed"), s(e.type === a.type, "source type changed");
-  let n = "", r = 0;
-  for (const o in e)
-    o !== "children" && o !== "id" && !v(a[o], e[o]) && (n = o, r++);
-  if (!r)
-    return;
-  const l = e.type;
-  if (l === "geojson")
-    t.setData(e.data);
-  else if (l === "image")
-    t.updateImage({
-      url: e.url,
-      coordinates: e.coordinates
-    });
-  else if ("setCoordinates" in t && r === 1 && n === "coordinates")
-    t.setCoordinates(e.coordinates);
-  else if ("setUrl" in t)
-    switch (n) {
-      case "url":
-        t.setUrl(e.url);
-        break;
-      case "tiles":
-        t.setTiles(e.tiles);
-        break;
-    }
-  else
-    console.warn(`Unable to update <Source> prop: ${n}`);
-}
-function R(t) {
-  const e = f(C).map.getMap(), a = y(t), [, n] = m(0), r = g(() => t.id || `jsx-source-${x++}`, []);
-  S(() => {
-    if (e) {
-      const o = () => setTimeout(() => n((i) => i + 1), 0);
-      return e.on("styledata", o), o(), () => {
-        var i;
-        if (e.off("styledata", o), e.style && e.style._loaded && e.getSource(r)) {
-          const c = (i = e.getStyle()) === null || i === void 0 ? void 0 : i.layers;
-          if (c)
-            for (const d of c)
-              d.source === r && e.removeLayer(d.id);
-          e.removeSource(r);
-        }
-      };
-    }
-  }, [e]);
-  let l = e && e.style && e.getSource(r);
-  return l ? b(l, t, a.current) : l = U(e, r, t), a.current = t, l && u.Children.map(t.children, (o) => o && h(o, {
-    source: r
-  })) || null;
+import * as e from "react";
+import { useContext as n, useMemo as a } from "react";
+import { MapContext as u } from "./index.es70.js";
+const p = e.createContext(null);
+function c() {
+  var o;
+  const r = (o = n(p)) === null || o === void 0 ? void 0 : o.maps, t = n(u);
+  return a(() => ({ ...r, current: t == null ? void 0 : t.map }), [r, t]);
 }
 export {
-  R as default
+  p as MountedMapsContext,
+  c as useMap
 };
 //# sourceMappingURL=index.es80.js.map

package/dist/index.es80.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es80.js","sources":["../../../node_modules/react-map-gl/dist/esm/components/source.js"],"sourcesContent":["import * as React from 'react';\nimport { useContext, useEffect, useMemo, useState, useRef } from 'react';\nimport { cloneElement } from 'react';\nimport { MapContext } from './map';\nimport assert from '../utils/assert';\nimport { deepEqual } from '../utils/deep-equal';\nlet sourceCounter = 0;\nfunction createSource(map, id, props) {\n    // @ts-ignore\n    if (map.style && map.style._loaded) {\n        const options = { ...props };\n        delete options.id;\n        delete options.children;\n        // @ts-ignore\n        map.addSource(id, options);\n        return map.getSource(id);\n    }\n    return null;\n}\n/* eslint-disable complexity */\nfunction updateSource(source, props, prevProps) {\n    assert(props.id === prevProps.id, 'source id changed');\n    assert(props.type === prevProps.type, 'source type changed');\n    let changedKey = '';\n    let changedKeyCount = 0;\n    for (const key in props) {\n        if (key !== 'children' && key !== 'id' && !deepEqual(prevProps[key], props[key])) {\n            changedKey = key;\n            changedKeyCount++;\n        }\n    }\n    if (!changedKeyCount) {\n        return;\n    }\n    const type = props.type;\n    if (type === 'geojson') {\n        source.setData(props.data);\n    }\n    else if (type === 'image') {\n        source.updateImage({\n            url: props.url,\n            coordinates: props.coordinates\n        });\n    }\n    else if ('setCoordinates' in source && changedKeyCount === 1 && changedKey === 'coordinates') {\n        source.setCoordinates(props.coordinates);\n    }\n    else if ('setUrl' in source) {\n        // Added in 1.12.0:\n        // vectorTileSource.setTiles\n        // vectorTileSource.setUrl\n        switch (changedKey) {\n            case 'url':\n                source.setUrl(props.url);\n                break;\n            case 'tiles':\n                source.setTiles(props.tiles);\n                break;\n            default:\n        }\n    }\n    else {\n        // eslint-disable-next-line\n        console.warn(`Unable to update <Source> prop: ${changedKey}`);\n    }\n}\n/* eslint-enable complexity */\nfunction Source(props) {\n    const map = useContext(MapContext).map.getMap();\n    const propsRef = useRef(props);\n    const [, setStyleLoaded] = useState(0);\n    const id = useMemo(() => props.id || `jsx-source-${sourceCounter++}`, []);\n    useEffect(() => {\n        if (map) {\n            /* global setTimeout */\n            const forceUpdate = () => setTimeout(() => setStyleLoaded(version => version + 1), 0);\n            map.on('styledata', forceUpdate);\n            forceUpdate();\n            return () => {\n                var _a;\n                map.off('styledata', forceUpdate);\n                // @ts-ignore\n                if (map.style && map.style._loaded && map.getSource(id)) {\n                    // Parent effects are destroyed before child ones, see\n                    // https://github.com/facebook/react/issues/16728\n                    // Source can only be removed after all child layers are removed\n                    const allLayers = (_a = map.getStyle()) === null || _a === void 0 ? void 0 : _a.layers;\n                    if (allLayers) {\n                        for (const layer of allLayers) {\n                            // @ts-ignore (2339) source does not exist on all layer types\n                            if (layer.source === id) {\n                                map.removeLayer(layer.id);\n                            }\n                        }\n                    }\n                    map.removeSource(id);\n                }\n            };\n        }\n        return undefined;\n    }, [map]);\n    // @ts-ignore\n    let source = map && map.style && map.getSource(id);\n    if (source) {\n        updateSource(source, props, propsRef.current);\n    }\n    else {\n        source = createSource(map, id, props);\n    }\n    propsRef.current = props;\n    return ((source &&\n        React.Children.map(props.children, child => child &&\n            cloneElement(child, {\n                source: id\n            }))) ||\n        null);\n}\nexport default Source;\n//# sourceMappingURL=source.js.map"],"names":["sourceCounter","createSource","map","id","props","options","updateSource","source","prevProps","assert","changedKey","changedKeyCount","key","deepEqual","type","Source","useContext","MapContext","propsRef","useRef","setStyleLoaded","useState","useMemo","useEffect","forceUpdate","version","_a","allLayers","layer","React","child","cloneElement"],"mappings":";;;;;AAMA,IAAIA,IAAgB;AACpB,SAASC,EAAaC,GAAKC,GAAIC,GAAO;AAElC,MAAIF,EAAI,SAASA,EAAI,MAAM,SAAS;AAC1B,UAAAG,IAAU,EAAE,GAAGD;AACrB,kBAAOC,EAAQ,IACf,OAAOA,EAAQ,UAEXH,EAAA,UAAUC,GAAIE,CAAO,GAClBH,EAAI,UAAUC,CAAE;AAAA,EAC3B;AACO,SAAA;AACX;AAEA,SAASG,EAAaC,GAAQH,GAAOI,GAAW;AAC5C,EAAAC,EAAOL,EAAM,OAAOI,EAAU,IAAI,mBAAmB,GACrDC,EAAOL,EAAM,SAASI,EAAU,MAAM,qBAAqB;AAC3D,MAAIE,IAAa,IACbC,IAAkB;AACtB,aAAWC,KAAOR;AACd,IAAIQ,MAAQ,cAAcA,MAAQ,QAAQ,CAACC,EAAUL,EAAUI,CAAG,GAAGR,EAAMQ,CAAG,CAAC,MAC9DF,IAAAE,GACbD;AAGR,MAAI,CAACA;AACD;AAEJ,QAAMG,IAAOV,EAAM;AACnB,MAAIU,MAAS;AACF,IAAAP,EAAA,QAAQH,EAAM,IAAI;AAAA,WAEpBU,MAAS;AACd,IAAAP,EAAO,YAAY;AAAA,MACf,KAAKH,EAAM;AAAA,MACX,aAAaA,EAAM;AAAA,IAAA,CACtB;AAAA,WAEI,oBAAoBG,KAAUI,MAAoB,KAAKD,MAAe;AACpE,IAAAH,EAAA,eAAeH,EAAM,WAAW;AAAA,WAElC,YAAYG;AAIjB,YAAQG,GAAY;AAAA,MAChB,KAAK;AACM,QAAAH,EAAA,OAAOH,EAAM,GAAG;AACvB;AAAA,MACJ,KAAK;AACM,QAAAG,EAAA,SAASH,EAAM,KAAK;AAC3B;AAAA,IAER;AAAA;AAIQ,YAAA,KAAK,mCAAmCM,CAAU,EAAE;AAEpE;AAEA,SAASK,EAAOX,GAAO;AACnB,QAAMF,IAAMc,EAAWC,CAAU,EAAE,IAAI,OAAO,GACxCC,IAAWC,EAAOf,CAAK,GACvB,GAAGgB,CAAc,IAAIC,EAAS,CAAC,GAC/BlB,IAAKmB,EAAQ,MAAMlB,EAAM,MAAM,cAAcJ,GAAe,IAAI,CAAA,CAAE;AACxE,EAAAuB,EAAU,MAAM;AACZ,QAAIrB,GAAK;AAEC,YAAAsB,IAAc,MAAM,WAAW,MAAMJ,EAAe,CAAWK,MAAAA,IAAU,CAAC,GAAG,CAAC;AAChF,aAAAvB,EAAA,GAAG,aAAasB,CAAW,GACnBA,KACL,MAAM;AACL,YAAAE;AAGA,YAFAxB,EAAA,IAAI,aAAasB,CAAW,GAE5BtB,EAAI,SAASA,EAAI,MAAM,WAAWA,EAAI,UAAUC,CAAE,GAAG;AAI/C,gBAAAwB,KAAaD,IAAKxB,EAAI,SAAA,OAAgB,QAAQwB,MAAO,SAAS,SAASA,EAAG;AAChF,cAAIC;AACA,uBAAWC,KAASD;AAEZ,cAAAC,EAAM,WAAWzB,KACbD,EAAA,YAAY0B,EAAM,EAAE;AAIpC,UAAA1B,EAAI,aAAaC,CAAE;AAAA,QACvB;AAAA,MAAA;AAAA,IAER;AAAA,EACO,GACR,CAACD,CAAG,CAAC;AAER,MAAIK,IAASL,KAAOA,EAAI,SAASA,EAAI,UAAUC,CAAE;AACjD,SAAII,IACaD,EAAAC,GAAQH,GAAOc,EAAS,OAAO,IAGnCX,IAAAN,EAAaC,GAAKC,GAAIC,CAAK,GAExCc,EAAS,UAAUd,GACVG,KACLsB,EAAM,SAAS,IAAIzB,EAAM,UAAU,CAAA0B,MAASA,KACxCC,EAAaD,GAAO;AAAA,IAChB,QAAQ3B;AAAA,EAAA,CACX,CAAC,KACN;AACR;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.es80.js","sources":["../../../node_modules/react-map-gl/dist/esm/components/use-map.js"],"sourcesContent":["import * as React from 'react';\nimport { useState, useCallback, useMemo, useContext } from 'react';\nimport { MapContext } from './map';\nexport const MountedMapsContext = React.createContext(null);\nexport const MapProvider = props => {\n    const [maps, setMaps] = useState({});\n    const onMapMount = useCallback((map, id = 'default') => {\n        setMaps(currMaps => {\n            if (id === 'current') {\n                throw new Error(\"'current' cannot be used as map id\");\n            }\n            if (currMaps[id]) {\n                throw new Error(`Multiple maps with the same id: ${id}`);\n            }\n            return { ...currMaps, [id]: map };\n        });\n    }, []);\n    const onMapUnmount = useCallback((id = 'default') => {\n        setMaps(currMaps => {\n            if (currMaps[id]) {\n                const nextMaps = { ...currMaps };\n                delete nextMaps[id];\n                return nextMaps;\n            }\n            return currMaps;\n        });\n    }, []);\n    return (React.createElement(MountedMapsContext.Provider, { value: {\n            maps,\n            onMapMount,\n            onMapUnmount\n        } }, props.children));\n};\nexport function useMap() {\n    var _a;\n    const maps = (_a = useContext(MountedMapsContext)) === null || _a === void 0 ? void 0 : _a.maps;\n    const currentMap = useContext(MapContext);\n    const mapsWithCurrent = useMemo(() => {\n        return { ...maps, current: currentMap === null || currentMap === void 0 ? void 0 : currentMap.map };\n    }, [maps, currentMap]);\n    return mapsWithCurrent;\n}\n//# sourceMappingURL=use-map.js.map"],"names":["MountedMapsContext","React","useMap","_a","maps","useContext","currentMap","MapContext","useMemo"],"mappings":";;;AAGa,MAAAA,IAAqBC,EAAM,cAAc,IAAI;AA8BnD,SAASC,IAAS;AACjB,MAAAC;AACE,QAAAC,KAAQD,IAAKE,EAAWL,CAAkB,OAAO,QAAQG,MAAO,SAAS,SAASA,EAAG,MACrFG,IAAaD,EAAWE,CAAU;AAIjC,SAHiBC,EAAQ,OACrB,EAAE,GAAGJ,GAAM,SAASE,KAAe,OAAgC,SAASA,EAAW,IAAI,IACnG,CAACF,GAAME,CAAU,CAAC;AAEzB;","x_google_ignoreList":[0]}

package/package.json

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

package/src/components/LocationMarkers.js

@@ -99,6 +99,16 @@ const LocationMarkers = (props: Props) => {
    */
   const data = useMemo(() => (_.isEmpty(props.data) ? null : props.data), [props.data]);
 
+  const cluster = useMemo(() => {
+    if (!props.cluster) {
+      return false;
+    }
+
+    console.log(data);
+
+    return true;
+  }, [data, props.cluster]);
+
   /**
    * Sets the bounding box on the map.
    */
@@ -125,7 +135,7 @@ const LocationMarkers = (props: Props) => {
         />
       )}
       <GeoJSONLayer
-        cluster={props.cluster}
+        cluster={cluster}
         clusterMaxZoom={props.clusterMaxZoom}
         clusterMinPoints={props.clusterMinPoints}
         clusterProperties={props.clusterProperties}

package/types/components/LocationMarker.js.flow

@@ -0,0 +1,82 @@
+// @flow
+
+import { MixedGeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';
+import React, { useEffect } from 'react';
+import { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '../utils/MapStyles';
+import MapUtils from '../utils/Map';
+
+type Props = {
+  /**
+   * If `true`, the point marker will display with a pulsing animation.
+   */
+  animate?: boolean,
+
+  /**
+   * The number of miles to buffer the GeoJSON data.
+   */
+  buffer: number,
+
+  /**
+   * The GeoJSON data representing the location.
+   */
+  data: { [key: string]: any },
+
+  /**
+   * GeoJSON layer fill style.
+   */
+  fillStyle?: { [key: string]: any },
+
+  /**
+   * GeoJSON layer point style.
+   */
+  pointStyle?: { [key: string]: any },
+
+  /**
+   * GeoJSON layer stroke style
+   */
+  strokeStyle?: { [key: string]: any }
+};
+
+const DEFAULT_BUFFER = 2;
+
+/**
+ * This component renders a location marker to be used in a Peripleo context.
+ */
+const LocationMarker = (props: Props) => {
+  const map = useMap();
+
+  /**
+   * Sets the bounding box on the map.
+   */
+  useEffect(() => {
+    if (map && props.data) {
+      const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);
+      map.fitBounds(boundingBox);
+    }
+  }, [map, props.buffer, props.data]);
+
+  return (
+    <>
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+        />
+      )}
+      <MixedGeoJSONLayer
+        data={props.data}
+        fillStyle={props.fillStyle}
+        strokeStyle={props.strokeStyle}
+        pointStyle={props.pointStyle}
+      />
+    </>
+  );
+};
+
+LocationMarker.defaultProps = {
+  buffer: DEFAULT_BUFFER,
+  fillStyle: DEFAULT_FILL_STYLE,
+  pointStyle: DEFAULT_POINT_STYLE,
+  strokeStyle: DEFAULT_STROKE_STYLE
+};
+
+export default LocationMarker;

package/types/components/LocationMarkers.js.flow

@@ -99,6 +99,16 @@ const LocationMarkers = (props: Props) => {
    */
   const data = useMemo(() => (_.isEmpty(props.data) ? null : props.data), [props.data]);
 
+  const cluster = useMemo(() => {
+    if (!props.cluster) {
+      return false;
+    }
+
+    console.log(data);
+
+    return true;
+  }, [data, props.cluster]);
+
   /**
    * Sets the bounding box on the map.
    */
@@ -125,7 +135,7 @@ const LocationMarkers = (props: Props) => {
         />
       )}
       <GeoJSONLayer
-        cluster={props.cluster}
+        cluster={cluster}
         clusterMaxZoom={props.clusterMaxZoom}
         clusterMinPoints={props.clusterMinPoints}
         clusterProperties={props.clusterProperties}