@mapcomponents/react-maplibre 1.0.4 → 1.0.5

package/dist/index.esm.js

@@ -4,16 +4,15 @@ import React__default, { useMemo, useEffect, useCallback, useState, useRef, useC
 import { createTheme, ThemeProvider, styled as styled$2, useTheme } from '@mui/material/styles';
 import { v4 } from 'uuid';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Button, Autocomplete, TextField, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, Slider, Drawer, Tooltip, Snackbar, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
+import { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, Tooltip, Snackbar, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
 import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus';
-import elasticlunr from 'elasticlunr';
-import * as turf from '@turf/turf';
-import { point, circle, lineArc, bbox, booleanContains, bboxPolygon, featureCollection, distance, lineOffset } from '@turf/turf';
 import PrinterIcon from '@mui/icons-material/Print';
 import Button$1 from '@mui/material/Button';
 import jsPDF from 'jspdf';
 import ReactDOM from 'react-dom';
 import Moveable from 'react-moveable';
+import * as turf from '@turf/turf';
+import { point, circle, lineArc, bbox, booleanContains, bboxPolygon, featureCollection, distance, lineOffset } from '@turf/turf';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import GpsFixedIcon from '@mui/icons-material/GpsFixed';
@@ -1320,741 +1319,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__default.createElement(React__default.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 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 = useRef('');
-    var layerPaintConfRef = useRef('');
-    var layerLayoutConfRef = useRef('');
-    var _b = useState(), layer = _b[0], setLayer = _b[1];
-    var layerId = useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
-    var createLayer = 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]);
-    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]);
-    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]);
-    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]);
-    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]);
-    useEffect(function () {
-        return function () {
-            mapHook.cleanup();
-        };
-    }, []);
-    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 = useState(), source = _b[0], setSource = _b[1];
-    var sourceId = useRef(props.sourceId || (props.idPrefix ? props.idPrefix : 'Source-') + mapHook.componentId);
-    var removeSource = 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 = 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]);
-    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]);
-    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]);
-    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
-    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 = useRef(props.layerId || 'MlGeoJsonLayer-' + v4());
-    var labelLayerId = "label-".concat(layerId.current);
-    useEffect(function () {
-        if (!props.layerId) {
-            layerId.current = 'MlGeoJsonLayer-' + 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__default.createElement(React__default.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__default.createContext({});
-var SearchContextProvider = function (_a) {
-    var children = _a.children, searchIndex = _a.searchIndex, renderOption = _a.renderOption, searchFieldLabel = _a.searchFieldLabel, fields = _a.fields;
-    var _b = useState(undefined), searchIndexInstance = _b[0], setSearchIndexInstance = _b[1];
-    var _c = useState(undefined), searchTerm = _c[0], setSearchTerm = _c[1];
-    var _d = useState([]), searchResults = _d[0], setSearchResults = _d[1];
-    var _e = useState([]), searchResultsArray = _e[0], setSearchResultsArray = _e[1];
-    var _f = useState(undefined), selectedResult = _f[0], setSelectedResult = _f[1];
-    var _g = useState(), feature = _g[0], setFeature = _g[1];
-    var mapHook = useMap({
-        mapId: undefined,
-    });
-    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.buffer(geometry, 1, {
-                units: 'kilometers',
-            });
-        }
-        return turf.bbox(geometry);
-    };
-    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]);
-    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__default.createElement(React__default.Fragment, null,
-        React__default.createElement(SearchContext.Provider, { value: value },
-            " ",
-            children),
-        feature && React__default.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 = 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 = useCallback(debounce(function (e) {
-        searchContext.setSearchTerm(e.target.value);
-    }, 200), [searchContext]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(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__default.createElement(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__default.createElement(React__default.Fragment, null,
-        React__default.createElement(SearchContextProvider, { searchIndex: searchIndex, fields: fields, renderOption: renderOption, searchFieldLabel: searchFieldLabel },
-            React__default.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__default.createElement(React__default.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 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 = 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 = 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,
     });
@@ -2880,48 +2282,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]);
+    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]);
+    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__default.createElement(React__default.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 = useRef('');
+    var layerPaintConfRef = useRef('');
+    var layerLayoutConfRef = useRef('');
+    var _b = useState(), layer = _b[0], setLayer = _b[1];
+    var layerId = useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
+    var createLayer = 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]);
+    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]);
+    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]);
+    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]);
+    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]);
+    useEffect(function () {
+        return function () {
+            mapHook.cleanup();
         };
-    }, [drawToolsReady, mapHook.map]);
+    }, []);
     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]);
-    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__default.createElement(React__default.Fragment, null));
-};
+}
+useLayer.defaultProps = {};
 
 /**
  * Adds a fill extrusion layer to the MapLibre instance reference by props.mapId
@@ -2959,6 +2585,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 = useState(), source = _b[0], setSource = _b[1];
+    var sourceId = useRef(props.sourceId || (props.idPrefix ? props.idPrefix : 'Source-') + mapHook.componentId);
+    var removeSource = 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 = 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]);
+    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]);
+    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]);
+    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
+    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 = useRef(props.layerId || 'MlGeoJsonLayer-' + v4());
+    var labelLayerId = "label-".concat(layerId.current);
+    useEffect(function () {
+        if (!props.layerId) {
+            layerId.current = 'MlGeoJsonLayer-' + 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__default.createElement(React__default.Fragment, null);
+};
+
 /**
  * Adds a button that makes the map follow the users GPS position using
  * navigator.geolocation.watchPosition if activated
@@ -21311,5 +21121,5 @@ SpeedDial.defaultProps = {
     mapId: undefined,
 };
 
-export { AddLayerButton, AddLayerPopup, CSVProtocolHandler, PaintPropsColorPicker as ColorPicker, ConfirmDialog, GeoJsonContext, GeoJsonLayerForm, GeoJsonProvider, GruvboxStyle, LayerContext, LayerContextProvider, LayerList, LayerListFolder, LayerListItem, LayerListItemFactory, LayerListItemVectorLayer, LayerPropertyForm, LayerTypeForm, MapComponentsProvider, MapContext, MapLibreGlWrapper, MapLibreMap, MedievalKingdomStyle, MlCenterPosition, MlClientSearch, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGeoJsonLayer, MlGpxViewer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlMultiMeasureTool, MlNavigationCompass, MlNavigationTools, MlOrderLayers, PdfPreview as MlPdfPreview, MlScaleReference, MlShareMapState, MlSketchTool, MlSpatialElevationProfile, MlTemporalController, MlTerrainLayer, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsFeatureInfoPopup, MlWmsLayer, MlWmsLoader, MonokaiStyle, OSMProtocolHandler, OceanicNextStyle, PdfContext, PdfForm, SelectStyleButton, SelectStylePopup, Sidebar, SimpleDataContext, SimpleDataProvider, SolarizedStyle, SpeedDial, TopToolbar, TopojsonProtocolHandler, UploadButton, WmsLayerForm, XMLProtocolHandler, convertCsv, convertOSM, convertTopojson, convertXML, getTheme, useAddImage, useAddProtocol, useCameraFollowPath, useExportMap, useFeatureEditor, useFilterData, useGpx, useLayer, useLayerContext, useLayerEvent, useLayerFilter, LayerHoverPopup as useLayerHoverPopup, useMap, useMapState, useSource, useWms };
+export { AddLayerButton, AddLayerPopup, CSVProtocolHandler, PaintPropsColorPicker as ColorPicker, ConfirmDialog, GeoJsonContext, GeoJsonLayerForm, GeoJsonProvider, GruvboxStyle, LayerContext, LayerContextProvider, LayerList, LayerListFolder, LayerListItem, LayerListItemFactory, LayerListItemVectorLayer, LayerPropertyForm, LayerTypeForm, MapComponentsProvider, MapContext, MapLibreGlWrapper, MapLibreMap, MedievalKingdomStyle, MlCenterPosition, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGeoJsonLayer, MlGpxViewer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlMultiMeasureTool, MlNavigationCompass, MlNavigationTools, MlOrderLayers, PdfPreview as MlPdfPreview, MlScaleReference, MlShareMapState, MlSketchTool, MlSpatialElevationProfile, MlTemporalController, MlTerrainLayer, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsFeatureInfoPopup, MlWmsLayer, MlWmsLoader, MonokaiStyle, OSMProtocolHandler, OceanicNextStyle, PdfContext, PdfForm, SelectStyleButton, SelectStylePopup, Sidebar, SimpleDataContext, SimpleDataProvider, SolarizedStyle, SpeedDial, TopToolbar, TopojsonProtocolHandler, UploadButton, WmsLayerForm, XMLProtocolHandler, convertCsv, convertOSM, convertTopojson, convertXML, getTheme, useAddImage, useAddProtocol, useCameraFollowPath, useExportMap, useFeatureEditor, useFilterData, useGpx, useLayer, useLayerContext, useLayerEvent, useLayerFilter, LayerHoverPopup as useLayerHoverPopup, useMap, useMapState, useSource, useWms };
 //# sourceMappingURL=index.esm.js.map