@mapcomponents/react-maplibre 0.1.92 → 0.1.94

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## [v0.1.93] - 2024-01-17
+
+### Fixed
+
+- 0af148b: remove conditional use of useLayer hook for label layer in MlGeoJsonLayer
+- 718afe6: fix useSource cleanup error
+- c6856e6: fix MlTemporalController to work with useLayer, MlGeoJsonLayer adjustments
+
 ## [v0.1.92] - 2024-01-16
 
 ### Fixed

package/dist/hooks/useLayer.d.ts

@@ -1,5 +1,5 @@
 import { useMapType } from './useMap';
-import { SourceSpecification, LayerSpecification, MapMouseEvent, GeoJSONFeature, Style, MapEventType, Map, VideoSourceSpecification, ImageSourceSpecification } from 'maplibre-gl';
+import { GeoJSONSourceSpecification, LayerSpecification, MapMouseEvent, GeoJSONFeature, Style, MapEventType, Map, FilterSpecification } from 'maplibre-gl';
 import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
 import { GeoJSONObject } from '@turf/turf';
 type getLayerType = Style['getLayer'];
@@ -21,8 +21,9 @@ export interface useLayerProps {
     insertBeforeFirstSymbolLayer?: boolean;
     geojson?: GeoJSONObject;
     options: Partial<LayerSpecification & {
-        source?: Partial<Exclude<SourceSpecification, VideoSourceSpecification | ImageSourceSpecification>>;
+        source?: GeoJSONSourceSpecification | string;
         id?: string;
+        filter?: FilterSpecification;
     }>;
     onHover?: (ev: MapEventType & unknown) => Map | void;
     onClick?: (ev: MapEventType & unknown) => Map | void;

package/dist/index.esm.js

@@ -2437,7 +2437,7 @@ function useLayer(props) {
     var initializedRef = React.useRef(false);
     var layerId = React.useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
     var createLayer = React.useCallback(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         if (!mapHook.map || (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map.cancelled))
             return;
         if (mapHook.map.map.getLayer(layerId.current)) {
@@ -2451,26 +2451,35 @@ function useLayer(props) {
                 return;
             }
         }
+        if (typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) !== 'string' &&
+            !props.geojson &&
+            !((_d = (_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.source) === null || _d === void 0 ? void 0 : _d.data)) {
+            return;
+        }
         if (typeof props.options.type === 'undefined') {
             return;
         }
         initializedRef.current = true;
         try {
             mapHook.map.addLayer(__assign(__assign(__assign(__assign({}, props.options), (props.geojson &&
-                (!((_b = props.options) === null || _b === void 0 ? void 0 : _b.source) ||
-                    (((_d = (_c = props.options) === null || _c === void 0 ? void 0 : _c.source) === null || _d === void 0 ? void 0 : _d.attribution) && !((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.source) === null || _f === void 0 ? void 0 : _f.type))) // if either options.source isn't defined or only options.source.attribution is defined
+                (!((_e = props.options) === null || _e === void 0 ? void 0 : _e.source) ||
+                    (typeof ((_f = props === null || props === void 0 ? void 0 : props.options) === null || _f === void 0 ? void 0 : _f.source) !== 'string' &&
+                        ((_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.source) === null || _h === void 0 ? void 0 : _h.attribution) &&
+                        !((_k = (_j = props.options) === null || _j === void 0 ? void 0 : _j.source) === null || _k === void 0 ? void 0 : _k.type))) // if either options.source isn't defined or only options.source.attribution is defined
                 ? {
                     source: {
                         type: 'geojson',
                         data: props.geojson,
-                        attribution: ((_g = props.options.source) === null || _g === void 0 ? void 0 : _g.attribution)
-                            ? (_h = props.options.source) === null || _h === void 0 ? void 0 : _h.attribution
+                        attribution: typeof ((_l = props === null || props === void 0 ? void 0 : props.options) === null || _l === void 0 ? void 0 : _l.source) !== 'string' && ((_m = props.options.source) === null || _m === void 0 ? void 0 : _m.attribution)
+                            ? (_o = props.options.source) === null || _o === void 0 ? void 0 : _o.attribution
                             : '',
                     },
+                    // eslint-disable-next-line no-mixed-spaces-and-tabs
                 }
-                : {})), (typeof ((_j = props.options) === null || _j === void 0 ? void 0 : _j.source) === 'string'
+                : {})), (typeof ((_p = props.options) === null || _p === void 0 ? void 0 : _p.source) === 'string'
                 ? {
                     source: props.options.source,
+                    // eslint-disable-next-line no-mixed-spaces-and-tabs
                 }
                 : {})), { id: layerId.current }), props.insertBeforeLayer
                 ? props.insertBeforeLayer
@@ -2495,18 +2504,19 @@ function useLayer(props) {
         mapHook.map.on('styledata', function () {
             var _a;
             if (initializedRef.current && !((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current))) {
-                console.log('Recreate Layer');
                 createLayer();
             }
         }, mapHook.componentId);
-        layerPaintConfRef.current = JSON.stringify((_k = props.options) === null || _k === void 0 ? void 0 : _k.paint);
-        layerLayoutConfRef.current = JSON.stringify((_l = props.options) === null || _l === void 0 ? void 0 : _l.layout);
+        layerPaintConfRef.current = JSON.stringify((_q = props.options) === null || _q === void 0 ? void 0 : _q.paint);
+        layerLayoutConfRef.current = JSON.stringify((_r = props.options) === null || _r === void 0 ? void 0 : _r.layout);
         layerTypeRef.current = props.options.type;
-    }, [props, mapHook.map]);
+    }, [props, mapHook]);
     React.useEffect(function () {
         var _a, _b, _c, _d;
         if (!mapHook.map)
             return;
+        if (!props.geojson && !props.options.source)
+            return;
         if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === false &&
             initializedRef.current &&
             ((_d = (_c = (_b = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.getLayer) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)) &&
@@ -2516,7 +2526,7 @@ function useLayer(props) {
             return;
         }
         createLayer();
-    }, [mapHook.map, mapHook.mapIsReady, props.options, createLayer]);
+    }, [mapHook.map, mapHook.mapIsReady, props, createLayer]);
     React.useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
@@ -2705,27 +2715,41 @@ function useSource(props) {
     var mapHook = useMap({
         mapId: props.mapId,
     });
-    var initializedRef = React.useRef(false);
     var _b = React.useState(), source = _b[0], setSource = _b[1];
     var sourceId = React.useRef(props.sourceId || (props.idPrefix ? props.idPrefix : 'Source-') + mapHook.componentId);
+    var removeSource = React.useCallback(function () {
+        var _a, _b;
+        if (mapHook.map && ((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b._layers)) {
+            for (var _i = 0, _c = Object.entries(mapHook.map.map.style._layers); _i < _c.length; _i++) {
+                var _d = _c[_i], layerId = _d[0], layer = _d[1];
+                if (layer.source === sourceId.current) {
+                    mapHook.map.removeLayer(layerId);
+                }
+            }
+            if (mapHook.map.getSource(sourceId.current)) {
+                mapHook.map.removeSource(sourceId.current);
+            }
+        }
+    }, [mapHook.map]);
     var createSource = React.useCallback(function () {
         var _a;
         if (!mapHook.map)
             return;
-        initializedRef.current = true;
+        if (props.source.type === 'geojson' && !props.source.data)
+            return;
         if (mapHook.map.map.getSource(sourceId.current)) {
-            mapHook.cleanup();
+            removeSource();
         }
-        (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.addSource(sourceId.current, __assign({}, props.source), mapHook.componentId);
+        (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.addSource(sourceId.current, __assign({}, props.source));
         setSource(mapHook.map.map.getSource(sourceId.current));
-    }, [props, mapHook.map]);
+    }, [props, mapHook, removeSource]);
     React.useEffect(function () {
         var _a, _b, _c, _d;
-        if (!initializedRef.current || !((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(props.sourceId)))
+        if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(sourceId.current)))
             return;
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore setData only exists on GeoJsonSource
-        (_d = (_c = mapHook.map.map.getSource(props.sourceId)) === null || _c === void 0 ? void 0 : _c.setData) === null || _d === void 0 ? void 0 : _d.call(_c, props.source.data);
+        (_d = (_c = mapHook.map.map.getSource(sourceId.current)) === null || _c === void 0 ? void 0 : _c.setData) === null || _d === void 0 ? void 0 : _d.call(_c, props.source.data);
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore data only exists on GeoJsonSource
     }, [(_a = props.source) === null || _a === void 0 ? void 0 : _a.data]);
@@ -2739,19 +2763,9 @@ function useSource(props) {
     //cleanup
     React.useEffect(function () {
         return function () {
-            var _a, _b, _c;
-            initializedRef.current = false;
-            if (mapHook.map && ((_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c._layers)) {
-                for (var _i = 0, _d = Object.entries(mapHook.map.map.style._layers); _i < _d.length; _i++) {
-                    var _e = _d[_i], layerId = _e[0], layer = _e[1];
-                    if (layer.source === sourceId.current) {
-                        mapHook.map.map.removeLayer(layerId);
-                    }
-                }
-                mapHook.map.map.removeSource(sourceId.current);
-            }
+            removeSource();
         };
-    }, [mapHook.map]);
+    }, [removeSource]);
     return {
         map: mapHook.map,
         source: source,
@@ -2766,7 +2780,7 @@ function useSource(props) {
  * @component
  */
 var MlGeoJsonLayer = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
     var layerId = React.useRef(props.layerId || 'MlGeoJsonLayer-' + uuid.v4());
     var labelLayerId = "label-".concat(layerId.current);
@@ -2780,7 +2794,7 @@ var MlGeoJsonLayer = function (props) {
     }, [props.layerId]);
     useSource({
         mapId: props.mapId,
-        sourceId: layerId.current,
+        sourceId: "source-" + layerId.current,
         source: {
             type: 'geojson',
             data: props.geojson,
@@ -2789,22 +2803,22 @@ var MlGeoJsonLayer = function (props) {
     useLayer({
         mapId: props.mapId,
         layerId: layerId.current,
-        options: __assign(__assign({ source: layerId.current }, props.options), { paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.layout), type: layerType }),
+        options: __assign(__assign({ source: "source-" + layerId.current }, props.options), { paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.layout), type: layerType }),
         insertBeforeLayer: props.insertBeforeLayer,
         onHover: props.onHover,
         onClick: props.onClick,
         onLeave: props.onLeave,
     });
-    if (props.labelProp) {
-        useLayer({
-            mapId: props.mapId,
-            options: __assign(__assign({ source: props.labelProp ? layerId.current : undefined, id: labelLayerId, type: 'symbol', maxzoom: 24, minzoom: 1 }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), { layout: __assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}") }, (((_c = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _c === void 0 ? void 0 : _c.layout) ? props.labelOptions.layout : {})), paint: {
-                    'text-halo-width': 1,
-                    'text-halo-color': '#121212',
-                    'text-color': '#fefefe',
-                } }),
-        });
-    }
+    // Label useLayer hook can't be called conditionally.
+    // Using it with geojson and options.source undefined will cause it to return without creating a layer.
+    useLayer({
+        mapId: props.mapId,
+        options: __assign(__assign(__assign({ source: props.labelProp ? "source-" + layerId.current : undefined, id: labelLayerId, type: 'symbol', maxzoom: 24, minzoom: 1 }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), (((_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.filter) ? { filter: props.options.filter } : {})), { layout: __assign(__assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}"), 'text-size': 12, 'text-anchor': 'top' }, (((_d = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _d === void 0 ? void 0 : _d.layout) ? props.labelOptions.layout : {})), (((_e = props === null || props === void 0 ? void 0 : props.layout) === null || _e === void 0 ? void 0 : _e.visibility) ? { visibility: props.layout.visibility } : {})), paint: {
+                'text-halo-width': 1,
+                'text-halo-color': '#fefefe',
+                'text-color': '#121212',
+            } }),
+    });
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 
@@ -6253,13 +6267,18 @@ var MlTemporalController = function (props) {
         };
     }, [mapHook.map, props.onClick, props.onHover, props.onLeave]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        filteredData && props.ownLayer && (React__default["default"].createElement(MlGeoJsonLayer, { type: props.type, mapId: props.mapId, layerId: "timeController", insertBeforeLayer: props.insertBeforeLayer || 'timeControllerLabels', geojson: filteredData, paint: props.paint ||
+        filteredData && props.ownLayer && (React__default["default"].createElement(MlGeoJsonLayer, { type: props.type, mapId: props.mapId, 
+            //layerId="timeController"
+            //insertBeforeLayer={props.insertBeforeLayer || 'timeControllerLabels'}
+            paint: props.paint ||
                 paint, options: {
                 source: {
+                    type: 'geojson',
                     attribution: props.attribution,
+                    data: filteredData
                 },
             } })),
-        props.label && (React__default["default"].createElement(MlTemporalControllerLabels, { data: filteredData, currentVal: currentVal, fadeIn: props.labelFadeIn, fadeOut: props.labelFadeOut, step: props.step, labelField: labelField, labelColor: labelColor, timeField: props.timeField, minVal: minVal, accumulate: props.accumulate, isPlaying: isPlaying })),
+        filteredData && props.label && (React__default["default"].createElement(MlTemporalControllerLabels, { data: filteredData, currentVal: currentVal, fadeIn: props.labelFadeIn, fadeOut: props.labelFadeOut, step: props.step, labelField: labelField, labelColor: labelColor, timeField: props.timeField, minVal: minVal, accumulate: props.accumulate, isPlaying: isPlaying })),
         React__default["default"].createElement(TemporalControllerPlayer, { currentVal: currentVal, isPlaying: isPlaying, step: props.step, interval: props.interval, minVal: minVal, maxVal: maxVal, returnCurrent: setCurrentVal, returnPlaying: setIsPlaying, open: false, fadeIn: props.fadeIn, fadeOut: props.fadeOut, featuresColor: featuresColor, labels: props.label, labelColor: labelColor, labelFadeIn: props.labelFadeIn, labelFadeOut: props.labelFadeOut, accumulate: props.accumulate, display: props.displayCurrentValue })));
 };
 MlTemporalController.defaultProps = {