@mapcomponents/react-maplibre 0.1.91 → 0.1.92

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## [v0.1.92] - 2024-01-16
+
+### Fixed
+
+- fe33641: fix useSource hook to dynamically adjust to props.sourceId changes
+- fe33641: fix useMap hook to use less setState calls
+- fe33641: fix useLayer hook options.source prop to wait for the source to be added
+
+### Changed
+
+- fe33641: add MlGeoJsonLayer labelProp defaults to enable simply passing the property name to props.labelProp to get labels. 
+- fe33641: make label layer use the same source as the main layer.
+- fe33641: adjust MlGeoJsonLayer labelProp storybook demo to show the actual use of the property
+
+
 ## [v0.1.91] - 2024-01-16
 
 ### Fixed

package/dist/components/MlGeoJsonLayer/MlGeoJsonLayer.d.ts

@@ -21,7 +21,7 @@ export type MlGeoJsonLayerProps = {
     /**
      * GeoJSON data that is supposed to be rendered by this component.
      */
-    geojson: Feature | FeatureCollection | undefined;
+    geojson?: Feature | FeatureCollection | undefined;
     /**
      * Type of the layer that will be added to the MapLibre instance.
      * All types from LayerSpecification union type are supported except the type from
@@ -29,6 +29,7 @@ export type MlGeoJsonLayerProps = {
      */
     type?: Exclude<LayerSpecification['type'], RasterLayerSpecification['type']>;
     /**
+     * @deprecated The property should not be used. Please use the options.paint property instead. This will be removed in the next major release.
      * Paint property object, that is passed to the addLayer call.
      * Possible props depend on the layer type.
      * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
@@ -41,6 +42,7 @@ export type MlGeoJsonLayerProps = {
      */
     paint?: Exclude<LayerSpecification['paint'], RasterLayerSpecification['paint']>;
     /**
+     * @deprecated The property should not be used. Please use the options.layout property instead. This will be removed in the next major release.
      * Layout property object, that is passed to the addLayer call.
      * Possible props depend on the layer type.
      * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/

package/dist/hooks/useSource.d.ts

@@ -1,6 +1,6 @@
-import { useMapType } from "./useMap";
-import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
-import { Source, SourceSpecification } from "maplibre-gl";
+import { useMapType } from './useMap';
+import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
+import { Source, SourceSpecification } from 'maplibre-gl';
 type useSourceType = {
     map: MapLibreGlWrapper | undefined;
     source: Source | undefined;

package/dist/index.esm.js

@@ -1320,7 +1320,7 @@ useMapState.propTypes = {
 
 function useMap(props) {
     var mapContext = React.useContext(MapContext);
-    var _a = React.useState(), map = _a[0], setMap = _a[1];
+    var _a = React.useState({ map: undefined, ready: false }), state = _a[0], setState = _a[1];
     var mapState = useMapState({
         mapId: props === null || props === void 0 ? void 0 : props.mapId,
         watch: {
@@ -1334,7 +1334,6 @@ function useMap(props) {
     });
     var mapRef = React.useRef();
     var componentId = React.useRef(uuid.v4());
-    var _b = React.useState(false), mapIsReady = _b[0], setMapIsReady = _b[1];
     var cleanup = function () {
         if (mapRef.current) {
             mapRef.current.cleanup(componentId.current);
@@ -1343,7 +1342,6 @@ function useMap(props) {
     React.useEffect(function () {
         return function () {
             cleanup();
-            setMapIsReady(false);
             mapRef.current = undefined;
         };
     }, []);
@@ -1351,8 +1349,7 @@ function useMap(props) {
         var _a;
         if (mapRef.current && mapRef.current.cancelled === true) {
             mapRef.current = undefined;
-            setMap(undefined);
-            setMapIsReady(false);
+            setState({ map: undefined, ready: false });
         }
         if (mapRef.current || !mapContext.mapExists(props === null || props === void 0 ? void 0 : props.mapId))
             return;
@@ -1370,12 +1367,11 @@ function useMap(props) {
             }
         }
         mapRef.current = mapContext.getMap(props === null || props === void 0 ? void 0 : props.mapId);
-        setMap(mapRef.current);
-        setMapIsReady(true);
+        setState({ map: mapRef.current, ready: true });
     }, [mapContext.mapIds, mapState.layers, mapContext, props]);
     return {
-        map: map,
-        mapIsReady: mapIsReady,
+        map: state.map,
+        mapIsReady: state.ready,
         componentId: componentId.current,
         layers: mapState.layers,
         cleanup: cleanup,
@@ -2429,6 +2425,7 @@ var legalLayerTypes = [
     'background',
 ];
 function useLayer(props) {
+    var _a;
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
@@ -2436,17 +2433,17 @@ function useLayer(props) {
     var layerTypeRef = React.useRef('');
     var layerPaintConfRef = React.useRef('');
     var layerLayoutConfRef = React.useRef('');
-    var _a = React.useState(), layer = _a[0], setLayer = _a[1];
+    var _b = React.useState(), layer = _b[0], setLayer = _b[1];
     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;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!mapHook.map || (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map.cancelled))
             return;
         if (mapHook.map.map.getLayer(layerId.current)) {
             mapHook.cleanup();
         }
-        if (mapHook.map.map.getSource(layerId.current)) {
+        if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'string' && mapHook.map.map.getSource(layerId.current)) {
             mapHook.map.map.removeSource(layerId.current);
         }
         if (typeof props.options.source === 'string') {
@@ -2460,18 +2457,18 @@ function useLayer(props) {
         initializedRef.current = true;
         try {
             mapHook.map.addLayer(__assign(__assign(__assign(__assign({}, props.options), (props.geojson &&
-                (!((_a = props.options) === null || _a === void 0 ? void 0 : _a.source) ||
-                    (((_c = (_b = props.options) === null || _b === void 0 ? void 0 : _b.source) === null || _c === void 0 ? void 0 : _c.attribution) && !((_e = (_d = props.options) === null || _d === void 0 ? void 0 : _d.source) === null || _e === void 0 ? void 0 : _e.type))) // if either options.source isn't defined or only options.source.attribution is defined
+                (!((_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
                 ? {
                     source: {
                         type: 'geojson',
                         data: props.geojson,
-                        attribution: ((_f = props.options.source) === null || _f === void 0 ? void 0 : _f.attribution)
-                            ? (_g = props.options.source) === null || _g === void 0 ? void 0 : _g.attribution
+                        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
                             : '',
                     },
                 }
-                : {})), (typeof ((_h = props.options) === null || _h === void 0 ? void 0 : _h.source) === 'string'
+                : {})), (typeof ((_j = props.options) === null || _j === void 0 ? void 0 : _j.source) === 'string'
                 ? {
                     source: props.options.source,
                 }
@@ -2502,8 +2499,8 @@ function useLayer(props) {
                 createLayer();
             }
         }, mapHook.componentId);
-        layerPaintConfRef.current = JSON.stringify((_j = props.options) === null || _j === void 0 ? void 0 : _j.paint);
-        layerLayoutConfRef.current = JSON.stringify((_k = props.options) === null || _k === void 0 ? void 0 : _k.layout);
+        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);
         layerTypeRef.current = props.options.type;
     }, [props, mapHook.map]);
     React.useEffect(function () {
@@ -2519,7 +2516,7 @@ function useLayer(props) {
             return;
         }
         createLayer();
-    }, [mapHook.map, props.options, createLayer]);
+    }, [mapHook.map, mapHook.mapIsReady, props.options, createLayer]);
     React.useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
@@ -2574,6 +2571,29 @@ function useLayer(props) {
             mapHook.cleanup();
         };
     }, []);
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'string' ||
+            !mapHook.map ||
+            (typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) === 'string' &&
+                ((_d = (_c = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _c === void 0 ? void 0 : _c.getLayer) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)) &&
+                ((_f = (_e = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _e === void 0 ? void 0 : _e.getSource) === null || _f === void 0 ? void 0 : _f.call(_e, props.options.source)))) {
+            return;
+        }
+        var findSourceHandler = function () {
+            var _a, _b, _c;
+            if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) === 'string' &&
+                ((_c = (_b = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _b === void 0 ? void 0 : _b.getSource) === null || _c === void 0 ? void 0 : _c.call(_b, props.options.source))) {
+                createLayer();
+            }
+        };
+        mapHook.map.on('sourcedata', findSourceHandler);
+        return function () {
+            if (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) {
+                mapHook.map.off('sourcedata', findSourceHandler);
+            }
+        };
+    }, [mapHook.map, (_a = props.options) === null || _a === void 0 ? void 0 : _a.source]);
     return {
         map: mapHook.map,
         layer: layer,
@@ -2680,6 +2700,66 @@ var getDefaulLayerTypeByGeometry = function (geojson) {
     return "fill";
 };
 
+function useSource(props) {
+    var _a;
+    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 createSource = React.useCallback(function () {
+        var _a;
+        if (!mapHook.map)
+            return;
+        initializedRef.current = true;
+        if (mapHook.map.map.getSource(sourceId.current)) {
+            mapHook.cleanup();
+        }
+        (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.addSource(sourceId.current, __assign({}, props.source), mapHook.componentId);
+        setSource(mapHook.map.map.getSource(sourceId.current));
+    }, [props, mapHook.map]);
+    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)))
+            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);
+        // 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]);
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (((_c = (_b = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource) === null || _c === void 0 ? void 0 : _c.call(_b, props.sourceId)) && props.sourceId === sourceId.current)
+            return;
+        sourceId.current = props.sourceId;
+        createSource();
+    }, [mapHook.map, props, createSource]);
+    //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);
+            }
+        };
+    }, [mapHook.map]);
+    return {
+        map: mapHook.map,
+        source: source,
+        componentId: mapHook.componentId,
+        mapHook: mapHook,
+    };
+}
+
 /**
  * Adds source and layer to display GeoJSON data on the map.
  *
@@ -2688,14 +2768,28 @@ var getDefaulLayerTypeByGeometry = function (geojson) {
 var MlGeoJsonLayer = function (props) {
     var _a, _b, _c;
     var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
-    var layerId = props.layerId || 'MlGeoJsonLayer-' + uuid.v4();
-    var labelLayerId = "label-".concat(layerId);
-    // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+    var layerId = React.useRef(props.layerId || 'MlGeoJsonLayer-' + uuid.v4());
+    var labelLayerId = "label-".concat(layerId.current);
+    React.useEffect(function () {
+        if (!props.layerId) {
+            layerId.current = 'MlGeoJsonLayer-' + uuid.v4();
+        }
+        else {
+            layerId.current = props.layerId;
+        }
+    }, [props.layerId]);
+    useSource({
+        mapId: props.mapId,
+        sourceId: layerId.current,
+        source: {
+            type: 'geojson',
+            data: props.geojson,
+        },
+    });
     useLayer({
         mapId: props.mapId,
-        layerId: props.layerId || 'MlGeoJsonLayer-' + uuid.v4(),
-        geojson: props.geojson,
-        options: __assign(__assign({}, 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 }),
+        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 }),
         insertBeforeLayer: props.insertBeforeLayer,
         onHover: props.onHover,
         onClick: props.onClick,
@@ -2704,9 +2798,11 @@ var MlGeoJsonLayer = function (props) {
     if (props.labelProp) {
         useLayer({
             mapId: props.mapId,
-            layerId: labelLayerId,
-            geojson: props.geojson,
-            options: __assign(__assign({ type: 'symbol' }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), { layout: __assign({ '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: {} }),
+            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',
+                } }),
         });
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -4579,64 +4675,6 @@ useLayerHoverPopup.defaultProps = {
     mapId: undefined,
 };
 
-function useSource(props) {
-    var _a;
-    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 createSource = React.useCallback(function () {
-        var _a;
-        if (!mapHook.map)
-            return;
-        initializedRef.current = true;
-        if (mapHook.map.map.getSource(sourceId.current)) {
-            mapHook.cleanup();
-        }
-        (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.addSource(sourceId.current, __assign({}, props.source), mapHook.componentId);
-        setSource(mapHook.map.map.getSource(sourceId.current));
-    }, [props, mapHook.map]);
-    React.useEffect(function () {
-        if (!mapHook.map || initializedRef.current)
-            return;
-        createSource();
-    }, [mapHook.map, props, createSource]);
-    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)))
-            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);
-        // 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]);
-    //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);
-            }
-        };
-    }, [mapHook.map]);
-    return {
-        map: mapHook.map,
-        source: source,
-        componentId: mapHook.componentId,
-        mapHook: mapHook,
-    };
-}
-
 /**
  * MlGpxViewer visualizes a given GPX Track on the map
  */