@mapcomponents/react-maplibre 1.0.5 → 1.0.7

package/.eslintrc.cjs

@@ -3,6 +3,7 @@ module.exports = {
 		browser: true,
 		node: true,
 		es2021: true,
+		jest: true,
 	},
 	extends: [
         "eslint:recommended",

package/CHANGELOG.md

@@ -1,10 +1,23 @@
 # Change Log
 
+## [v1.0.7] - 2024-07-30
+
+### Changed
+- a6bc647: Upgrade to maplibre-gl 4.5  (sky enabled) (#178)
+
+### Fixed
+- dde2ef4: fix: incorrect property access (#181) …
+
+## [v1.0.6] - 2024-07-30
+
+### Fixed
+- 209ec04: Fix/use layerhook update on functions
 
 ## [v1.0.5] - 2024-06-21
 
 ### Changed
 - 78f7106: client search component MlClientSearch removed from release…
+
 ### Fixed
 - 78f7106: MlGeojsonlayer options.source bug
 

package/dist/index.cjs.js

@@ -2434,15 +2434,6 @@ function useLayer(props) {
             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;
@@ -2563,6 +2554,48 @@ function useLayer(props) {
             }
         };
     }, [mapHook.map, (_a = props.options) === null || _a === void 0 ? void 0 : _a.source]);
+    // Reload onClick-handlers when they change
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (!props.onClick || !(mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) || !((_b = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.getLayer) === null || _b === void 0 ? void 0 : _b.call(_a, layerId.current)))
+            return;
+        var onClickHandler = props.onClick;
+        (_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.on('click', layerId.current, onClickHandler);
+        return function () {
+            var _a;
+            if (onClickHandler && (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map)) {
+                (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.off('click', layerId.current, onClickHandler);
+            }
+        };
+    }, [mapHook.map, props.onClick]);
+    // Reload onHover-handlers when they change
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (!props.onHover || !(mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) || !((_b = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.getLayer) === null || _b === void 0 ? void 0 : _b.call(_a, layerId.current)))
+            return;
+        var onHoverHandler = props.onHover;
+        (_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.on('mousemove', layerId.current, onHoverHandler);
+        return function () {
+            var _a;
+            if (onHoverHandler && (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map)) {
+                (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.off('mousemove', layerId.current, onHoverHandler);
+            }
+        };
+    }, [mapHook.map, props.onHover]);
+    // Reload onLeave-handlers when they change
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (!props.onLeave || !(mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) || !((_b = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.getLayer) === null || _b === void 0 ? void 0 : _b.call(_a, layerId.current)))
+            return;
+        var onLeaveHandler = props.onLeave;
+        (_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.on('mouseleave', layerId.current, onLeaveHandler);
+        return function () {
+            var _a;
+            if (onLeaveHandler && (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map)) {
+                (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.off('mouseleave', layerId.current, onLeaveHandler);
+            }
+        };
+    }, [mapHook.map, props.onLeave]);
     return {
         map: mapHook.map,
         layer: layer,
@@ -2679,7 +2712,7 @@ function useSource(props) {
     var removeSource = React.useCallback(function () {
         var _a, _b;
         if (mapHook.map && ((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b._layers)) {
-            for (var _i = 0, _c = Object.entries(mapHook.map.map.style._layers); _i < _c.length; _i++) {
+            for (var _i = 0, _c = Object.entries(mapHook.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);
@@ -2755,7 +2788,7 @@ function useSource(props) {
  * @component
  */
 var MlGeoJsonLayer = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
     var layerId = React.useRef(props.layerId || 'MlGeoJsonLayer-' + uuid.v4());
     var labelLayerId = "label-".concat(layerId.current);
@@ -2778,7 +2811,10 @@ var MlGeoJsonLayer = function (props) {
     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 }),
+        options: __assign(__assign({}, (typeof ((_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.source) !== 'undefined' &&
+            typeof ((_d = props === null || props === void 0 ? void 0 : props.options) === null || _d === void 0 ? void 0 : _d.source) === 'string'
+            ? { source: props.options.source }
+            : { source: 'source-' + layerId.current })), { paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_e = props === null || props === void 0 ? void 0 : props.options) === null || _e === void 0 ? void 0 : _e.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_f = props === null || props === void 0 ? void 0 : props.options) === null || _f === void 0 ? void 0 : _f.layout), type: layerType }),
         insertBeforeLayer: props.insertBeforeLayer,
         onHover: props.onHover,
         onClick: props.onClick,
@@ -2788,7 +2824,10 @@ var MlGeoJsonLayer = function (props) {
     // 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 : {})) }),
+        options: __assign(__assign(__assign(__assign(__assign({}, (typeof ((_g = props === null || props === void 0 ? void 0 : props.options) === null || _g === void 0 ? void 0 : _g.source) !== 'undefined' &&
+            typeof ((_h = props === null || props === void 0 ? void 0 : props.options) === null || _h === void 0 ? void 0 : _h.source) === 'string'
+            ? { source: props.options.source }
+            : { source: 'source-' + layerId.current })), { id: labelLayerId, type: 'symbol', maxzoom: 24, minzoom: 1 }), ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), (((_j = props === null || props === void 0 ? void 0 : props.options) === null || _j === void 0 ? void 0 : _j.filter) ? { filter: props.options.filter } : {})), { layout: __assign(__assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}"), 'text-size': 12, 'text-anchor': 'top' }, (((_k = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _k === void 0 ? void 0 : _k.layout) ? props.labelOptions.layout : {})), (((_l = props === null || props === void 0 ? void 0 : props.layout) === null || _l === void 0 ? void 0 : _l.visibility) ? { visibility: props.layout.visibility } : {})), paint: __assign({ 'text-halo-width': 1, 'text-halo-color': '#fefefe', 'text-color': '#121212' }, (((_m = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _m === void 0 ? void 0 : _m.paint) ? props.labelOptions.paint : {})) }),
     });
     return React.createElement(React.Fragment, null);
 };