@mapcomponents/react-maplibre 1.0.4 → 1.0.5

package/dist/index.cjs.js

@@ -7,13 +7,12 @@ var uuid = require('uuid');
 require('maplibre-gl/dist/maplibre-gl.css');
 var material = require('@mui/material');
 var FilterCenterFocusIcon = require('@mui/icons-material/FilterCenterFocus');
-var elasticlunr = require('elasticlunr');
-var turf = require('@turf/turf');
 var PrinterIcon = require('@mui/icons-material/Print');
 var Button = require('@mui/material/Button');
 var jsPDF = require('jspdf');
 var ReactDOM = require('react-dom');
 var Moveable = require('react-moveable');
+var turf = require('@turf/turf');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 var MapboxDraw = require('@mapbox/mapbox-gl-draw');
 var GpsFixedIcon = require('@mui/icons-material/GpsFixed');
@@ -1344,741 +1343,144 @@ MlCenterPosition.defaultProps = {
     mapId: undefined,
 };
 
-var legalLayerTypes = [
-    'fill',
-    'line',
-    'symbol',
-    'circle',
-    'heatmap',
-    'fill-extrusion',
-    'raster',
-    'hillshade',
-    'background',
-];
-function determineSource(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    if (typeof props.options.source === 'string') {
-        return {
-            source: props.options.source,
-        };
-    }
-    else if (props.geojson &&
-        (!((_a = props.options) === null || _a === void 0 ? void 0 : _a.source) ||
-            (typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) !== 'string' &&
-                ((_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)))) {
-        return {
-            source: {
-                type: 'geojson',
-                data: props.geojson || '',
-                attribution: typeof ((_g = props === null || props === void 0 ? void 0 : props.options) === null || _g === void 0 ? void 0 : _g.source) !== 'string' && ((_h = props.options.source) === null || _h === void 0 ? void 0 : _h.attribution)
-                    ? (_j = props.options.source) === null || _j === void 0 ? void 0 : _j.attribution
-                    : '',
-            },
-        };
+/**
+ * Component description
+ *
+ */
+var MlComponentTemplate = function (props) {
+    var mapHook = useMap({
+        mapId: props.mapId,
+    });
+    console.log(mapHook.componentId + " remove this log");
+    return React.createElement(React.Fragment, null);
+};
+MlComponentTemplate.defaultProps = {
+    mapId: undefined,
+};
+
+var createExport = function (options) {
+    var width = options.width;
+    var height = options.height;
+    // Create map container
+    var hiddenContainer = document.createElement('div');
+    hiddenContainer.className = 'hidden-map';
+    hiddenContainer.style.width = '0px';
+    hiddenContainer.style.height = '0px';
+    hiddenContainer.style.overflow = 'hidden';
+    document.body.appendChild(hiddenContainer);
+    var container = document.createElement('div');
+    container.style.width = width + 'px';
+    container.style.height = height + 'px';
+    hiddenContainer.appendChild(container);
+    var style = options.map.map.getStyle();
+    var _loop_1 = function (name_1) {
+        var src = style.sources[name_1];
+        Object.keys(src).forEach(function (key) {
+            // delete property if value is undefined.
+            // for instance, raster-dem might have undefined value in "url" and "bounds"
+            if (!src[key]) {
+                delete src[key];
+            }
+        });
+    };
+    // delete undefined source properties
+    for (var name_1 in style.sources) {
+        _loop_1(name_1);
     }
-    return {};
+    // Create a new MapLibre-gl instance
+    var renderMap = new maplibregl.Map({
+        container: container,
+        center: options.map.map.getCenter(),
+        zoom: options.map.map.getZoom(),
+        bearing: 0,
+        pitch: 0,
+        interactive: false,
+        preserveDrawingBuffer: true,
+        fadeDuration: 0,
+        attributionControl: false,
+        style: style,
+    });
+    var bboxCamera = renderMap._cameraForBoxAndBearing([options.bboxUnrotated[0], options.bboxUnrotated[1]], [options.bboxUnrotated[2], options.bboxUnrotated[3]], options.bearing + options.map.map.getBearing());
+    renderMap._fitInternal(bboxCamera);
+    return new Promise(function (resolve) {
+        console.log('before idle');
+        renderMap.once('idle', function () {
+            var params = __assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer, createPdf: function (_options) {
+                    return createJsPdf(__assign(__assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer }), _options));
+                }, createPng: function (_options) {
+                    return createPng(__assign(__assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer }), _options));
+                } });
+            resolve(params);
+        });
+    });
+};
+function createJsPdf(options) {
+    var pdf = new jsPDF({
+        orientation: (options === null || options === void 0 ? void 0 : options.orientation) === 'portrait' ? 'p' : 'l',
+        unit: 'mm',
+        compress: true,
+        format: options.format,
+    });
+    Object.defineProperty(window, 'devicePixelRatio', {
+        get: function () {
+            return 300 / 96;
+        },
+    });
+    return new Promise(function (resolve) {
+        var _b;
+        //Render map image
+        pdf.addImage(options.renderMap.getCanvas().toDataURL('image/png'), 'png', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), undefined, 'FAST');
+        // remove DOM Elements
+        options.renderMap.remove();
+        (_b = options.hiddenContainer.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(options.hiddenContainer);
+        var params = __assign(__assign({}, options), { pdf: pdf, downloadPdf: function (_options) { return downloadPdf(__assign(__assign({}, params), _options)); }, formData: new FormData() });
+        resolve(params);
+    });
 }
-function determineInsertionPoint(props, mapHook) {
-    var _a;
-    if (props === null || props === void 0 ? void 0 : props.insertBeforeLayer)
-        return props.insertBeforeLayer;
-    if (props === null || props === void 0 ? void 0 : props.insertBeforeFirstSymbolLayer)
-        return (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.firstSymbolLayer;
-    return undefined;
+function downloadPdf(options) {
+    options.pdf.save('Map.pdf');
+    return new Promise(function (resolve) {
+        resolve(__assign({}, options));
+    });
 }
-function useLayer(props) {
-    var _a;
-    var mapHook = useMap({
-        mapId: props.mapId,
-        waitForLayer: props.insertBeforeLayer,
-    });
-    var layerTypeRef = React.useRef('');
-    var layerPaintConfRef = React.useRef('');
-    var layerLayoutConfRef = React.useRef('');
-    var _b = React.useState(), layer = _b[0], setLayer = _b[1];
-    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;
-        if (!mapHook.map || (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map.cancelled))
-            return;
-        if (mapHook.map.map.getLayer(layerId.current)) {
-            mapHook.cleanup();
-        }
-        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') {
-            if (props.options.source === '' || !mapHook.map.map.getSource(props.options.source)) {
-                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) &&
-            ((_e = props === null || props === void 0 ? void 0 : props.options) === null || _e === void 0 ? void 0 : _e.type) !== 'background') {
-            return;
-        }
-        if (typeof props.options.type === 'undefined') {
-            return;
-        }
-        try {
-            mapHook.map.addLayer(__assign(__assign(__assign({}, props.options), determineSource(props)), { id: layerId.current }), determineInsertionPoint(props, mapHook), mapHook.componentId);
-        }
-        catch (error) {
-            console.error('Failed to add layer:', error);
-        }
-        setLayer(function () { var _a; return (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current); });
-        if (typeof props.onHover !== 'undefined') {
-            mapHook.map.on('mousemove', layerId.current, props.onHover, mapHook.componentId);
-        }
-        if (typeof props.onClick !== 'undefined') {
-            mapHook.map.on('click', layerId.current, props.onClick, mapHook.componentId);
-        }
-        if (typeof props.onLeave !== 'undefined') {
-            mapHook.map.on('mouseleave', layerId.current, props.onLeave, mapHook.componentId);
-        }
-        // recreate layer if style has changed
-        var styledataEventHandler = function () {
-            var _a;
-            if (!((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current))) {
-                createLayer();
-            }
-        };
-        mapHook.map.on('styledata', styledataEventHandler, mapHook.componentId);
-        var addSourceHandler = function (_ev, _wrapper, _a) {
-            var _b;
-            var source_id = _a.source_id;
-            if (mapHook.map &&
-                typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) === 'string' &&
-                props.options.source === source_id) {
-                createLayer();
-            }
-        };
-        mapHook.map.wrapper.on('addsource', addSourceHandler, mapHook.componentId);
-        layerPaintConfRef.current = JSON.stringify((_f = props.options) === null || _f === void 0 ? void 0 : _f.paint);
-        layerLayoutConfRef.current = JSON.stringify((_g = props.options) === null || _g === void 0 ? void 0 : _g.layout);
-        layerTypeRef.current = props.options.type;
-    }, [props, mapHook]);
-    React.useEffect(function () {
-        var _a, _b, _c, _d, _e;
-        if (!mapHook.map)
-            return;
-        if (!props.geojson && !props.options.source && ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.type) !== 'background')
-            return;
-        if (((_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.cancelled) === false &&
-            ((_e = (_d = (_c = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _c === void 0 ? void 0 : _c.map) === null || _d === void 0 ? void 0 : _d.getLayer) === null || _e === void 0 ? void 0 : _e.call(_d, layerId.current)) &&
-            (legalLayerTypes.indexOf(props.options.type) === -1 ||
-                (legalLayerTypes.indexOf(props.options.type) !== -1 &&
-                    props.options.type === layerTypeRef.current))) {
-            return;
-        }
-        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 || !((_d = (_c = (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.getSource) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)))
-            return;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        //@ts-ignore setData only exists on GeoJsonSource
-        (_f = (_e = mapHook.map.map.getSource(layerId.current)) === null || _e === void 0 ? void 0 : _e.setData) === null || _f === void 0 ? void 0 : _f.call(_e, props.geojson);
-    }, [props.geojson, mapHook.map, props.options.type]);
-    React.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f;
-        if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
-            !mapHook.map ||
-            !((_d = (_c = (_b = 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)) ||
-            props.options.type !== layerTypeRef.current)
-            return;
-        var key;
-        var layoutString = JSON.stringify(props.options.layout);
-        if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
-            var oldLayout = JSON.parse(layerLayoutConfRef.current);
-            for (key in props.options.layout) {
-                if (((_e = props.options.layout) === null || _e === void 0 ? void 0 : _e[key]) &&
-                    props.options.layout[key] !== oldLayout[key]) {
-                    mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
-                }
-            }
-            layerLayoutConfRef.current = layoutString;
-        }
-        var paintString = JSON.stringify(props.options.paint);
-        if (paintString !== layerPaintConfRef.current) {
-            var oldPaint = JSON.parse(layerPaintConfRef.current);
-            for (key in props.options.paint) {
-                if (((_f = props.options.paint) === null || _f === void 0 ? void 0 : _f[key]) &&
-                    props.options.paint[key] !== oldPaint[key]) {
-                    mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
-                }
-            }
-            layerPaintConfRef.current = paintString;
-        }
-    }, [props.options, mapHook.map]);
-    React.useEffect(function () {
-        if (!props.insertBeforeLayer ||
-            !mapHook.map ||
-            !mapHook.map.getLayer(props.insertBeforeLayer) ||
-            !mapHook.map.getLayer(layerId.current))
-            return;
-        mapHook.map.moveLayer(layerId.current, props.insertBeforeLayer);
-    }, [mapHook.map, props.insertBeforeLayer]);
-    React.useEffect(function () {
-        return function () {
-            mapHook.cleanup();
-        };
-    }, []);
-    React.useEffect(function () {
-        var _a;
-        if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'string' || !mapHook.map) {
-            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)) &&
-                !mapHook.map.getLayer(layerId.current)) {
-                createLayer();
-            }
-        };
-        mapHook.map.on('sourcedataloading', findSourceHandler);
-        var addSourceHandler = function (_ev, _wrapper, _a) {
-            var _b;
-            var source_id = _a.source_id;
-            if (mapHook.map &&
-                typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) === 'string' &&
-                props.options.source === source_id) {
-                createLayer();
-            }
-        };
-        mapHook.map.wrapper.on('addsource', addSourceHandler);
-        return function () {
-            if (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) {
-                mapHook.map.off('sourcedataloading', findSourceHandler);
-                mapHook.map.wrapper.off('addsource', addSourceHandler);
-            }
-        };
-    }, [mapHook.map, (_a = props.options) === null || _a === void 0 ? void 0 : _a.source]);
-    return {
-        map: mapHook.map,
-        layer: layer,
-        layerId: layerId.current,
-        componentId: mapHook.componentId,
-        mapHook: mapHook,
-    };
-}
-useLayer.defaultProps = {};
-
-var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
-    switch (type) {
-        case 'fill':
-            if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.fill) {
-                return defaultPaintOverrides.fill;
-            }
-            return {
-                'fill-color': 'rgba(10,240,256,0.6)',
-                'fill-outline-color': 'rgba(20,230,256,0.8)',
-            };
-        case 'line':
-            if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.line) {
-                return defaultPaintOverrides.line;
-            }
-            return {
-                'line-color': 'rgb(203,211,2)',
-                'line-width': 5,
-                'line-blur': 0,
-            };
-        case 'circle':
-            if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.circle) {
-                return defaultPaintOverrides.circle;
-            }
-            return {
-                'circle-color': 'rgba(10,240,256,0.8)',
-                'circle-stroke-color': '#fff',
-                'circle-stroke-width': 2,
-                'circle-radius': 4,
-            };
-        default:
-            return {};
-    }
-};
-
-var mapGeometryTypesToLayerTypes = {
-    Position: "circle",
-    Point: "circle",
-    MultiPoint: "circle",
-    LineString: "line",
-    MultiLineString: "line",
-    Polygon: "fill",
-    MultiPolygon: "fill",
-    GeometryCollection: "circle",
-};
-var getDefaulLayerTypeByGeometry = function (geojson) {
-    var _a;
-    if ((geojson === null || geojson === void 0 ? void 0 : geojson.type) === "Feature") {
-        return (mapGeometryTypesToLayerTypes === null || mapGeometryTypesToLayerTypes === void 0 ? void 0 : mapGeometryTypesToLayerTypes[(_a = geojson === null || geojson === void 0 ? void 0 : geojson.geometry) === null || _a === void 0 ? void 0 : _a.type])
-            ? mapGeometryTypesToLayerTypes[geojson.geometry.type]
-            : "circle";
-    }
-    if ((geojson === null || geojson === void 0 ? void 0 : geojson.type) === "FeatureCollection") {
-        if (geojson.features.length) {
-            return getDefaulLayerTypeByGeometry(geojson.features[0]);
-        }
-        return "circle";
-    }
-    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]);
-    React.useEffect(function () {
-        if (!mapHook.map)
-            return;
-        var checkSourceHandler = function () {
-            var _a, _b;
-            if (!((_b = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.getSource) === null || _b === void 0 ? void 0 : _b.call(_a, props.sourceId))) {
-                createSource();
-            }
-        };
-        mapHook.map.on('styledata', checkSourceHandler);
-        return function () {
-            if (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) {
-                mapHook.map.off('styledata', checkSourceHandler);
-            }
-        };
-    }, [mapHook.map, 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, _d, _e, _f, _g, _h;
-    var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
-    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: __assign({ type: 'geojson', data: props.geojson }, (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'undefined' &&
-            typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) !== 'string'
-            ? props.options.source
-            : {})),
-    });
-    useLayer({
-        mapId: props.mapId,
-        layerId: layerId.current,
-        options: __assign(__assign({}, props.options), { source: 'source-' + layerId.current, paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_d = props === null || props === void 0 ? void 0 : props.options) === null || _d === void 0 ? void 0 : _d.layout), type: layerType }),
-        insertBeforeLayer: props.insertBeforeLayer,
-        onHover: props.onHover,
-        onClick: props.onClick,
-        onLeave: props.onLeave,
-    });
-    // 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 : {})), (((_e = props === null || props === void 0 ? void 0 : props.options) === null || _e === void 0 ? void 0 : _e.filter) ? { filter: props.options.filter } : {})), { layout: __assign(__assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}"), 'text-size': 12, 'text-anchor': 'top' }, (((_f = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.labelOptions.layout : {})), (((_g = props === null || props === void 0 ? void 0 : props.layout) === null || _g === void 0 ? void 0 : _g.visibility) ? { visibility: props.layout.visibility } : {})), paint: __assign({ 'text-halo-width': 1, 'text-halo-color': '#fefefe', 'text-color': '#121212' }, (((_h = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _h === void 0 ? void 0 : _h.paint) ? props.labelOptions.paint : {})) }),
-    });
-    return React.createElement(React.Fragment, null);
-};
-
-// Determine the GeoJSON-Feature-Type
-function determineFeatureType(coordinates) {
-    if (Array.isArray(coordinates)) {
-        if (coordinates.length === 2 &&
-            typeof coordinates[0] === 'number' &&
-            typeof coordinates[1] === 'number') {
-            return 'Point';
-        }
-        else if (Array.isArray(coordinates[0])) {
-            if (coordinates.every(function (coord) {
-                return Array.isArray(coord) &&
-                    coord.length === 2 &&
-                    typeof coord[0] === 'number' &&
-                    typeof coord[1] === 'number';
-            })) {
-                return 'LineString';
-            }
-            else if (coordinates.every(function (coord) { return Array.isArray(coord) && Array.isArray(coord[0]); })) {
-                // an array of arrays can be a multi-linestring or polygon,
-                // if the first and last coordinate is the same, it is a polygon
-                if (coordinates[0][0][0] === coordinates[0][coordinates[0].length - 1][0] &&
-                    coordinates[0][0][1] === coordinates[0][coordinates[0].length - 1][1]) {
-                    return 'Polygon';
-                }
-                else {
-                    return 'MultiLineString';
-                }
-            }
-        }
-    }
-    throw new Error('Invalid coordinate structure for a GeoJSON feature type determination.');
-}
-// Create GeoJSON-Features
-function createGeoJSONFeature(coordinates) {
-    var featureType = determineFeatureType(coordinates);
-    return {
-        type: 'Feature',
-        geometry: {
-            type: featureType,
-            coordinates: coordinates,
-        },
-        properties: {},
-    };
-}
-
-var SearchContext = React.createContext({});
-var SearchContextProvider = function (_a) {
-    var children = _a.children, searchIndex = _a.searchIndex, renderOption = _a.renderOption, searchFieldLabel = _a.searchFieldLabel, fields = _a.fields;
-    var _b = React.useState(undefined), searchIndexInstance = _b[0], setSearchIndexInstance = _b[1];
-    var _c = React.useState(undefined), searchTerm = _c[0], setSearchTerm = _c[1];
-    var _d = React.useState([]), searchResults = _d[0], setSearchResults = _d[1];
-    var _e = React.useState([]), searchResultsArray = _e[0], setSearchResultsArray = _e[1];
-    var _f = React.useState(undefined), selectedResult = _f[0], setSelectedResult = _f[1];
-    var _g = React.useState(), feature = _g[0], setFeature = _g[1];
-    var mapHook = useMap({
-        mapId: undefined,
-    });
-    React.useEffect(function () {
-        setSearchIndexInstance(elasticlunr.Index.load(searchIndex));
-    }, [searchIndex]);
-    var getBoundingBox = function (geometry) {
-        var _a;
-        if (((_a = geometry.geometry.coordinates) === null || _a === void 0 ? void 0 : _a.length) === 2) {
-            geometry = turf__namespace.buffer(geometry, 1, {
-                units: 'kilometers',
-            });
-        }
-        return turf__namespace.bbox(geometry);
-    };
-    React.useEffect(function () {
-        if (searchTerm && searchIndexInstance) {
-            var results = searchIndexInstance.search(searchTerm.toString(), { fields: fields });
-            var maxResults = 10;
-            var resultsLimited = results
-                .filter(function (result) { return result !== undefined; })
-                .slice(0, maxResults)
-                .map(function (result) {
-                var propertyNames = Object.keys(fields);
-                propertyNames.forEach(function () {
-                    if (searchIndexInstance.documentStore.getDoc(result.ref)) {
-                        result = searchIndexInstance.documentStore.getDoc(result.ref);
-                    }
-                });
-                return result;
-            });
-            setSearchResults(resultsLimited);
-        }
-    }, [searchTerm, searchIndexInstance, fields]);
-    React.useEffect(function () {
-        if (selectedResult && mapHook.map) {
-            if (typeof selectedResult === 'object' && 'COORDINATES' in selectedResult) {
-                var createdFeature = createGeoJSONFeature(selectedResult.COORDINATES);
-                var bbox = getBoundingBox(createdFeature);
-                setFeature(createdFeature);
-                mapHook.map.fitBounds(bbox);
-            }
-        }
-    }, [selectedResult, mapHook.map]);
-    var value = {
-        searchTerm: searchTerm,
-        setSearchTerm: setSearchTerm,
-        searchResults: searchResults,
-        setSearchResults: setSearchResults,
-        searchResultsArray: searchResultsArray,
-        setSearchResultsArray: setSearchResultsArray,
-        selectedResult: selectedResult,
-        setSelectedResult: setSelectedResult,
-        searchIndex: searchIndex,
-        fields: fields,
-        searchIndexInstance: searchIndexInstance,
-        renderOption: renderOption,
-        searchFieldLabel: searchFieldLabel,
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SearchContext.Provider, { value: value },
-            " ",
-            children),
-        feature && React.createElement(MlGeoJsonLayer, { geojson: feature })));
-};
-
-function debounce(func, wait) {
-    var timeout;
-    return function executedFunction(e) {
-        var later = function () {
-            clearTimeout(timeout);
-            func(e);
-        };
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-    };
-}
-function SearchForm() {
-    var searchContext = React.useContext(SearchContext);
-    function formatObjectProperties(input) {
-        if (!input)
-            return '';
-        if (typeof input === 'object') {
-            return processObject(input);
-        }
-        if (typeof input === 'string' &&
-            (input.trim().startsWith('{') || input.trim().startsWith('['))) {
-            try {
-                var parsed = JSON.parse(input);
-                if (Array.isArray(parsed)) {
-                    return parsed.map(processObject).join('; ');
-                }
-                else {
-                    return processObject(parsed);
-                }
-            }
-            catch (error) {
-                console.error('Error parsing JSON:', error);
-                return '';
-            }
-        }
-        else if (typeof input === 'string') {
-            return input;
-        }
-        console.error('Invalid input type.');
-        return '';
-    }
-    function processObject(obj) {
-        var keys = searchContext.searchIndex.fields;
-        var filteredKeys = Object.keys(obj).filter(function (key) { return keys.includes(key); });
-        return filteredKeys.map(function (key) { return obj[key]; }).join(', ');
-    }
-    var debouncedHandleInput = React.useCallback(debounce(function (e) {
-        searchContext.setSearchTerm(e.target.value);
-    }, 200), [searchContext]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.Autocomplete, { options: (searchContext === null || searchContext === void 0 ? void 0 : searchContext.searchResults) || [], noOptionsText: "Keine Optionen verf\u00FCgbar.", onSelect: debouncedHandleInput, value: formatObjectProperties(searchContext === null || searchContext === void 0 ? void 0 : searchContext.selectedResult) || null, isOptionEqualToValue: function (option) { return option === (searchContext === null || searchContext === void 0 ? void 0 : searchContext.selectedResult); }, getOptionLabel: function (option) { return formatObjectProperties(option); }, onChange: function (_, newValue) {
-                searchContext === null || searchContext === void 0 ? void 0 : searchContext.setSelectedResult(newValue !== null && newValue !== void 0 ? newValue : undefined);
-            }, renderOption: searchContext === null || searchContext === void 0 ? void 0 : searchContext.renderOption, sx: { width: 250 }, renderInput: function (params) {
-                return React.createElement(material.TextField, __assign({}, params, { label: searchContext === null || searchContext === void 0 ? void 0 : searchContext.searchFieldLabel }));
-            } })));
-}
-
-/**
- * Component template
- *
- */
-var MlClientSearch = function (_a) {
-    var searchIndex = _a.searchIndex, fields = _a.fields, renderOption = _a.renderOption, searchFieldLabel = _a.searchFieldLabel;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SearchContextProvider, { searchIndex: searchIndex, fields: fields, renderOption: renderOption, searchFieldLabel: searchFieldLabel },
-            React.createElement(SearchForm, null))));
-};
-MlClientSearch.defaultProps = {};
-
-/**
- * Component description
- *
- */
-var MlComponentTemplate = function (props) {
-    var mapHook = useMap({
-        mapId: props.mapId,
-    });
-    console.log(mapHook.componentId + " remove this log");
-    return React.createElement(React.Fragment, null);
-};
-MlComponentTemplate.defaultProps = {
-    mapId: undefined,
-};
-
-var createExport = function (options) {
-    var width = options.width;
-    var height = options.height;
-    // Create map container
-    var hiddenContainer = document.createElement('div');
-    hiddenContainer.className = 'hidden-map';
-    hiddenContainer.style.width = '0px';
-    hiddenContainer.style.height = '0px';
-    hiddenContainer.style.overflow = 'hidden';
-    document.body.appendChild(hiddenContainer);
-    var container = document.createElement('div');
-    container.style.width = width + 'px';
-    container.style.height = height + 'px';
-    hiddenContainer.appendChild(container);
-    var style = options.map.map.getStyle();
-    var _loop_1 = function (name_1) {
-        var src = style.sources[name_1];
-        Object.keys(src).forEach(function (key) {
-            // delete property if value is undefined.
-            // for instance, raster-dem might have undefined value in "url" and "bounds"
-            if (!src[key]) {
-                delete src[key];
-            }
-        });
-    };
-    // delete undefined source properties
-    for (var name_1 in style.sources) {
-        _loop_1(name_1);
-    }
-    // Create a new MapLibre-gl instance
-    var renderMap = new maplibregl.Map({
-        container: container,
-        center: options.map.map.getCenter(),
-        zoom: options.map.map.getZoom(),
-        bearing: 0,
-        pitch: 0,
-        interactive: false,
-        preserveDrawingBuffer: true,
-        fadeDuration: 0,
-        attributionControl: false,
-        style: style,
-    });
-    var bboxCamera = renderMap._cameraForBoxAndBearing([options.bboxUnrotated[0], options.bboxUnrotated[1]], [options.bboxUnrotated[2], options.bboxUnrotated[3]], options.bearing + options.map.map.getBearing());
-    renderMap._fitInternal(bboxCamera);
-    return new Promise(function (resolve) {
-        console.log('before idle');
-        renderMap.once('idle', function () {
-            var params = __assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer, createPdf: function (_options) {
-                    return createJsPdf(__assign(__assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer }), _options));
-                }, createPng: function (_options) {
-                    return createPng(__assign(__assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer }), _options));
-                } });
-            resolve(params);
-        });
-    });
-};
-function createJsPdf(options) {
-    var pdf = new jsPDF({
-        orientation: (options === null || options === void 0 ? void 0 : options.orientation) === 'portrait' ? 'p' : 'l',
-        unit: 'mm',
-        compress: true,
-        format: options.format,
-    });
-    Object.defineProperty(window, 'devicePixelRatio', {
-        get: function () {
-            return 300 / 96;
-        },
-    });
-    return new Promise(function (resolve) {
-        var _b;
-        //Render map image
-        pdf.addImage(options.renderMap.getCanvas().toDataURL('image/png'), 'png', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), undefined, 'FAST');
-        // remove DOM Elements
-        options.renderMap.remove();
-        (_b = options.hiddenContainer.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(options.hiddenContainer);
-        var params = __assign(__assign({}, options), { pdf: pdf, downloadPdf: function (_options) { return downloadPdf(__assign(__assign({}, params), _options)); }, formData: new FormData() });
-        resolve(params);
-    });
-}
-function downloadPdf(options) {
-    options.pdf.save('Map.pdf');
-    return new Promise(function (resolve) {
-        resolve(__assign({}, options));
-    });
-}
-function createPng(options) {
-    return new Promise(function (resolve) {
-        var png = options.renderMap.getCanvas().toDataURL('image/png');
-        var params = __assign(__assign({}, options), { png: png, downloadPng: function (_options) { return downloadPng(__assign(__assign({}, params), _options)); } });
-        resolve(params);
-    });
-}
-function downloadPng(options) {
-    var _a = document.createElement('a');
-    _a.download = (options === null || options === void 0 ? void 0 : options.name) ? options.name + '.png' : 'map.png';
-    _a.href = options.png;
-    document.body.appendChild(_a);
-    _a.click();
-    document.body.removeChild(_a);
-    return new Promise(function (resolve) {
-        resolve(__assign({}, options));
-    });
-}
-
-function useExportMap(props) {
-    var mapHook = useMap({ mapId: props.mapId });
-    var _createExport = React.useMemo(function () {
-        if (mapHook.map) {
-            return function (options) {
-                return createExport(__assign({ map: mapHook.map }, options));
-            };
-        }
-        return;
-    }, [mapHook.map]);
-    return {
-        createExport: _createExport,
-    };
-}
-
-/**
- * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).
- */
-var MlCreatePdfButton = function (props) {
+function createPng(options) {
+    return new Promise(function (resolve) {
+        var png = options.renderMap.getCanvas().toDataURL('image/png');
+        var params = __assign(__assign({}, options), { png: png, downloadPng: function (_options) { return downloadPng(__assign(__assign({}, params), _options)); } });
+        resolve(params);
+    });
+}
+function downloadPng(options) {
+    var _a = document.createElement('a');
+    _a.download = (options === null || options === void 0 ? void 0 : options.name) ? options.name + '.png' : 'map.png';
+    _a.href = options.png;
+    document.body.appendChild(_a);
+    _a.click();
+    document.body.removeChild(_a);
+    return new Promise(function (resolve) {
+        resolve(__assign({}, options));
+    });
+}
+
+function useExportMap(props) {
+    var mapHook = useMap({ mapId: props.mapId });
+    var _createExport = React.useMemo(function () {
+        if (mapHook.map) {
+            return function (options) {
+                return createExport(__assign({ map: mapHook.map }, options));
+            };
+        }
+        return;
+    }, [mapHook.map]);
+    return {
+        createExport: _createExport,
+    };
+}
+
+/**
+ * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).
+ */
+var MlCreatePdfButton = function (props) {
     var mapHook = useMap({
         mapId: props.mapId,
     });
@@ -2904,48 +2306,272 @@ var useFeatureEditor = function (props) {
         mapHook.map.on('mouseup', changeHandler);
         mapHook.map.on('touchend', changeHandler);
         return function () {
-            if (!mapHook.map)
-                return;
-            mapHook.map.map.off('mouseup', changeHandler);
-            mapHook.map.map.off('touchend', changeHandler);
+            if (!mapHook.map)
+                return;
+            mapHook.map.map.off('mouseup', changeHandler);
+            mapHook.map.map.off('touchend', changeHandler);
+        };
+    }, [drawToolsReady, mapHook.map]);
+    React.useEffect(function () {
+        var _a;
+        if (draw.current && ((_a = props.geojson) === null || _a === void 0 ? void 0 : _a.geometry)) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            draw.current.set({ type: 'FeatureCollection', features: [props.geojson] });
+        }
+    }, [props.geojson, drawToolsReady]);
+    React.useEffect(function () {
+        var _a, _b, _c, _d;
+        if (props.mode && draw.current && ((_b = (_a = draw.current) === null || _a === void 0 ? void 0 : _a.getMode) === null || _b === void 0 ? void 0 : _b.call(_a)) !== props.mode) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            (_d = (_c = draw.current) === null || _c === void 0 ? void 0 : _c.changeMode) === null || _d === void 0 ? void 0 : _d.call(_c, props.mode);
+            if (props.mode !== 'simple_select' && props.mode !== 'direct_select') {
+                draw.current.set({ type: 'FeatureCollection', features: [] });
+            }
+        }
+    }, [props.mode, mapHook.map]);
+    return {
+        feature: feature,
+        drawToolsReady: drawToolsReady,
+        draw: draw.current,
+    };
+};
+
+var MlFeatureEditor = function (props) {
+    useFeatureEditor({
+        mode: props.mode,
+        geojson: props.geojson,
+        onChange: props.onChange,
+        onFinish: props.onFinish,
+        mapId: props.mapId,
+    });
+    return (React.createElement(React.Fragment, null));
+};
+
+var legalLayerTypes = [
+    'fill',
+    'line',
+    'symbol',
+    'circle',
+    'heatmap',
+    'fill-extrusion',
+    'raster',
+    'hillshade',
+    'background',
+];
+function determineSource(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (typeof props.options.source === 'string') {
+        return {
+            source: props.options.source,
+        };
+    }
+    else if (props.geojson &&
+        (!((_a = props.options) === null || _a === void 0 ? void 0 : _a.source) ||
+            (typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) !== 'string' &&
+                ((_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)))) {
+        return {
+            source: {
+                type: 'geojson',
+                data: props.geojson || '',
+                attribution: typeof ((_g = props === null || props === void 0 ? void 0 : props.options) === null || _g === void 0 ? void 0 : _g.source) !== 'string' && ((_h = props.options.source) === null || _h === void 0 ? void 0 : _h.attribution)
+                    ? (_j = props.options.source) === null || _j === void 0 ? void 0 : _j.attribution
+                    : '',
+            },
+        };
+    }
+    return {};
+}
+function determineInsertionPoint(props, mapHook) {
+    var _a;
+    if (props === null || props === void 0 ? void 0 : props.insertBeforeLayer)
+        return props.insertBeforeLayer;
+    if (props === null || props === void 0 ? void 0 : props.insertBeforeFirstSymbolLayer)
+        return (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.firstSymbolLayer;
+    return undefined;
+}
+function useLayer(props) {
+    var _a;
+    var mapHook = useMap({
+        mapId: props.mapId,
+        waitForLayer: props.insertBeforeLayer,
+    });
+    var layerTypeRef = React.useRef('');
+    var layerPaintConfRef = React.useRef('');
+    var layerLayoutConfRef = React.useRef('');
+    var _b = React.useState(), layer = _b[0], setLayer = _b[1];
+    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;
+        if (!mapHook.map || (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map.cancelled))
+            return;
+        if (mapHook.map.map.getLayer(layerId.current)) {
+            mapHook.cleanup();
+        }
+        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') {
+            if (props.options.source === '' || !mapHook.map.map.getSource(props.options.source)) {
+                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) &&
+            ((_e = props === null || props === void 0 ? void 0 : props.options) === null || _e === void 0 ? void 0 : _e.type) !== 'background') {
+            return;
+        }
+        if (typeof props.options.type === 'undefined') {
+            return;
+        }
+        try {
+            mapHook.map.addLayer(__assign(__assign(__assign({}, props.options), determineSource(props)), { id: layerId.current }), determineInsertionPoint(props, mapHook), mapHook.componentId);
+        }
+        catch (error) {
+            console.error('Failed to add layer:', error);
+        }
+        setLayer(function () { var _a; return (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current); });
+        if (typeof props.onHover !== 'undefined') {
+            mapHook.map.on('mousemove', layerId.current, props.onHover, mapHook.componentId);
+        }
+        if (typeof props.onClick !== 'undefined') {
+            mapHook.map.on('click', layerId.current, props.onClick, mapHook.componentId);
+        }
+        if (typeof props.onLeave !== 'undefined') {
+            mapHook.map.on('mouseleave', layerId.current, props.onLeave, mapHook.componentId);
+        }
+        // recreate layer if style has changed
+        var styledataEventHandler = function () {
+            var _a;
+            if (!((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current))) {
+                createLayer();
+            }
+        };
+        mapHook.map.on('styledata', styledataEventHandler, mapHook.componentId);
+        var addSourceHandler = function (_ev, _wrapper, _a) {
+            var _b;
+            var source_id = _a.source_id;
+            if (mapHook.map &&
+                typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) === 'string' &&
+                props.options.source === source_id) {
+                createLayer();
+            }
+        };
+        mapHook.map.wrapper.on('addsource', addSourceHandler, mapHook.componentId);
+        layerPaintConfRef.current = JSON.stringify((_f = props.options) === null || _f === void 0 ? void 0 : _f.paint);
+        layerLayoutConfRef.current = JSON.stringify((_g = props.options) === null || _g === void 0 ? void 0 : _g.layout);
+        layerTypeRef.current = props.options.type;
+    }, [props, mapHook]);
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e;
+        if (!mapHook.map)
+            return;
+        if (!props.geojson && !props.options.source && ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.type) !== 'background')
+            return;
+        if (((_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.cancelled) === false &&
+            ((_e = (_d = (_c = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _c === void 0 ? void 0 : _c.map) === null || _d === void 0 ? void 0 : _d.getLayer) === null || _e === void 0 ? void 0 : _e.call(_d, layerId.current)) &&
+            (legalLayerTypes.indexOf(props.options.type) === -1 ||
+                (legalLayerTypes.indexOf(props.options.type) !== -1 &&
+                    props.options.type === layerTypeRef.current))) {
+            return;
+        }
+        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 || !((_d = (_c = (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.getSource) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)))
+            return;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore setData only exists on GeoJsonSource
+        (_f = (_e = mapHook.map.map.getSource(layerId.current)) === null || _e === void 0 ? void 0 : _e.setData) === null || _f === void 0 ? void 0 : _f.call(_e, props.geojson);
+    }, [props.geojson, mapHook.map, props.options.type]);
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
+            !mapHook.map ||
+            !((_d = (_c = (_b = 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)) ||
+            props.options.type !== layerTypeRef.current)
+            return;
+        var key;
+        var layoutString = JSON.stringify(props.options.layout);
+        if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
+            var oldLayout = JSON.parse(layerLayoutConfRef.current);
+            for (key in props.options.layout) {
+                if (((_e = props.options.layout) === null || _e === void 0 ? void 0 : _e[key]) &&
+                    props.options.layout[key] !== oldLayout[key]) {
+                    mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
+                }
+            }
+            layerLayoutConfRef.current = layoutString;
+        }
+        var paintString = JSON.stringify(props.options.paint);
+        if (paintString !== layerPaintConfRef.current) {
+            var oldPaint = JSON.parse(layerPaintConfRef.current);
+            for (key in props.options.paint) {
+                if (((_f = props.options.paint) === null || _f === void 0 ? void 0 : _f[key]) &&
+                    props.options.paint[key] !== oldPaint[key]) {
+                    mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
+                }
+            }
+            layerPaintConfRef.current = paintString;
+        }
+    }, [props.options, mapHook.map]);
+    React.useEffect(function () {
+        if (!props.insertBeforeLayer ||
+            !mapHook.map ||
+            !mapHook.map.getLayer(props.insertBeforeLayer) ||
+            !mapHook.map.getLayer(layerId.current))
+            return;
+        mapHook.map.moveLayer(layerId.current, props.insertBeforeLayer);
+    }, [mapHook.map, props.insertBeforeLayer]);
+    React.useEffect(function () {
+        return function () {
+            mapHook.cleanup();
         };
-    }, [drawToolsReady, mapHook.map]);
+    }, []);
     React.useEffect(function () {
         var _a;
-        if (draw.current && ((_a = props.geojson) === null || _a === void 0 ? void 0 : _a.geometry)) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            draw.current.set({ type: 'FeatureCollection', features: [props.geojson] });
+        if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'string' || !mapHook.map) {
+            return;
         }
-    }, [props.geojson, drawToolsReady]);
-    React.useEffect(function () {
-        var _a, _b, _c, _d;
-        if (props.mode && draw.current && ((_b = (_a = draw.current) === null || _a === void 0 ? void 0 : _a.getMode) === null || _b === void 0 ? void 0 : _b.call(_a)) !== props.mode) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            (_d = (_c = draw.current) === null || _c === void 0 ? void 0 : _c.changeMode) === null || _d === void 0 ? void 0 : _d.call(_c, props.mode);
-            if (props.mode !== 'simple_select' && props.mode !== 'direct_select') {
-                draw.current.set({ type: 'FeatureCollection', features: [] });
+        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)) &&
+                !mapHook.map.getLayer(layerId.current)) {
+                createLayer();
             }
-        }
-    }, [props.mode, mapHook.map]);
+        };
+        mapHook.map.on('sourcedataloading', findSourceHandler);
+        var addSourceHandler = function (_ev, _wrapper, _a) {
+            var _b;
+            var source_id = _a.source_id;
+            if (mapHook.map &&
+                typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) === 'string' &&
+                props.options.source === source_id) {
+                createLayer();
+            }
+        };
+        mapHook.map.wrapper.on('addsource', addSourceHandler);
+        return function () {
+            if (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) {
+                mapHook.map.off('sourcedataloading', findSourceHandler);
+                mapHook.map.wrapper.off('addsource', addSourceHandler);
+            }
+        };
+    }, [mapHook.map, (_a = props.options) === null || _a === void 0 ? void 0 : _a.source]);
     return {
-        feature: feature,
-        drawToolsReady: drawToolsReady,
-        draw: draw.current,
+        map: mapHook.map,
+        layer: layer,
+        layerId: layerId.current,
+        componentId: mapHook.componentId,
+        mapHook: mapHook,
     };
-};
-
-var MlFeatureEditor = function (props) {
-    useFeatureEditor({
-        mode: props.mode,
-        geojson: props.geojson,
-        onChange: props.onChange,
-        onFinish: props.onFinish,
-        mapId: props.mapId,
-    });
-    return (React.createElement(React.Fragment, null));
-};
+}
+useLayer.defaultProps = {};
 
 /**
  * Adds a fill extrusion layer to the MapLibre instance reference by props.mapId
@@ -2983,6 +2609,190 @@ MlFillExtrusionLayer.defaultProps = {
     },
 };
 
+var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
+    switch (type) {
+        case 'fill':
+            if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.fill) {
+                return defaultPaintOverrides.fill;
+            }
+            return {
+                'fill-color': 'rgba(10,240,256,0.6)',
+                'fill-outline-color': 'rgba(20,230,256,0.8)',
+            };
+        case 'line':
+            if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.line) {
+                return defaultPaintOverrides.line;
+            }
+            return {
+                'line-color': 'rgb(203,211,2)',
+                'line-width': 5,
+                'line-blur': 0,
+            };
+        case 'circle':
+            if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.circle) {
+                return defaultPaintOverrides.circle;
+            }
+            return {
+                'circle-color': 'rgba(10,240,256,0.8)',
+                'circle-stroke-color': '#fff',
+                'circle-stroke-width': 2,
+                'circle-radius': 4,
+            };
+        default:
+            return {};
+    }
+};
+
+var mapGeometryTypesToLayerTypes = {
+    Position: "circle",
+    Point: "circle",
+    MultiPoint: "circle",
+    LineString: "line",
+    MultiLineString: "line",
+    Polygon: "fill",
+    MultiPolygon: "fill",
+    GeometryCollection: "circle",
+};
+var getDefaulLayerTypeByGeometry = function (geojson) {
+    var _a;
+    if ((geojson === null || geojson === void 0 ? void 0 : geojson.type) === "Feature") {
+        return (mapGeometryTypesToLayerTypes === null || mapGeometryTypesToLayerTypes === void 0 ? void 0 : mapGeometryTypesToLayerTypes[(_a = geojson === null || geojson === void 0 ? void 0 : geojson.geometry) === null || _a === void 0 ? void 0 : _a.type])
+            ? mapGeometryTypesToLayerTypes[geojson.geometry.type]
+            : "circle";
+    }
+    if ((geojson === null || geojson === void 0 ? void 0 : geojson.type) === "FeatureCollection") {
+        if (geojson.features.length) {
+            return getDefaulLayerTypeByGeometry(geojson.features[0]);
+        }
+        return "circle";
+    }
+    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]);
+    React.useEffect(function () {
+        if (!mapHook.map)
+            return;
+        var checkSourceHandler = function () {
+            var _a, _b;
+            if (!((_b = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.getSource) === null || _b === void 0 ? void 0 : _b.call(_a, props.sourceId))) {
+                createSource();
+            }
+        };
+        mapHook.map.on('styledata', checkSourceHandler);
+        return function () {
+            if (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) {
+                mapHook.map.off('styledata', checkSourceHandler);
+            }
+        };
+    }, [mapHook.map, 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, _d, _e, _f, _g, _h;
+    var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
+    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: __assign({ type: 'geojson', data: props.geojson }, (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'undefined' &&
+            typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) !== 'string'
+            ? props.options.source
+            : {})),
+    });
+    useLayer({
+        mapId: props.mapId,
+        layerId: layerId.current,
+        options: __assign(__assign({ source: 'source-' + layerId.current }, props.options), { paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_d = props === null || props === void 0 ? void 0 : props.options) === null || _d === void 0 ? void 0 : _d.layout), type: layerType }),
+        insertBeforeLayer: props.insertBeforeLayer,
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onLeave: props.onLeave,
+    });
+    // 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 : {})), (((_e = props === null || props === void 0 ? void 0 : props.options) === null || _e === void 0 ? void 0 : _e.filter) ? { filter: props.options.filter } : {})), { layout: __assign(__assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}"), 'text-size': 12, 'text-anchor': 'top' }, (((_f = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.labelOptions.layout : {})), (((_g = props === null || props === void 0 ? void 0 : props.layout) === null || _g === void 0 ? void 0 : _g.visibility) ? { visibility: props.layout.visibility } : {})), paint: __assign({ 'text-halo-width': 1, 'text-halo-color': '#fefefe', 'text-color': '#121212' }, (((_h = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _h === void 0 ? void 0 : _h.paint) ? props.labelOptions.paint : {})) }),
+    });
+    return React.createElement(React.Fragment, null);
+};
+
 /**
  * Adds a button that makes the map follow the users GPS position using
  * navigator.geolocation.watchPosition if activated
@@ -21359,7 +21169,6 @@ exports.MapLibreGlWrapper = MapLibreGlWrapper;
 exports.MapLibreMap = MapLibreMap;
 exports.MedievalKingdomStyle = MedievalKingdomStyle;
 exports.MlCenterPosition = MlCenterPosition;
-exports.MlClientSearch = MlClientSearch;
 exports.MlComponentTemplate = MlComponentTemplate;
 exports.MlCreatePdfButton = MlCreatePdfButton;
 exports.MlCreatePdfForm = MlCreatePdfForm;