@mapcomponents/react-maplibre 0.1.91 → 0.1.94

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # 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
+
+- 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/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/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, _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)) {
             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') {
@@ -2454,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 &&
-                (!((_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
+                (!((_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: ((_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: 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 ((_h = props.options) === null || _h === void 0 ? void 0 : _h.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
@@ -2498,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((_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((_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)) &&
@@ -2519,7 +2526,7 @@ function useLayer(props) {
             return;
         }
         createLayer();
-    }, [mapHook.map, 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 ||
@@ -2574,6 +2581,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,35 +2710,115 @@ var getDefaulLayerTypeByGeometry = function (geojson) {
     return "fill";
 };
 
+function useSource(props) {
+    var _a;
+    var mapHook = useMap({
+        mapId: props.mapId,
+    });
+    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;
+        if (props.source.type === 'geojson' && !props.source.data)
+            return;
+        if (mapHook.map.map.getSource(sourceId.current)) {
+            removeSource();
+        }
+        (_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, removeSource]);
+    React.useEffect(function () {
+        var _a, _b, _c, _d;
+        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(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]);
+    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 () {
+            removeSource();
+        };
+    }, [removeSource]);
+    return {
+        map: mapHook.map,
+        source: source,
+        componentId: mapHook.componentId,
+        mapHook: mapHook,
+    };
+}
+
 /**
  * Adds source and layer to display GeoJSON data on the map.
  *
  * @component
  */
 var MlGeoJsonLayer = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     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: "source-" + 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: "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,
-            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: {} }),
-        });
-    }
+    // 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);
 };
 
@@ -4579,64 +4689,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
  */
@@ -6215,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 = {