@mapcomponents/react-maplibre 0.1.61 → 0.1.62

package/dist/index.esm.js

@@ -7,14 +7,15 @@ import { Map as Map$2, Popup } from 'maplibre-gl';
 import jsPDF from 'jspdf';
 import styled$3 from '@emotion/styled';
 import { keyframes } from '@emotion/react';
+import * as ReactDOM from 'react-dom';
+import ReactDOM__default from 'react-dom';
+import Moveable from 'react-moveable';
 import * as turf from '@turf/turf';
 import { point, circle, lineArc, bbox, lineOffset, distance } from '@turf/turf';
 import { FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, Button as Button$2 } from '@mui/material';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import { css } from '@emotion/css';
 import syncMove from '@mapbox/mapbox-gl-sync-move';
-import * as ReactDOM from 'react-dom';
-import ReactDOM__default from 'react-dom';
 import WMSCapabilities from 'wms-capabilities';
 import * as d3 from 'd3';
 
@@ -9923,273 +9924,6 @@ MlCreatePdfButton.defaultProps = {
     mapId: undefined,
 };
 
-var legalLayerTypes = [
-    'fill',
-    'line',
-    'symbol',
-    'circle',
-    'heatmap',
-    'fill-extrusion',
-    'raster',
-    'hillshade',
-    'background',
-];
-function useLayer(props) {
-    var mapHook = useMap({
-        mapId: props.mapId,
-        waitForLayer: props.insertBeforeLayer,
-    });
-    var layerTypeRef = useRef('');
-    var layerPaintConfRef = useRef('');
-    var layerLayoutConfRef = useRef('');
-    var _a = useState(), layer = _a[0], setLayer = _a[1];
-    var initializedRef = useRef(false);
-    var layerId = useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
-    var createLayer = useCallback(function () {
-        var _a, _b;
-        if (!mapHook.map)
-            return;
-        if (mapHook.map.map.getLayer(layerId.current)) {
-            mapHook.cleanup();
-        }
-        if (mapHook.map.map.getSource(layerId.current)) {
-            mapHook.map.map.removeSource(layerId.current);
-        }
-        if (typeof props.source === 'string') {
-            if (props.source === '' || !mapHook.map.map.getSource(props.source)) {
-                return;
-            }
-        }
-        initializedRef.current = true;
-        mapHook.map.addLayer(__assign(__assign(__assign(__assign({}, props.options), (props.geojson && !props.source
-            ? {
-                source: {
-                    type: 'geojson',
-                    data: props.geojson,
-                },
-            }
-            : {})), (props.source
-            ? {
-                source: props.source,
-            }
-            : {})), { id: layerId.current }), props.insertBeforeLayer
-            ? props.insertBeforeLayer
-            : props.insertBeforeFirstSymbolLayer
-                ? mapHook.map.firstSymbolLayer
-                : undefined, mapHook.componentId);
-        setLayer(mapHook.map.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
-        mapHook.map.on('styledata', function () {
-            var _a;
-            if (initializedRef.current && !((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current))) {
-                console.log('Recreate Layer');
-                createLayer();
-            }
-        }, mapHook.componentId);
-        layerPaintConfRef.current = JSON.stringify((_a = props.options) === null || _a === void 0 ? void 0 : _a.paint);
-        layerLayoutConfRef.current = JSON.stringify((_b = props.options) === null || _b === void 0 ? void 0 : _b.layout);
-        layerTypeRef.current = props.options.type;
-    }, [props, mapHook.map]);
-    useEffect(function () {
-        if (!mapHook.map)
-            return;
-        if (initializedRef.current &&
-            (legalLayerTypes.indexOf(props.options.type) === -1 ||
-                (legalLayerTypes.indexOf(props.options.type) !== -1 &&
-                    props.options.type === layerTypeRef.current))) {
-            return;
-        }
-        createLayer();
-    }, [mapHook.map, props.options, createLayer]);
-    useEffect(function () {
-        var _a, _b, _c, _d;
-        if (!initializedRef.current || !((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(layerId.current)))
-            return;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        //@ts-ignore setData only exists on GeoJsonSource
-        (_d = (_c = mapHook.map.map.getSource(layerId.current)) === null || _c === void 0 ? void 0 : _c.setData) === null || _d === void 0 ? void 0 : _d.call(_c, props.geojson);
-    }, [props.geojson, mapHook.map, props.options.type]);
-    useEffect(function () {
-        var _a, _b, _c, _d, _e;
-        if (!mapHook.map ||
-            !((_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getLayer) === null || _c === void 0 ? void 0 : _c.call(_b, layerId.current)) ||
-            !initializedRef.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 (((_d = props.options.layout) === null || _d === void 0 ? void 0 : _d[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 (((_e = props.options.paint) === null || _e === void 0 ? void 0 : _e[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 () {
-        return function () {
-            initializedRef.current = false;
-            mapHook.cleanup();
-        };
-    }, []);
-    return {
-        map: mapHook.map,
-        layer: layer,
-        layerId: layerId.current,
-        componentId: mapHook.componentId,
-        mapHook: mapHook,
-    };
-}
-
-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)",
-            };
-        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,
-            };
-        case "circle":
-        default:
-            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,
-            };
-    }
-};
-
-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";
-};
-
-/**
- * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
- *
- * @component
- */
-var MlGeoJsonLayer = function (props) {
-    var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
-    // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-    useLayer({
-        mapId: props.mapId,
-        layerId: props.layerId || "MlGeoJsonLayer-" + v4(),
-        geojson: props.geojson,
-        options: __assign(__assign({ paint: props.paint ||
-                getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides), layout: props.layout || {} }, props.options), { type: layerType }),
-        insertBeforeLayer: props.insertBeforeLayer,
-        onHover: props.onHover,
-        onClick: props.onClick,
-        onLeave: props.onLeave,
-    });
-    return (React__default.createElement(React__default.Fragment, null));
-};
-
-var touchEquivalents = {
-  mousedown: 'touchstart',
-  mouseup: 'touchend',
-  mousemove: 'touchmove'
-};
-var touchEquivalentsKeys = Object.keys(touchEquivalents);
-
-function useLayerEvent(props) {
-  var mapState = useMapState({
-    mapId: props.mapId,
-    watch: {
-      layers: true
-    }
-  });
-  var mapHook = useMap({
-    mapId: props.mapId
-  });
-  useEffect(function () {
-    if (!mapHook.map) return true;
-    if (typeof props.condition !== 'undefined' && props.condition === false) return; //console.log('useLayerEvent');
-    //console.log(mapState);
-
-    if (mapHook.map.map.getLayer(props.layerId)) {
-      //console.log("layer avail");
-      var _event = props.event;
-      var _layerId = props.layerId;
-      var _eventHandler = props.eventHandler; //console.log(_event);
-
-      mapHook.map.on(_event, _layerId, _eventHandler, mapHook.componentId);
-
-      if ((props === null || props === void 0 ? void 0 : props.addTouchEvents) === true) {
-        if (touchEquivalentsKeys.indexOf(_event) !== -1) {
-          mapHook.map.on(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
-        }
-      }
-
-      return function () {
-        mapHook.map.off(_event, _layerId, _eventHandler);
-
-        if ((props === null || props === void 0 ? void 0 : props.addTouchEvents) === true) {
-          if (touchEquivalentsKeys.indexOf(_event) !== -1) {
-            mapHook.map.off(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
-          }
-        }
-      };
-    }
-  }, [props, mapState, mapHook.map]);
-  return {};
-}
-
 var PdfTemplates = {
     A4: {
         '300dpi': {
@@ -10269,11 +10003,19 @@ var PdfContextProvider = function (_a) {
     var children = _a.children;
     var _b = useState('A4'), format = _b[0], setFormat = _b[1];
     var _c = useState('72dpi'), quality = _c[0], setQuality = _c[1];
-    var _d = useState('portrait'), orientation = _d[0], setOrientation = _d[1];
+    var _d = useState({
+        center: undefined,
+        scale: undefined,
+        rotate: 0,
+        width: 210,
+        height: 297,
+        orientation: 'portrait',
+        fixedScale: 0,
+    }), options = _d[0], setOptions = _d[1];
     var geojsonRef = useRef();
     var template = useMemo(function () {
         if (typeof PdfTemplates[format][quality] !== 'undefined') {
-            return orientation === 'portrait'
+            return options.orientation === 'portrait'
                 ? PdfTemplates[format][quality]
                 : {
                     width: PdfTemplates[format][quality].height,
@@ -10281,317 +10023,243 @@ var PdfContextProvider = function (_a) {
                 };
         }
         return defaultTemplate;
-    }, [format, quality, orientation]);
+    }, [format, quality, options.orientation]);
     var value = {
+        options: options,
+        setOptions: setOptions,
         format: format,
         setFormat: setFormat,
         quality: quality,
         setQuality: setQuality,
-        orientation: orientation,
-        setOrientation: setOrientation,
         geojsonRef: geojsonRef,
         template: template,
     };
     return React__default.createElement(PdfContext.Provider, { value: value }, children);
 };
 
-var createPreviewGeojson = function (geojsonProps, orientation) {
-    var topLeftAngle = orientation === 'portrait' ? -35.3 : -54.7;
-    var bottomRightAngle = orientation === 'portrait' ? 144.7 : 125.3;
-    var topLeft = turf.destination([geojsonProps.center.lng, geojsonProps.center.lat], geojsonProps.distance, topLeftAngle);
-    var bottomRight = turf.destination([geojsonProps.center.lng, geojsonProps.center.lat], geojsonProps.distance, bottomRightAngle);
-    var bbox = [
-        topLeft.geometry.coordinates[0],
-        topLeft.geometry.coordinates[1],
-        bottomRight.geometry.coordinates[0],
-        bottomRight.geometry.coordinates[1],
-    ];
-    var _previewGeojson = turf.bboxPolygon(bbox);
-    _previewGeojson = turf.transformRotate(_previewGeojson, geojsonProps.bearing);
-    if (!(_previewGeojson === null || _previewGeojson === void 0 ? void 0 : _previewGeojson.properties)) {
-        _previewGeojson.properties = {};
+function getTargetRotationAngle(target) {
+    var el_style = window.getComputedStyle(target, null);
+    var el_transform = el_style.getPropertyValue('transform');
+    var deg = 0;
+    if (el_transform !== 'none') {
+        var values = el_transform.split('(')[1].split(')')[0].split(',');
+        var a = parseFloat(values[0]);
+        var b = parseFloat(values[1]);
+        deg = Math.round(Math.atan2(b, a) * (180 / Math.PI));
     }
-    _previewGeojson.properties.bearing = geojsonProps.bearing;
-    return _previewGeojson;
-};
+    return deg < 0 ? deg + 360 : deg;
+}
+function calcElemTransformedPoint(el, point, transformOrigin) {
+    var style = getComputedStyle(el);
+    var p = [point[0] - transformOrigin[0], point[1] - transformOrigin[1]];
+    var matrix = new DOMMatrixReadOnly(style.transform);
+    // transform pixel coordinates according to the css transform state of "el" (target)
+    return [
+        p[0] * matrix.a + p[1] * matrix.c + matrix.e + transformOrigin[0],
+        p[0] * matrix.b + p[1] * matrix.d + matrix.f + transformOrigin[1],
+    ];
+}
+// measure distance in pixels that is used to determine the current css transform.scale relative to the maps viewport.zoom
+var scaleAnchorInPixels = 10;
+// used to determine the MapZoomScale modifier which is multiplied with props.options.scale to relate the scale to the current map viewport.zoom
+function getMapZoomScaleModifier(point, _map) {
+    var left = _map.unproject(point);
+    var right = _map.unproject([point[0] + scaleAnchorInPixels, point[1]]);
+    var maxMeters = left.distanceTo(right);
+    return scaleAnchorInPixels / maxMeters;
+}
+/**
+ * PdfPreview component renders a transformable (drag, scale, rotate) preview of the desired export or print content
+ */
 function PdfPreview(props) {
     var _a;
-    var pdfContext = useContext(PdfContext);
-    var initializedRef = useRef(false);
-    var activeFeature = useRef();
-    var dragging = useRef(false);
-    var draggingResizeHandle = useRef(false);
-    var draggingRotationHandle = useRef(false);
-    var _b = useState({
-        center: { lng: 0, lat: 0 },
-        distance: 10,
-        bearing: 0,
-        geojson: undefined,
-    }), geojsonProps = _b[0], setGeojsonProps = _b[1];
+    var mapState = useMapState({ mapId: props.mapId, watch: { layers: false, viewport: true } });
+    var targetRef = useRef(null);
+    var fixedScaleRef = useRef();
+    var moveableRef = useRef(null);
+    var mapContainerRef = useRef(document.querySelector('.mapContainer'));
+    //const [transform, setTransform] = useState('translate(452.111px, 15.6148px)');
     var mapHook = useMap({
         mapId: props.mapId,
-        waitForLayer: props.insertBeforeLayer,
     });
     useEffect(function () {
-        if (!mapHook.map ||
-            !pdfContext.geojsonRef ||
-            !pdfContext.orientation ||
-            !pdfContext.template ||
-            initializedRef.current)
+        var _a;
+        if (!((_a = mapState === null || mapState === void 0 ? void 0 : mapState.viewport) === null || _a === void 0 ? void 0 : _a.zoom) || !mapHook.map)
             return;
-        initializedRef.current = true;
-        var center = mapHook.map.map.getCenter();
-        var canvasHeight = mapHook.map.map._canvas.height;
-        var canvasWidth = mapHook.map.map._canvas.width;
-        var bboxPixelHeight = Math.ceil(canvasHeight / 2);
-        var bboxPixelWidth = Math.ceil((pdfContext.template.width / pdfContext.template.height) * bboxPixelHeight);
-        var topLeft = mapHook.map.map.unproject([
-            Math.floor(canvasWidth / 2 - bboxPixelWidth / 2),
-            Math.floor(canvasHeight / 2 - bboxPixelHeight / 2),
-        ]);
-        var distance = turf.distance([center.lng, center.lat], [topLeft.lng, topLeft.lat]);
-        var tmpGeojsonProps = {
-            center: center,
-            distance: distance,
-            bearing: 0,
-            geojson: createPreviewGeojson({ center: center, distance: distance, bearing: 0 }, pdfContext.orientation),
+        // if the component was initialized with scale or center as undefined derive those values from the current map view state
+        //initialize props if not defined
+        var _centerX = Math.round(mapHook.map.map._container.clientWidth / 2);
+        var _centerY = Math.round(mapHook.map.map._container.clientHeight / 2);
+        if (!props.options.scale) {
+            //const scale = parseFloat(/(14/mapState.viewport.zoom));
+            var scale_1 = 1 / getMapZoomScaleModifier([_centerX, _centerY], mapHook.map.map);
+            props.setOptions(function (val) { return (__assign(__assign({}, val), { scale: [scale_1, scale_1] })); });
+        }
+        if (!props.options.center) {
+            var _center_1 = mapHook.map.map.unproject([_centerX, _centerY]);
+            props.setOptions(function (val) { return (__assign(__assign({}, val), { center: [_center_1.lng, _center_1.lat] })); });
+        }
+    }, [mapHook.map, (_a = mapState.viewport) === null || _a === void 0 ? void 0 : _a.zoom]);
+    useEffect(function () {
+        if (!mapHook.map)
+            return;
+        mapHook.map.map.setPitch(0);
+        var _maxPitch = mapHook.map.map.getMaxPitch();
+        mapHook.map.map.setMaxPitch(0);
+        return function () {
+            var _a;
+            (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setMaxPitch(_maxPitch);
         };
-        setGeojsonProps(tmpGeojsonProps);
-        pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
     }, [mapHook.map]);
+    var transformOrigin = useMemo(function () {
+        if (props.options.orientation === 'portrait') {
+            return [props.options.width / 2, props.options.height / 2];
+        }
+        else {
+            return [props.options.height / 2, props.options.width / 2];
+        }
+    }, [props.options.orientation, props.options.width, props.options.height]);
+    var transform = useMemo(function () {
+        var _a, _b;
+        if (!mapHook.map || !props.options.scale)
+            return 'none';
+        var centerInPixels = mapHook.map.map.project(props.options.center);
+        var x = centerInPixels.x;
+        var y = centerInPixels.y;
+        var scale = props.options.scale[0] * getMapZoomScaleModifier([x, y], mapHook.map.map);
+        var viewportBearing = ((_a = mapState === null || mapState === void 0 ? void 0 : mapState.viewport) === null || _a === void 0 ? void 0 : _a.bearing) ? (_b = mapState.viewport) === null || _b === void 0 ? void 0 : _b.bearing : 0;
+        var _transform = "translate(".concat(Math.floor(centerInPixels.x - transformOrigin[0]), "px,").concat(Math.floor(centerInPixels.y - transformOrigin[1]), "px) rotate(").concat(props.options.rotate - viewportBearing, "deg) scale(").concat(scale, ",").concat(scale, ")");
+        if (targetRef.current)
+            targetRef.current.style.transform = _transform;
+        return _transform;
+    }, [
+        mapHook.map,
+        mapState.viewport,
+        props.options.scale,
+        props.options.rotate,
+        props.options.center,
+        transformOrigin,
+    ]);
+    useEffect(function () {
+        var _a;
+        (_a = moveableRef.current) === null || _a === void 0 ? void 0 : _a.updateTarget();
+    }, [transform]);
     useEffect(function () {
-        if (!pdfContext.orientation || !pdfContext.geojsonRef)
+        // update props.options.scale if fixedScale was changed
+        if (!mapHook.map ||
+            !props.options.center ||
+            !props.options.fixedScale ||
+            (typeof props.options.fixedScale !== 'undefined' &&
+                fixedScaleRef.current === props.options.fixedScale))
             return;
-        var tmpGeojsonProps = JSON.parse(JSON.stringify(geojsonProps));
-        tmpGeojsonProps.geojson = createPreviewGeojson(tmpGeojsonProps, pdfContext.orientation);
-        setGeojsonProps(tmpGeojsonProps);
-        pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
-    }, [pdfContext.orientation]);
-    // Resize handle events
-    useLayerEvent({
-        event: 'mouseenter',
-        layerId: 'pdfPreviewGeojsonResizeHandle',
-        eventHandler: function () {
-            if (!mapHook.map)
-                return;
-            mapHook.map.map._canvas.style.cursor = 'nwse-resize';
-            mapHook.map.map.dragPan.disable();
-        },
-    });
-    useLayerEvent({
-        event: 'mouseleave',
-        layerId: 'pdfPreviewGeojsonResizeHandle',
-        eventHandler: function () {
-            if (!mapHook.map)
-                return;
-            mapHook.map.map._canvas.style.cursor = '';
-            mapHook.map.map.dragPan.enable();
-        },
-    });
-    useLayerEvent({
-        event: 'mousedown',
-        layerId: 'pdfPreviewGeojsonResizeHandle',
-        addTouchEvents: true,
-        eventHandler: function (e) {
-            e.preventDefault();
-            if (!mapHook.map)
-                return;
-            dragging.current = false;
-            draggingRotationHandle.current = false;
-            draggingResizeHandle.current = true;
-            mapHook.map.map._canvas.style.cursor = 'move';
-            function onMove(e) {
-                if (!pdfContext.geojsonRef || !draggingResizeHandle.current || !pdfContext.orientation)
-                    return;
-                var tmpGeojsonProps = JSON.parse(JSON.stringify(geojsonProps));
-                var _distance = turf.distance([tmpGeojsonProps.center.lng, tmpGeojsonProps.center.lat], [e.lngLat.lng, e.lngLat.lat]);
-                // limit max diagonal distance of PDF area to 120km as larger area lead to distortions for northern and southern areas
-                if (_distance > 60) {
-                    _distance = 60;
-                }
-                tmpGeojsonProps.distance = _distance;
-                tmpGeojsonProps.geojson = createPreviewGeojson(tmpGeojsonProps, pdfContext.orientation);
-                pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
-                setGeojsonProps(tmpGeojsonProps);
-            }
-            function onUp() {
-                if (!draggingResizeHandle.current || !mapHook.map)
-                    return;
-                mapHook.map.map._canvas.style.cursor = '';
-                draggingResizeHandle.current = false;
-                mapHook.map.map.dragPan.enable();
-                // Unbind mouse events
-                mapHook.map.map.off('mousemove', onMove);
-                mapHook.map.map.off('touchmove', onMove);
-            }
-            // Mouse events
-            mapHook.map.map.on('mousemove', onMove);
-            mapHook.map.map.on('touchmove', onMove);
-            mapHook.map.map.once('mouseup', onUp);
-            mapHook.map.map.once('touchend', onUp);
-        },
-    });
-    // Rotation handle events
-    useLayerEvent({
-        event: 'mouseenter',
-        layerId: 'pdfPreviewGeojsonRotationHandle',
-        eventHandler: function () {
-            if (!mapHook.map)
-                return;
-            mapHook.map.map._canvas.style.cursor = 'nwse-resize';
-            mapHook.map.map.dragPan.disable();
-        },
-    });
-    useLayerEvent({
-        event: 'mouseleave',
-        layerId: 'pdfPreviewGeojsonRotationHandle',
-        eventHandler: function () {
-            if (!mapHook.map)
-                return;
-            mapHook.map.map._canvas.style.cursor = '';
-            mapHook.map.map.dragPan.enable();
-        },
-    });
-    useLayerEvent({
-        event: 'mousedown',
-        layerId: 'pdfPreviewGeojsonRotationHandle',
-        addTouchEvents: true,
-        eventHandler: function (e) {
-            e.preventDefault();
-            if (!mapHook.map || !pdfContext.orientation)
-                return;
-            dragging.current = false;
-            draggingResizeHandle.current = false;
-            draggingRotationHandle.current = true;
-            mapHook.map.map._canvas.style.cursor = 'move';
-            function onMove(e) {
-                e.preventDefault();
-                if (!draggingRotationHandle.current || !pdfContext.orientation || !pdfContext.geojsonRef)
-                    return;
-                var tmpGeojsonProps = JSON.parse(JSON.stringify(geojsonProps));
-                var _bearing = turf.bearing([tmpGeojsonProps.center.lng, tmpGeojsonProps.center.lat], [e.lngLat.lng, e.lngLat.lat]);
-                tmpGeojsonProps.bearing = 144.7 + _bearing;
-                tmpGeojsonProps.geojson = createPreviewGeojson(tmpGeojsonProps, pdfContext.orientation);
-                pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
-                setGeojsonProps(tmpGeojsonProps);
-            }
-            function onUp() {
-                if (!draggingRotationHandle.current || !mapHook.map)
-                    return;
-                mapHook.map.map._canvas.style.cursor = '';
-                draggingRotationHandle.current = false;
-                mapHook.map.map.dragPan.enable();
-                // Unbind mouse events
-                mapHook.map.map.off('mousemove', onMove);
-                mapHook.map.map.off('touchmove', onMove);
-            }
-            // Mouse events
-            mapHook.map.map.on('mousemove', onMove);
-            mapHook.map.map.on('touchmove', onMove);
-            mapHook.map.map.once('mouseup', onUp);
-            mapHook.map.map.once('touchend', onUp);
-        },
-    });
-    // drag & drop events
-    useLayerEvent({
-        event: 'mouseenter',
-        layerId: 'pdfPreviewGeojson',
-        eventHandler: function (e) {
-            var _a;
-            if (!mapHook.map || !((_a = e === null || e === void 0 ? void 0 : e.features) === null || _a === void 0 ? void 0 : _a.length))
-                return;
-            mapHook.map.map._canvas.style.cursor = 'move';
-            activeFeature.current = e.features[0];
-        },
-    });
-    useLayerEvent({
-        event: 'mouseleave',
-        layerId: 'pdfPreviewGeojson',
-        eventHandler: function () {
-            if (!mapHook.map)
-                return;
-            mapHook.map.map._canvas.style.cursor = '';
-            mapHook.map.map.dragPan.enable();
-            activeFeature.current = undefined;
-        },
-    });
-    useLayerEvent({
-        event: 'mousedown',
-        addTouchEvents: true,
-        layerId: 'pdfPreviewGeojson',
-        eventHandler: function (e) {
-            e.preventDefault();
-            console.log('mousedown');
-            if (!mapHook.map)
-                return;
-            draggingResizeHandle.current = false;
-            draggingRotationHandle.current = false;
-            dragging.current = true;
-            mapHook.map.map._canvas.style.cursor = 'move';
-            function onMove(e) {
-                e.preventDefault();
-                if (!dragging.current || !pdfContext.geojsonRef || !pdfContext.orientation)
-                    return;
-                var tmpGeojsonProps = JSON.parse(JSON.stringify(geojsonProps));
-                tmpGeojsonProps.center = e.lngLat;
-                tmpGeojsonProps.geojson = createPreviewGeojson(tmpGeojsonProps, pdfContext.orientation);
-                pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
-                setGeojsonProps(tmpGeojsonProps);
+        fixedScaleRef.current = props.options.fixedScale;
+        var point = turf.point(props.options.center);
+        var distance = props.options.fixedScale * (props.options.width / 1000);
+        var bearing = 90;
+        var options = { units: 'meters' };
+        var destination = turf.destination(point, distance, bearing, options);
+        var centerInPixels = mapHook.map.map.project(point.geometry.coordinates);
+        var destinationInPixels = mapHook.map.map.project(destination.geometry.coordinates);
+        var scaleFactor = (Math.round(destinationInPixels.x - centerInPixels.x) / props.options.width) *
+            (1 / getMapZoomScaleModifier([centerInPixels.x, centerInPixels.y], mapHook.map.map));
+        props.setOptions(function (val) { return (__assign(__assign({}, val), { scale: [scaleFactor, scaleFactor] })); });
+    }, [mapHook.map, props.options.width, props.options.center, props.options.fixedScale]);
+    // update props.geoJsonRef
+    useEffect(function () {
+        var _a;
+        if (targetRef.current && mapHook.map) {
+            // apply orientation
+            var _width = props.options.width;
+            var _height = props.options.height;
+            if (props.options.orientation === 'portrait') {
+                targetRef.current.style.width = props.options.width + 'px';
+                targetRef.current.style.height = props.options.height + 'px';
             }
-            function onUp() {
-                if (!dragging.current || !mapHook.map)
-                    return;
-                mapHook.map.map._canvas.style.cursor = '';
-                dragging.current = false;
-                mapHook.map.map.dragPan.enable();
-                // Unbind mouse events
-                mapHook.map.map.off('mousemove', onMove);
-                mapHook.map.map.off('touchmove', onMove);
+            else {
+                targetRef.current.style.width = props.options.height + 'px';
+                targetRef.current.style.height = props.options.width + 'px';
+                _width = props.options.height;
+                _height = props.options.width;
             }
-            // Mouse events
-            mapHook.map.map.on('mousemove', onMove);
-            mapHook.map.map.on('touchmove', onMove);
-            mapHook.map.map.once('mouseup', onUp);
-            mapHook.map.map.once('touchend', onUp);
-        },
-    });
-    //map.on('mouseleave', 'point', function() {
-    //    map.setPaintProperty('point', 'circle-color', '#3887be');
-    //    canvas.style.cursor = '';
-    //    isCursorOverPoint = false;
-    //    map.dragPan.enable();
-    //});
-    return (React__default.createElement(React__default.Fragment, null, ((_a = geojsonProps === null || geojsonProps === void 0 ? void 0 : geojsonProps.geojson) === null || _a === void 0 ? void 0 : _a.bbox) && (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MlGeoJsonLayer, { paint: { 'line-color': '#616161', 'line-width': 4 }, type: "line", layerId: "pdfPreviewGeojsonOutline", geojson: geojsonProps.geojson }),
-        React__default.createElement(MlGeoJsonLayer, { paint: { 'fill-opacity': 0 }, type: "fill", layerId: "pdfPreviewGeojson", geojson: geojsonProps.geojson }),
-        React__default.createElement(MlGeoJsonLayer, { layerId: "pdfPreviewGeojsonResizeHandle", paint: {
-                'circle-radius': 10,
-                'circle-color': '#1976d2',
-                'circle-stroke-width': 2,
-                'circle-stroke-color': '#ffffff',
-            }, geojson: {
+            (_a = moveableRef.current) === null || _a === void 0 ? void 0 : _a.updateTarget();
+            var topLeft = mapHook.map.map.unproject(calcElemTransformedPoint(targetRef.current, [0, 0], transformOrigin));
+            var topRight = mapHook.map.map.unproject(calcElemTransformedPoint(targetRef.current, [_width, 0], transformOrigin));
+            var bottomLeft = mapHook.map.map.unproject(calcElemTransformedPoint(targetRef.current, [0, _height], transformOrigin));
+            var bottomRight = mapHook.map.map.unproject(calcElemTransformedPoint(targetRef.current, [_width, _height], transformOrigin));
+            var _geoJson = {
                 type: 'Feature',
+                bbox: [topLeft.lng, topLeft.lat, bottomRight.lng, bottomRight.lat],
                 geometry: {
-                    type: 'Point',
-                    //coordinates: [geojsonProps.geojson.bbox[2], geojsonProps.geojson.bbox[3]],
-                    coordinates: geojsonProps.geojson.geometry.coordinates[0][2],
+                    type: 'Polygon',
+                    coordinates: [
+                        [
+                            [topLeft.lng, topLeft.lat],
+                            [topRight.lng, topRight.lat],
+                            [bottomRight.lng, bottomRight.lat],
+                            [bottomLeft.lng, bottomLeft.lat],
+                            [topLeft.lng, topLeft.lat],
+                        ],
+                    ],
                 },
-                properties: {},
-            } }),
-        React__default.createElement(MlGeoJsonLayer, { layerId: "pdfPreviewGeojsonRotationHandle", paint: {
-                'circle-radius': 10,
-                'circle-color': '#86dd71',
-                'circle-stroke-width': 2,
-                'circle-stroke-color': '#ffffff',
-            }, geojson: {
-                type: 'Feature',
-                geometry: {
-                    type: 'Point',
-                    //coordinates: [geojsonProps.geojson.bbox[0], geojsonProps.geojson.bbox[3]],
-                    coordinates: geojsonProps.geojson.geometry.coordinates[0][3],
-                },
-                properties: {},
-            } })))));
+                properties: { bearing: getTargetRotationAngle(targetRef.current) },
+            };
+            props.geojsonRef.current = _geoJson;
+        }
+        return undefined;
+    }, [
+        mapHook,
+        transform,
+        props.options.orientation,
+        props.geojsonRef,
+        mapState,
+        targetRef.current,
+        transformOrigin,
+    ]);
+    return mapContainerRef.current ? ReactDOM__default.createPortal(React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "target", ref: targetRef, style: { transform: transform, transformOrigin: 'center center' } }),
+        React__default.createElement(Moveable
+        // eslint-disable-next-line
+        // @ts-ignore:
+        , { 
+            // eslint-disable-next-line
+            // @ts-ignore:
+            ref: moveableRef, target: targetRef, container: null, origin: true, keepRatio: true, 
+            /* draggable */
+            draggable: true, onDrag: function (e) {
+                var _a;
+                if (mapHook.map) {
+                    var _transformParts = e.transform.split('translate(');
+                    _transformParts = _transformParts[1].split('px)')[0].split('px, ');
+                    var _center_2 = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.unproject([
+                        parseInt(_transformParts[0]) + transformOrigin[0],
+                        parseInt(_transformParts[1]) + transformOrigin[1],
+                    ]);
+                    props.setOptions(function (val) { return (__assign(__assign({}, val), { center: [_center_2.lng, _center_2.lat] })); });
+                }
+            }, 
+            /* scalable */
+            scalable: props.options.fixedScale ? false : true, onScale: function (e) {
+                if (mapHook.map) {
+                    var _transformParts = e.drag.transform.split('scale(');
+                    _transformParts = _transformParts[1].split(')')[0].split(', ');
+                    var centerInPixels = mapHook.map.map.project(props.options.center);
+                    var x = centerInPixels.x;
+                    var y = centerInPixels.y;
+                    var scale_2 = parseFloat(_transformParts[0]) *
+                        (1 / getMapZoomScaleModifier([x, y], mapHook.map.map));
+                    props.setOptions(function (val) { return (__assign(__assign({}, val), { scale: [scale_2, scale_2] })); });
+                }
+            }, 
+            /* rotatable */
+            rotatable: true, onRotate: function (e) {
+                var _a;
+                if (mapHook.map && mapState.viewport) {
+                    var _transformParts = e.drag.transform.split('rotate(');
+                    var _transformPartString_1 = _transformParts[1].split('deg)')[0];
+                    var viewportBearing_1 = ((_a = mapState === null || mapState === void 0 ? void 0 : mapState.viewport) === null || _a === void 0 ? void 0 : _a.bearing) ? mapState.viewport.bearing : 0;
+                    props.setOptions(function (val) { return (__assign(__assign({}, val), { rotate: parseFloat(_transformPartString_1) + viewportBearing_1 })); });
+                }
+            } })), mapContainerRef.current) : React__default.createElement(React__default.Fragment, null);
 }
 
 var createExport = function (options) {
@@ -10633,38 +10301,15 @@ var createExport = function (options) {
         attributionControl: false,
         style: style,
     });
-    var _previewGeojson = turf.bboxPolygon([
-        options.bbox[0],
-        options.bbox[1],
-        options.bbox[2],
-        options.bbox[3],
-    ]);
-    _previewGeojson = turf.transformRotate(_previewGeojson, options.bearing);
-    // use original unrotated bbox and bearing 0 to calculate the correct zoom value as the function always adds a padding if used on the rotated feature coordinates
-    var bboxCamera = renderMap._cameraForBoxAndBearing([options.bboxUnrotated[0], options.bboxUnrotated[1]], [options.bboxUnrotated[2], options.bboxUnrotated[3]], 0);
-    var geometryCamera = renderMap._cameraForBoxAndBearing(_previewGeojson.geometry.coordinates[0][0], _previewGeojson.geometry.coordinates[0][2], options.bearing);
-    geometryCamera.zoom = bboxCamera.zoom;
-    renderMap._fitInternal(geometryCamera);
+    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 () {
-            if (renderMap.getLayer('pdfPreviewGeojsonOutline')) {
-                renderMap.setLayoutProperty('pdfPreviewGeojsonOutline', 'visibility', 'none');
-            }
-            if (renderMap.getLayer('pdfPreviewGeojson')) {
-                renderMap.setLayoutProperty('pdfPreviewGeojson', 'visibility', 'none');
-            }
-            if (renderMap.getLayer('pdfPreviewGeojsonResizeHandle')) {
-                renderMap.setLayoutProperty('pdfPreviewGeojsonResizeHandle', 'visibility', 'none');
-            }
-            if (renderMap.getLayer('pdfPreviewGeojsonRotationHandle')) {
-                renderMap.setLayoutProperty('pdfPreviewGeojsonRotationHandle', 'visibility', 'none');
-            }
-            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));
-                    } });
-                resolve(params);
-            });
+            var params = __assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer, createPdf: function (_options) {
+                    return createJsPdf(__assign(__assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer }), _options));
+                } });
+            resolve(params);
         });
     });
 };
@@ -10713,6 +10358,44 @@ function useExportMap(props) {
     };
 }
 
+var scaleOptions = [
+    {
+        value: 0,
+        label: 'free scale',
+    },
+    {
+        value: 250,
+        label: '1/250',
+    },
+    {
+        value: 500,
+        label: '1/500',
+    },
+    {
+        value: 750,
+        label: '1/750',
+    },
+    {
+        value: 1000,
+        label: '1/1000',
+    },
+    {
+        value: 1500,
+        label: '1/1500',
+    },
+    {
+        value: 2000,
+        label: '1/2000',
+    },
+    {
+        value: 10000,
+        label: '1/10000',
+    },
+    {
+        value: 100000,
+        label: '1/100000',
+    },
+];
 var qualityOptions = [
     {
         value: '72dpi',
@@ -10728,6 +10411,7 @@ var qualityOptions = [
     },
 ];
 function PdfForm(props) {
+    var _a, _b;
     var pdfContext = useContext(PdfContext);
     var mapHook = useMap({
         // eslint-disable-next-line react/prop-types
@@ -10735,14 +10419,14 @@ function PdfForm(props) {
     });
     var mapExporter = useExportMap({ mapId: props.mapId });
     var createPdfHandler = useCallback(function () {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (mapHook.map &&
             mapExporter.createExport &&
             pdfContext.template &&
             pdfContext.format &&
-            pdfContext.orientation &&
-            ((_b = (_a = pdfContext.geojsonRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.bbox) &&
-            ((_c = pdfContext.geojsonRef) === null || _c === void 0 ? void 0 : _c.current)) {
+            ((_a = pdfContext.options) === null || _a === void 0 ? void 0 : _a.orientation) &&
+            ((_c = (_b = pdfContext.geojsonRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.bbox) &&
+            ((_d = pdfContext.geojsonRef) === null || _d === void 0 ? void 0 : _d.current)) {
             var bbox = turf.bbox(pdfContext.geojsonRef.current);
             mapExporter
                 .createExport({
@@ -10750,9 +10434,9 @@ function PdfForm(props) {
                 height: pdfContext.template.height,
                 bbox: bbox,
                 bboxUnrotated: pdfContext.geojsonRef.current.bbox,
-                bearing: ((_e = (_d = pdfContext.geojsonRef.current) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.bearing) || 0,
+                bearing: ((_f = (_e = pdfContext.geojsonRef.current) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.bearing) || 0,
                 format: pdfContext.format.toLowerCase(),
-                orientation: pdfContext.orientation,
+                orientation: pdfContext.options.orientation,
             })
                 .then(function (res) { return res.createPdf(); })
                 .then(function (res) {
@@ -10783,9 +10467,10 @@ function PdfForm(props) {
                 } }, Object.keys(PdfTemplates).map(function (el) { return (React__default.createElement(MenuItem, { key: el, value: el }, el)); }))),
         React__default.createElement(FormControl, { fullWidth: true, sx: formControlStyles },
             React__default.createElement(FormLabel, { id: "orientation-radio-buttons-group-label" }, "Orientation"),
-            React__default.createElement(RadioGroup, { row: true, "aria-labelledby": "orientation-radio-buttons-group-label", name: "orientation-radio-buttons-group", value: pdfContext.orientation, onChange: function (event) {
-                    var _a;
-                    (_a = pdfContext.setOrientation) === null || _a === void 0 ? void 0 : _a.call(pdfContext, event.target.value);
+            React__default.createElement(RadioGroup, { row: true, "aria-labelledby": "orientation-radio-buttons-group-label", name: "orientation-radio-buttons-group", value: (_a = pdfContext.options) === null || _a === void 0 ? void 0 : _a.orientation, onChange: function (event) {
+                    if (!pdfContext.setOptions)
+                        return;
+                    pdfContext.setOptions(function (val) { return (__assign(__assign({}, val), { orientation: event.target.value })); });
                 } },
                 React__default.createElement(FormControlLabel, { value: "portrait", control: React__default.createElement(Radio, null), label: "Portrait" }),
                 React__default.createElement(FormControlLabel, { value: "landscape", control: React__default.createElement(Radio, null), label: "Landscape" }))),
@@ -10796,7 +10481,14 @@ function PdfForm(props) {
                     (_a = pdfContext.setQuality) === null || _a === void 0 ? void 0 : _a.call(pdfContext, event.target.value);
                 } }, qualityOptions.map(function (el) { return (React__default.createElement(MenuItem, { key: el.value, value: el.value }, el.label)); }))),
         React__default.createElement(FormControl, { fullWidth: true, sx: formControlStyles },
-            React__default.createElement(Button$2, { variant: "contained", onClick: createPdfHandler }, "PDF erstellen"))));
+            React__default.createElement(InputLabel, { id: "quality-select-label" }, "Scale"),
+            React__default.createElement(Select, { labelId: "quality-select-label", id: "quality-select", label: "Qualit\u00E4t", value: (_b = pdfContext === null || pdfContext === void 0 ? void 0 : pdfContext.options) === null || _b === void 0 ? void 0 : _b.fixedScale, onChange: function (event) {
+                    var _a;
+                    (_a = pdfContext.setOptions) === null || _a === void 0 ? void 0 : _a.call(pdfContext, function (val) { return (__assign(__assign({}, val), { fixedScale: event.target.value })); });
+                } }, scaleOptions.map(function (el, idx) { return (React__default.createElement(MenuItem, { key: idx, value: el.value }, el.label)); }))),
+        React__default.createElement(FormControl, { fullWidth: true, sx: formControlStyles },
+            React__default.createElement(Button$2, { variant: "contained", onClick: createPdfHandler }, "PDF erstellen")),
+        pdfContext.options && pdfContext.setOptions && (React__default.createElement(PdfPreview, { options: pdfContext.options, setOptions: pdfContext.setOptions, geojsonRef: pdfContext.geojsonRef }))));
 }
 
 /**
@@ -10806,8 +10498,7 @@ function PdfForm(props) {
 var MlCreatePdfForm = function (props) {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(PdfContextProvider, null,
-            React__default.createElement(PdfForm, __assign({}, props)),
-            React__default.createElement(PdfPreview, null))));
+            React__default.createElement(PdfForm, __assign({}, props)))));
 };
 MlCreatePdfForm.defaultProps = {
     mapId: undefined,
@@ -13157,6 +12848,145 @@ var MlFeatureEditor = function (props) {
     return React__default.createElement(React__default.Fragment, null);
 };
 
+var legalLayerTypes = [
+    'fill',
+    'line',
+    'symbol',
+    'circle',
+    'heatmap',
+    'fill-extrusion',
+    'raster',
+    'hillshade',
+    'background',
+];
+function useLayer(props) {
+    var mapHook = useMap({
+        mapId: props.mapId,
+        waitForLayer: props.insertBeforeLayer,
+    });
+    var layerTypeRef = useRef('');
+    var layerPaintConfRef = useRef('');
+    var layerLayoutConfRef = useRef('');
+    var _a = useState(), layer = _a[0], setLayer = _a[1];
+    var initializedRef = useRef(false);
+    var layerId = useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
+    var createLayer = useCallback(function () {
+        var _a, _b;
+        if (!mapHook.map)
+            return;
+        if (mapHook.map.map.getLayer(layerId.current)) {
+            mapHook.cleanup();
+        }
+        if (mapHook.map.map.getSource(layerId.current)) {
+            mapHook.map.map.removeSource(layerId.current);
+        }
+        if (typeof props.source === 'string') {
+            if (props.source === '' || !mapHook.map.map.getSource(props.source)) {
+                return;
+            }
+        }
+        initializedRef.current = true;
+        mapHook.map.addLayer(__assign(__assign(__assign(__assign({}, props.options), (props.geojson && !props.source
+            ? {
+                source: {
+                    type: 'geojson',
+                    data: props.geojson,
+                },
+            }
+            : {})), (props.source
+            ? {
+                source: props.source,
+            }
+            : {})), { id: layerId.current }), props.insertBeforeLayer
+            ? props.insertBeforeLayer
+            : props.insertBeforeFirstSymbolLayer
+                ? mapHook.map.firstSymbolLayer
+                : undefined, mapHook.componentId);
+        setLayer(mapHook.map.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
+        mapHook.map.on('styledata', function () {
+            var _a;
+            if (initializedRef.current && !((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current))) {
+                console.log('Recreate Layer');
+                createLayer();
+            }
+        }, mapHook.componentId);
+        layerPaintConfRef.current = JSON.stringify((_a = props.options) === null || _a === void 0 ? void 0 : _a.paint);
+        layerLayoutConfRef.current = JSON.stringify((_b = props.options) === null || _b === void 0 ? void 0 : _b.layout);
+        layerTypeRef.current = props.options.type;
+    }, [props, mapHook.map]);
+    useEffect(function () {
+        if (!mapHook.map)
+            return;
+        if (initializedRef.current &&
+            (legalLayerTypes.indexOf(props.options.type) === -1 ||
+                (legalLayerTypes.indexOf(props.options.type) !== -1 &&
+                    props.options.type === layerTypeRef.current))) {
+            return;
+        }
+        createLayer();
+    }, [mapHook.map, props.options, createLayer]);
+    useEffect(function () {
+        var _a, _b, _c, _d;
+        if (!initializedRef.current || !((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(layerId.current)))
+            return;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore setData only exists on GeoJsonSource
+        (_d = (_c = mapHook.map.map.getSource(layerId.current)) === null || _c === void 0 ? void 0 : _c.setData) === null || _d === void 0 ? void 0 : _d.call(_c, props.geojson);
+    }, [props.geojson, mapHook.map, props.options.type]);
+    useEffect(function () {
+        var _a, _b, _c, _d, _e;
+        if (!mapHook.map ||
+            !((_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getLayer) === null || _c === void 0 ? void 0 : _c.call(_b, layerId.current)) ||
+            !initializedRef.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 (((_d = props.options.layout) === null || _d === void 0 ? void 0 : _d[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 (((_e = props.options.paint) === null || _e === void 0 ? void 0 : _e[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 () {
+        return function () {
+            initializedRef.current = false;
+            mapHook.cleanup();
+        };
+    }, []);
+    return {
+        map: mapHook.map,
+        layer: layer,
+        layerId: layerId.current,
+        componentId: mapHook.componentId,
+        mapHook: mapHook,
+    };
+}
+
 /**
  * Adds a fill extrusion layer to the MapLibre instance reference by props.mapId
  *
@@ -13193,6 +13023,84 @@ 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)",
+            };
+        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,
+            };
+        case "circle":
+        default:
+            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,
+            };
+    }
+};
+
+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";
+};
+
+/**
+ * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
+ *
+ * @component
+ */
+var MlGeoJsonLayer = function (props) {
+    var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
+    // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+    useLayer({
+        mapId: props.mapId,
+        layerId: props.layerId || "MlGeoJsonLayer-" + v4(),
+        geojson: props.geojson,
+        options: __assign(__assign({ paint: props.paint ||
+                getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides), layout: props.layout || {} }, props.options), { type: layerType }),
+        insertBeforeLayer: props.insertBeforeLayer,
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onLeave: props.onLeave,
+    });
+    return (React__default.createElement(React__default.Fragment, null));
+};
+
 var GpsFixed = {};
 
 var _interopRequireDefault$4 = interopRequireDefault.exports;
@@ -19891,5 +19799,5 @@ SimpleDataProvider.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-export { GeoJsonContext, GeoJsonProvider, MapComponentsProvider, MapContext, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlScaleReference, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, SimpleDataContext, SimpleDataProvider, useCameraFollowPath, useExportMap, useLayer, useMap, useMapState, useSource, useWms };
+export { GeoJsonContext, GeoJsonProvider, MapComponentsProvider, MapContext, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlNavigationCompass, MlNavigationTools, MlOsmLayer, PdfPreview as MlPdfPreview, MlScaleReference, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, SimpleDataContext, SimpleDataProvider, useCameraFollowPath, useExportMap, useLayer, useMap, useMapState, useSource, useWms };
 //# sourceMappingURL=index.esm.js.map