@mapcomponents/react-maplibre 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.cjs +1 -0
- package/dist/index.cjs.js +51 -12
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +51 -12
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/.eslintrc.cjs
CHANGED
package/dist/index.cjs.js
CHANGED
|
@@ -2434,15 +2434,6 @@ function useLayer(props) {
|
|
|
2434
2434
|
console.error('Failed to add layer:', error);
|
|
2435
2435
|
}
|
|
2436
2436
|
setLayer(function () { var _a; return (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current); });
|
|
2437
|
-
if (typeof props.onHover !== 'undefined') {
|
|
2438
|
-
mapHook.map.on('mousemove', layerId.current, props.onHover, mapHook.componentId);
|
|
2439
|
-
}
|
|
2440
|
-
if (typeof props.onClick !== 'undefined') {
|
|
2441
|
-
mapHook.map.on('click', layerId.current, props.onClick, mapHook.componentId);
|
|
2442
|
-
}
|
|
2443
|
-
if (typeof props.onLeave !== 'undefined') {
|
|
2444
|
-
mapHook.map.on('mouseleave', layerId.current, props.onLeave, mapHook.componentId);
|
|
2445
|
-
}
|
|
2446
2437
|
// recreate layer if style has changed
|
|
2447
2438
|
var styledataEventHandler = function () {
|
|
2448
2439
|
var _a;
|
|
@@ -2563,6 +2554,48 @@ function useLayer(props) {
|
|
|
2563
2554
|
}
|
|
2564
2555
|
};
|
|
2565
2556
|
}, [mapHook.map, (_a = props.options) === null || _a === void 0 ? void 0 : _a.source]);
|
|
2557
|
+
// Reload onClick-handlers when they change
|
|
2558
|
+
React.useEffect(function () {
|
|
2559
|
+
var _a, _b, _c;
|
|
2560
|
+
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)))
|
|
2561
|
+
return;
|
|
2562
|
+
var onClickHandler = props.onClick;
|
|
2563
|
+
(_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.on('click', layerId.current, onClickHandler);
|
|
2564
|
+
return function () {
|
|
2565
|
+
var _a;
|
|
2566
|
+
if (onClickHandler && (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map)) {
|
|
2567
|
+
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.off('click', layerId.current, onClickHandler);
|
|
2568
|
+
}
|
|
2569
|
+
};
|
|
2570
|
+
}, [mapHook.map, props.onClick]);
|
|
2571
|
+
// Reload onHover-handlers when they change
|
|
2572
|
+
React.useEffect(function () {
|
|
2573
|
+
var _a, _b, _c;
|
|
2574
|
+
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)))
|
|
2575
|
+
return;
|
|
2576
|
+
var onHoverHandler = props.onHover;
|
|
2577
|
+
(_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.on('mousemove', layerId.current, onHoverHandler);
|
|
2578
|
+
return function () {
|
|
2579
|
+
var _a;
|
|
2580
|
+
if (onHoverHandler && (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map)) {
|
|
2581
|
+
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.off('mousemove', layerId.current, onHoverHandler);
|
|
2582
|
+
}
|
|
2583
|
+
};
|
|
2584
|
+
}, [mapHook.map, props.onHover]);
|
|
2585
|
+
// Reload onLeave-handlers when they change
|
|
2586
|
+
React.useEffect(function () {
|
|
2587
|
+
var _a, _b, _c;
|
|
2588
|
+
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)))
|
|
2589
|
+
return;
|
|
2590
|
+
var onLeaveHandler = props.onLeave;
|
|
2591
|
+
(_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.on('mouseleave', layerId.current, onLeaveHandler);
|
|
2592
|
+
return function () {
|
|
2593
|
+
var _a;
|
|
2594
|
+
if (onLeaveHandler && (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map)) {
|
|
2595
|
+
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.off('mouseleave', layerId.current, onLeaveHandler);
|
|
2596
|
+
}
|
|
2597
|
+
};
|
|
2598
|
+
}, [mapHook.map, props.onLeave]);
|
|
2566
2599
|
return {
|
|
2567
2600
|
map: mapHook.map,
|
|
2568
2601
|
layer: layer,
|
|
@@ -2755,7 +2788,7 @@ function useSource(props) {
|
|
|
2755
2788
|
* @component
|
|
2756
2789
|
*/
|
|
2757
2790
|
var MlGeoJsonLayer = function (props) {
|
|
2758
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2791
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2759
2792
|
var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
|
|
2760
2793
|
var layerId = React.useRef(props.layerId || 'MlGeoJsonLayer-' + uuid.v4());
|
|
2761
2794
|
var labelLayerId = "label-".concat(layerId.current);
|
|
@@ -2778,7 +2811,10 @@ var MlGeoJsonLayer = function (props) {
|
|
|
2778
2811
|
useLayer({
|
|
2779
2812
|
mapId: props.mapId,
|
|
2780
2813
|
layerId: layerId.current,
|
|
2781
|
-
options: __assign(__assign({
|
|
2814
|
+
options: __assign(__assign({}, (typeof ((_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.source) !== 'undefined' &&
|
|
2815
|
+
typeof ((_d = props === null || props === void 0 ? void 0 : props.options) === null || _d === void 0 ? void 0 : _d.source) === 'string'
|
|
2816
|
+
? { source: props.options.source }
|
|
2817
|
+
: { 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 }),
|
|
2782
2818
|
insertBeforeLayer: props.insertBeforeLayer,
|
|
2783
2819
|
onHover: props.onHover,
|
|
2784
2820
|
onClick: props.onClick,
|
|
@@ -2788,7 +2824,10 @@ var MlGeoJsonLayer = function (props) {
|
|
|
2788
2824
|
// Using it with geojson and options.source undefined will cause it to return without creating a layer.
|
|
2789
2825
|
useLayer({
|
|
2790
2826
|
mapId: props.mapId,
|
|
2791
|
-
options: __assign(__assign(__assign(
|
|
2827
|
+
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' &&
|
|
2828
|
+
typeof ((_h = props === null || props === void 0 ? void 0 : props.options) === null || _h === void 0 ? void 0 : _h.source) === 'string'
|
|
2829
|
+
? { source: props.options.source }
|
|
2830
|
+
: { 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 : {})) }),
|
|
2792
2831
|
});
|
|
2793
2832
|
return React.createElement(React.Fragment, null);
|
|
2794
2833
|
};
|