@mapcomponents/react-maplibre 1.0.11 → 1.1.0

package/dist/index.cjs.js

@@ -204,7 +204,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 var MapLibreGlWrapper = /** @class */ (function () {
     function MapLibreGlWrapper(props) {
         var _this = this;
@@ -506,7 +505,6 @@ var MapLibreGlWrapper = /** @class */ (function () {
                 self.initRegisteredElements(componentId);
                 self.registeredElements[componentId].events.push(_arguments);
             }
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             (_a = self.map).on.apply(_a, _arguments);
             return _this;
@@ -554,7 +552,6 @@ var MapLibreGlWrapper = /** @class */ (function () {
                 // cleanup events
                 self.registeredElements[componentId].events.forEach(function (item) {
                     var _a;
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
                     (_a = self.map).off.apply(_a, item);
                 });
@@ -1087,8 +1084,8 @@ var defaultProps$1 = {
  */
 var MapLibreMap = function (props) {
     var _a, _b;
-    var mapRef = React.useRef();
-    var mapContainer = React.useRef();
+    var mapRef = React.useRef(null);
+    var mapContainer = React.useRef(null);
     var mapContext = React.useContext(MapContext);
     var mapIdRef = React.useRef(props.mapId);
     var initializedRef = React.useRef(false);
@@ -1102,7 +1099,7 @@ var MapLibreMap = function (props) {
             if (mapRef.current) {
                 (_b = (_a = mapRef.current.map) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
                 mapRef.current.cancelled = true;
-                mapRef.current = undefined;
+                mapRef.current = null;
             }
         };
     }, []);
@@ -1156,11 +1153,11 @@ function useMapState(props) {
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
     var mapContext = React.useContext(MapContext);
     var initializedRef = React.useRef(false);
-    var mapRef = React.useRef();
+    var mapRef = React.useRef(null);
     var _a = React.useState(), viewport = _a[0], setViewport = _a[1];
     var viewportRef = React.useRef(undefined);
     var _b = React.useState([]), layers = _b[0], setLayers = _b[1];
-    var layersRef = React.useRef();
+    var layersRef = React.useRef("");
     //const mapRef = useRef(props.map);
     var componentId = React.useRef(uuid.v4());
     /**
@@ -1200,7 +1197,7 @@ function useMapState(props) {
             // cleanup all event listeners
             if (mapRef.current) {
                 mapRef.current.cleanup(_componentId);
-                mapRef.current = undefined;
+                mapRef.current = null;
             }
             initializedRef.current = false;
         };
@@ -1267,7 +1264,7 @@ function useMap(props) {
             includeBaseLayers: true,
         },
     });
-    var mapRef = React.useRef();
+    var mapRef = React.useRef(null);
     var componentId = React.useRef(uuid.v4());
     var cleanup = function () {
         if (mapRef.current) {
@@ -1277,13 +1274,13 @@ function useMap(props) {
     React.useEffect(function () {
         return function () {
             cleanup();
-            mapRef.current = undefined;
+            mapRef.current = null;
         };
     }, []);
     React.useEffect(function () {
         var _a;
         if (mapRef.current && mapRef.current.cancelled === true) {
-            mapRef.current = undefined;
+            mapRef.current = null;
             setState({ map: undefined, ready: false });
         }
         if (mapRef.current || !mapContext.mapExists(props === null || props === void 0 ? void 0 : props.mapId))
@@ -1397,6 +1394,8 @@ var createExport = function (options) {
         bearing: 0,
         pitch: 0,
         interactive: false,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
         preserveDrawingBuffer: true,
         fadeDuration: 0,
         attributionControl: false,
@@ -1607,7 +1606,7 @@ var PdfContextProvider = function (_a) {
         orientation: 'portrait',
         fixedScale: 0,
     }), options = _d[0], setOptions = _d[1];
-    var geojsonRef = React.useRef();
+    var geojsonRef = React.useRef(null);
     var template = React.useMemo(function () {
         if (typeof PdfTemplates[format][quality] !== 'undefined') {
             return options.orientation === 'portrait'
@@ -1670,7 +1669,7 @@ function PdfPreview(props) {
     var _a;
     var mapState = useMapState({ mapId: props.mapId, watch: { layers: false, viewport: true } });
     var targetRef = React.useRef(null);
-    var fixedScaleRef = React.useRef();
+    var fixedScaleRef = React.useRef(null);
     var moveableRef = React.useRef(null);
     var mapContainerRef = React.useRef(document.querySelector('.mapContainer'));
     //const [transform, setTransform] = useState('translate(452.111px, 15.6148px)');
@@ -1914,7 +1913,6 @@ function PdfForm(props) {
     var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
     var pdfContext = React.useContext(PdfContext);
     var mapHook = useMap({
-        // eslint-disable-next-line react/prop-types
         mapId: props.mapId,
     });
     var mapExporter = useExportMap({ mapId: props.mapId });
@@ -1943,7 +1941,6 @@ function PdfForm(props) {
                 .then(function (res) {
                 if (typeof props.onCreatePdf === 'function') {
                     res.formData = new FormData(document.getElementById('createPdfFormID'));
-                    console.log('testlog');
                     props.onCreatePdf(res);
                 }
                 setLoading(false);
@@ -2253,7 +2250,7 @@ function featureEditorStyle() {
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
 var useFeatureEditor = function (props) {
-    var draw = React.useRef();
+    var draw = React.useRef(null);
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
@@ -3316,7 +3313,7 @@ function LayerPropertyForm$1(_a) {
                 case 'slider':
                     return (React.createElement(React.Fragment, { key: key },
                         label,
-                        React.createElement(material.Slider, __assign({}, inputPropsByPropKey$1[key], { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], valueLabelDisplay: "auto", onChange: function (_ev, value) {
+                        React.createElement(material.Slider, __assign({}, inputPropsByPropKey$1[key], { value: paintProps[key], valueLabelDisplay: "auto", onChange: function (_ev, value) {
                                 if (value) {
                                     setPaintProps(function (current) {
                                         var _a;
@@ -4011,16 +4008,12 @@ var MlNavigationTools = function (props) {
     var zoomIn = React.useCallback(function () {
         if (!mapHook.map)
             return;
-        if (mapHook.map.transform._zoom + 0.5 <= mapHook.map.transform._maxZoom) {
-            mapHook.map.easeTo({ zoom: mapHook.map.transform._zoom + 0.5 });
-        }
+        mapHook.map.easeTo({ zoom: mapHook.map.getZoom() + 0.5 });
     }, [mapHook.map]);
     var zoomOut = React.useCallback(function () {
         if (!mapHook.map)
             return;
-        if (mapHook.map.transform._zoom - 0.5 >= mapHook.map.transform._minZoom) {
-            mapHook.map.easeTo({ zoom: mapHook.map.transform._zoom - 0.5 });
-        }
+        mapHook.map.easeTo({ zoom: mapHook.map.getZoom() - 0.5 });
     }, [mapHook.map]);
     var adjustPitch = React.useCallback(function () {
         if (!mapHook.map)
@@ -4386,12 +4379,12 @@ var MlLayerSwipe = function (props) {
         document.removeEventListener('mouseup', onMouseUp);
     };
     function adjustWindowSize() {
-        var clipWidth = mapContext.maps[props.map2Id]
+        var clipWidth = parseFloat(mapContext.maps[props.map2Id]
             .getContainer()
             .style.clip.split(',')[1]
-            .replace('px', '');
+            .replace('px', ''));
         var canvasWidth = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect().width;
-        if (parseFloat(clipWidth) < canvasWidth) {
+        if (clipWidth < canvasWidth) {
             var newPosition = parseFloat(((clipWidth / canvasWidth) * 100).toFixed(2));
             setSwipeX(newPosition);
         }
@@ -4592,7 +4585,7 @@ var MlTransitionGeoJsonLayer = function (props) {
     });
     var initializedRef = React.useRef(false);
     // transition effect variables
-    var oldGeojsonRef = React.useRef();
+    var oldGeojsonRef = React.useRef(null);
     var transitionInProgressRef = React.useRef(false);
     var transitionTimeoutRef = React.useRef(undefined);
     var currentTransitionStepRef = React.useRef(false);
@@ -4622,7 +4615,9 @@ var MlTransitionGeoJsonLayer = function (props) {
             transitionGeojsonCommonDataRef.current = [];
             transitionToGeojson();
         }
-        oldGeojsonRef.current = props.geojson;
+        if (props.geojson) {
+            oldGeojsonRef.current = props.geojson;
+        }
     }, [mapHook.map, transitionToGeojson, props]);
     var startTransition = React.useCallback(function () {
         if (props.type === 'line' &&
@@ -5414,7 +5409,7 @@ var MlShareMapState = function (props) {
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
     var mapContext = React.useContext(MapContext);
     var initializedRef = React.useRef(false);
-    var mapRef = React.useRef();
+    var mapRef = React.useRef(null);
     var _a = React.useState(undefined), map = _a[0], setMap = _a[1];
     var layersFromUrlParamsRef = React.useRef({});
     var componentId = React.useRef((props.idPrefix ? props.idPrefix : 'MlShareMapState-') + uuid.v4());
@@ -5429,7 +5424,7 @@ var MlShareMapState = function (props) {
         },
     });
     var allStatesRestoredRef = React.useRef(false);
-    var layerStatesRestored = React.useRef();
+    var layerStatesRestored = React.useRef(null);
     var restoredStatesRef = React.useRef({
         viewport: {
             center: false,
@@ -5475,7 +5470,7 @@ var MlShareMapState = function (props) {
             // check for the existence of map.style before calling getLayer or getSource
             if (mapRef.current) {
                 mapRef.current.cleanup(_componentId);
-                mapRef.current = undefined;
+                mapRef.current = null;
             }
             initializedRef.current = false;
         };
@@ -5513,7 +5508,7 @@ var MlShareMapState = function (props) {
         if (!((_a = mapState === null || mapState === void 0 ? void 0 : mapState.layers) === null || _a === void 0 ? void 0 : _a.length))
             return;
         if (typeof layerStatesRestored.current === 'undefined') {
-            layerStatesRestored.current = undefined;
+            layerStatesRestored.current = null;
             (_b = initialUrlParams === null || initialUrlParams === void 0 ? void 0 : initialUrlParams.layers) === null || _b === void 0 ? void 0 : _b.forEach(function (layer) {
                 var _a;
                 if ((_a = layerStatesRestored.current) === null || _a === void 0 ? void 0 : _a[layer.id]) {
@@ -5627,7 +5622,7 @@ function getElevationData(_geojsonInfo, elevationFactor) {
     _geojsonInfo.line.geometry.coordinates.forEach(function (coordinate, index) {
         //const point = createPoint(coordinate[0],coordinate[1],coordinate[2]-min);
         //points.push(point);
-        if (_geojsonInfo.line.geometry.coordinates[index + 1]) {
+        if (_geojsonInfo.line.geometry.coordinates[index + 1] && Array.isArray(coordinate)) {
             var wayLength = turf.distance([coordinate[0], coordinate[1]], [
                 _geojsonInfo.line.geometry.coordinates[index + 1][0],
                 _geojsonInfo.line.geometry.coordinates[index + 1][1],
@@ -5796,7 +5791,7 @@ var MlVectorTileLayer = function (props) {
                 var layerPaintConfString = JSON.stringify(layer.paint);
                 if (layerPaintConfString !== layerPaintConfsRef.current[layer.id]) {
                     for (var paintKey in layer.paint) {
-                        mapHook.map.map.setPaintProperty(layer.id, paintKey, layer.paint[paintKey]);
+                        mapHook.map.setPaintProperty(layer.id, paintKey, layer.paint[paintKey]);
                     }
                 }
                 layerPaintConfsRef.current[layer.id] = layerPaintConfString;
@@ -5804,7 +5799,7 @@ var MlVectorTileLayer = function (props) {
                 var layerLayoutConfString = JSON.stringify(layer.layout);
                 if (layerLayoutConfString !== layerLayoutConfsRef.current[layer.id]) {
                     for (var layoutKey in layer.layout) {
-                        mapHook.map.map.setLayoutProperty(layer.id, layoutKey, layer.layout[layoutKey]);
+                        mapHook.map.setLayoutProperty(layer.id, layoutKey, layer.layout[layoutKey]);
                     }
                 }
                 layerLayoutConfsRef.current[layer.id] = layerLayoutConfString;
@@ -6690,7 +6685,7 @@ function TemporalControllerPlayer(props) {
     var _a = React.useState(props.currentVal), currentVal = _a[0], setCurrentVal = _a[1];
     var _b = React.useState(props.isPlaying), isPlaying = _b[0], setIsPlaying = _b[1];
     var range = props.maxVal - props.minVal;
-    var intervalRef = React.useRef();
+    var intervalRef = React.useRef(null);
     var mediaIsMobile = material.useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
     React.useEffect(function () {
         return function () {
@@ -6710,7 +6705,8 @@ function TemporalControllerPlayer(props) {
         }
         intervalRef.current = setInterval(function () {
             if (counter >= range) {
-                clearInterval(intervalRef.current);
+                if (intervalRef.current)
+                    clearInterval(intervalRef.current);
                 setIsPlaying(false);
             }
             else {
@@ -6728,18 +6724,21 @@ function TemporalControllerPlayer(props) {
         else {
             setIsPlaying(false);
             if (isPlaying) {
-                clearInterval(intervalRef.current);
+                if (intervalRef.current)
+                    clearInterval(intervalRef.current);
             }
         }
     };
     var handleStop = function () {
-        clearInterval(intervalRef.current);
+        if (intervalRef.current)
+            clearInterval(intervalRef.current);
         setCurrentVal(props.minVal);
         setIsPlaying(false);
     };
     var handleFastRewind = function () {
         if (isPlaying) {
-            clearInterval(intervalRef.current);
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
             setCurrentVal(currentVal - range / 10);
             play();
         }
@@ -6749,7 +6748,8 @@ function TemporalControllerPlayer(props) {
     };
     var handleFastForward = function () {
         if (isPlaying) {
-            clearInterval(intervalRef.current);
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
             setCurrentVal(currentVal + range / 10);
             play();
         }
@@ -6764,7 +6764,8 @@ function TemporalControllerPlayer(props) {
         }
         else {
             if (e) {
-                clearInterval(intervalRef.current);
+                if (intervalRef.current)
+                    clearInterval(intervalRef.current);
                 setCurrentVal(newValue);
                 play();
             }
@@ -6890,13 +6891,14 @@ var MlTemporalController = function (props) {
             setCurrentVal(props.initialVal);
         }
     }, []);
-    if (typeof props.onStateChange === 'function') {
-        // this is not in a useEffect hook because currentVal and paint are changing on almost every render
-        props.onStateChange({
-            current: currentVal,
-            paint: paint,
-        });
-    }
+    React.useEffect(function () {
+        if (typeof props.onStateChange === 'function') {
+            props.onStateChange({
+                current: currentVal,
+                paint: paint,
+            });
+        }
+    }, [props.onStateChange]);
     // Fit map to bbox
     React.useEffect(function () {
         var _a;
@@ -7095,7 +7097,7 @@ var MlSketchTool = function (props) {
             };
             return (React.createElement(React.Fragment, null,
                 React.createElement(Tooltip, { title: el.name },
-                    React.createElement(material.Button, { sx: __assign({ color: stateIconColor, backgroundColor: stateColor, '&:hover': {
+                    React.createElement(material.Button, { key: el.name, sx: __assign({ color: stateIconColor, backgroundColor: stateColor, '&:hover': {
                                 backgroundColor: stateColor,
                             } }, buttonStyle), onClick: function () { return buttonClickHandler(el.mode); } }, el.icon))));
         })));
@@ -7113,7 +7115,12 @@ var MlSketchTool = function (props) {
                     var _geometries = __spreadArray([], sketchState.geometries, true);
                     if (typeof _sketchState.activeGeometryIndex === 'undefined') {
                         var tempFeature = feature[0];
-                        tempFeature.properties.id = tempFeature.id;
+                        if (tempFeature && tempFeature.properties) {
+                            tempFeature.properties.id = tempFeature.id;
+                        }
+                        else {
+                            console.error('tempFeature or tempFeature.properties is null or undefined');
+                        }
                         _sketchState.activeGeometryIndex = _geometries.length;
                         _geometries.push(tempFeature);
                     }
@@ -7173,7 +7180,7 @@ var MlSketchTool = function (props) {
                     },
                     fill: {
                         'fill-color': '#dd9900',
-                        'fill-opacity': 0.4
+                        'fill-opacity': 0.4,
                     },
                 } }))),
         sketchState.drawMode === 'simple_select' && (React.createElement(material.Typography, { sx: { fontSize: '0.6em' } },
@@ -7198,7 +7205,7 @@ var useCameraFollowPath = function (props) {
     var pitch = React.useRef(props.pitch);
     var step = React.useRef(1);
     var speed = React.useRef(props.speed);
-    var timeoutId = React.useRef();
+    var timeoutId = React.useRef(null);
     var kmPerStep = props.kmPerStep || 0.01;
     var routeDistance = turf__namespace.length(props.route);
     var stepDuration = props.stepDuration || 70;
@@ -7540,7 +7547,6 @@ function convertOSM(params) {
         });
     });
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var OSMProtocolHandler = function (params) { return __awaiter(void 0, void 0, void 0, function () {
     var parsedParams, data;
     return __generator(this, function (_a) {
@@ -7560,7 +7566,6 @@ var OSMProtocolHandler = function (params) { return __awaiter(void 0, void 0, vo
 
 function reduceFeatures(geojson) {
     var newFeatures = [];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     geojson.features.forEach(function (e) {
         if (!e.features) {
             newFeatures.push({
@@ -7593,6 +7598,7 @@ function convertTopojson(params) {
                                 topoJsonData = JSON.parse(rawData);
                             }
                             catch (e) {
+                                console.error('Error converting topojson', e);
                                 throw 'Invalid TopoJson';
                             }
                             // Convert the data
@@ -7601,15 +7607,16 @@ function convertTopojson(params) {
                                 features: [],
                             };
                             if (topoJsonData.type === 'Topology' && topoJsonData.objects !== undefined) {
+                                var topoJsonDataObjects_1 = topoJsonData.objects;
                                 // add the "fromObject" property in each topojson feature
                                 Object.keys(topoJsonData.objects).map(function (key) {
-                                    var _a, _b, _c, _d, _e, _f, _g;
-                                    if (((_a = topoJsonData.objects) === null || _a === void 0 ? void 0 : _a[key].type) === 'GeometryCollection') {
-                                        (_c = (_b = topoJsonData.objects) === null || _b === void 0 ? void 0 : _b[key].geometries) === null || _c === void 0 ? void 0 : _c.forEach(function (e) { return (e.properties = __assign({ fromObject: key }, e.properties)); });
+                                    var _a, _b;
+                                    if ((topoJsonDataObjects_1 === null || topoJsonDataObjects_1 === void 0 ? void 0 : topoJsonDataObjects_1[key].type) === 'GeometryCollection') {
+                                        (_a = topoJsonDataObjects_1 === null || topoJsonDataObjects_1 === void 0 ? void 0 : topoJsonDataObjects_1[key].geometries) === null || _a === void 0 ? void 0 : _a.forEach(function (e) { return (e.properties = __assign({ fromObject: key }, e.properties)); });
                                     }
-                                    else if (((_d = topoJsonData === null || topoJsonData === void 0 ? void 0 : topoJsonData.objects) === null || _d === void 0 ? void 0 : _d[key]) &&
-                                        ((_f = (_e = topoJsonData === null || topoJsonData === void 0 ? void 0 : topoJsonData.objects) === null || _e === void 0 ? void 0 : _e[key]) === null || _f === void 0 ? void 0 : _f.type) !== 'GeometryCollection') {
-                                        topoJsonData.objects[key].properties = __assign({ fromObject: key }, (_g = topoJsonData.objects) === null || _g === void 0 ? void 0 : _g[key].properties);
+                                    else if ((topoJsonDataObjects_1 === null || topoJsonDataObjects_1 === void 0 ? void 0 : topoJsonDataObjects_1[key]) &&
+                                        ((_b = topoJsonDataObjects_1 === null || topoJsonDataObjects_1 === void 0 ? void 0 : topoJsonDataObjects_1[key]) === null || _b === void 0 ? void 0 : _b.type) !== 'GeometryCollection') {
+                                        topoJsonDataObjects_1[key].properties = __assign({ fromObject: key }, topoJsonDataObjects_1 === null || topoJsonDataObjects_1 === void 0 ? void 0 : topoJsonDataObjects_1[key].properties);
                                     }
                                 });
                                 //convert the data into a geoJson object
@@ -7680,7 +7687,6 @@ function convertXML(params) {
         });
     });
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var XMLProtocolHandler = function (params) { return __awaiter(void 0, void 0, void 0, function () {
     var parsedParams, data;
     return __generator(this, function (_a) {