@orioro/react-maplibre-util 0.5.3 → 0.7.0
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/CHANGELOG.md +21 -0
- package/dist/DynamicImages/index.d.ts +3 -0
- package/dist/DynamicImages/svgImages/iconPathToSvg.d.ts +9 -0
- package/dist/DynamicImages/svgImages/index.d.ts +7 -28
- package/dist/DynamicImages/svgImages/svgToMaplibreImage.d.ts +16 -0
- package/dist/DynamicImages/svgPatterns/index.d.ts +8 -0
- package/dist/LayeredMap/layeredMapOnClickHandler.d.ts +3 -2
- package/dist/SyncedMaps/index.d.ts +2 -0
- package/dist/SyncedMaps/useMapRegistry.d.ts +7 -0
- package/dist/SyncedMaps/useTilesLoading.d.ts +2 -0
- package/dist/index.mjs +335 -51
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @orioro/react-maplibre-util
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- expose SyncedMaps mouse event handlers and add svgImages to GeoReDUS
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- @orioro/react-chart-util@0.3.0
|
|
12
|
+
|
|
13
|
+
## 0.6.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- update all dependencies and multiple internal deps
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
- @orioro/react-chart-util@0.3.0
|
|
23
|
+
|
|
3
24
|
## 0.5.3
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type IconPathToSvgOptions = {
|
|
2
|
+
size?: number;
|
|
3
|
+
fill?: string;
|
|
4
|
+
stroke?: string;
|
|
5
|
+
strokeWidth?: string | number;
|
|
6
|
+
viewBox?: string;
|
|
7
|
+
style?: string;
|
|
8
|
+
};
|
|
9
|
+
export declare function iconPathToSvg(path: string, { size, fill, stroke, strokeWidth, viewBox, style, }?: IconPathToSvgOptions): string;
|
|
@@ -1,30 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
strokeWidth?: string | number;
|
|
7
|
-
viewBox?: string;
|
|
8
|
-
style?: string;
|
|
9
|
-
};
|
|
10
|
-
export declare function iconPathToSvg(path: string, { size, fill, stroke, strokeWidth, viewBox, style, }?: IconPathToSvgOptions): string;
|
|
11
|
-
/**
|
|
12
|
-
* Renders an SVG string onto a canvas and returns an object compatible with maplibre `addImage`.
|
|
13
|
-
*
|
|
14
|
-
* @param svgString - The SVG markup as a string
|
|
15
|
-
* @param pixelRatio - (Optional) device pixel ratio, defaults to window.devicePixelRatio
|
|
16
|
-
* @returns Promise resolving to { width, height, data, pixelRatio }
|
|
17
|
-
*/
|
|
18
|
-
export declare function svgToMaplibreImage(svgString: string, pixelRatio?: number): Promise<[
|
|
19
|
-
{
|
|
20
|
-
width: number;
|
|
21
|
-
height: number;
|
|
22
|
-
data: Uint8ClampedArray;
|
|
23
|
-
},
|
|
24
|
-
Partial<StyleImageMetadata>
|
|
25
|
-
]>;
|
|
26
|
-
export declare function svgIconId(iconId: string, options?: IconPathToSvgOptions): string;
|
|
27
|
-
type SvgIconGeneratorReturn<T extends Record<string, string>> = {
|
|
1
|
+
import { type IconPathToSvgOptions } from './iconPathToSvg';
|
|
2
|
+
import type { StyleImageMetadata } from 'maplibre-gl';
|
|
3
|
+
export declare function svgImageId(imageId: string, options?: IconPathToSvgOptions): string;
|
|
4
|
+
type SvgIconSpecsById = Record<string, string | ((options: Record<string, any>) => string)>;
|
|
5
|
+
type SvgIconGeneratorReturn<T extends SvgIconSpecsById> = {
|
|
28
6
|
(imageId: string): Promise<[
|
|
29
7
|
{
|
|
30
8
|
width: number;
|
|
@@ -36,5 +14,6 @@ type SvgIconGeneratorReturn<T extends Record<string, string>> = {
|
|
|
36
14
|
} & {
|
|
37
15
|
[K in keyof T]: (options?: IconPathToSvgOptions) => string;
|
|
38
16
|
};
|
|
39
|
-
export declare function
|
|
17
|
+
export declare function svgImageGenerator<T extends SvgIconSpecsById>(svgImageSpecsById: T): SvgIconGeneratorReturn<T>;
|
|
18
|
+
export declare function svgIconGenerator(...args: any[]): SvgIconGeneratorReturn<any>;
|
|
40
19
|
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { StyleImageMetadata } from 'maplibre-gl';
|
|
2
|
+
/**
|
|
3
|
+
* Renders an SVG string onto a canvas and returns an object compatible with maplibre `addImage`.
|
|
4
|
+
*
|
|
5
|
+
* @param svgString - The SVG markup as a string
|
|
6
|
+
* @param pixelRatio - (Optional) device pixel ratio, defaults to window.devicePixelRatio
|
|
7
|
+
* @returns Promise resolving to { width, height, data, pixelRatio }
|
|
8
|
+
*/
|
|
9
|
+
export declare function svgToMaplibreImage(svgString: string, inputPixelRatio?: number): Promise<[
|
|
10
|
+
{
|
|
11
|
+
width: number;
|
|
12
|
+
height: number;
|
|
13
|
+
data: Uint8ClampedArray;
|
|
14
|
+
},
|
|
15
|
+
Partial<StyleImageMetadata>
|
|
16
|
+
]>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const squares_1: (data: Record<string, any>) => string;
|
|
2
|
+
export declare const triangles_1: (data: Record<string, any>) => string;
|
|
3
|
+
export declare const diamonds_1: (data: Record<string, any>) => string;
|
|
4
|
+
export declare const cross_1: (data: Record<string, any>) => string;
|
|
5
|
+
export declare const mosaic_1: (data: Record<string, any>) => string;
|
|
6
|
+
export declare const waves_1: (data: Record<string, any>) => string;
|
|
7
|
+
export declare const circles_1: (data: Record<string, any>) => string;
|
|
8
|
+
export declare const lines_1: (data: Record<string, any>) => string;
|
|
@@ -3,7 +3,7 @@ import { Merge } from 'type-fest';
|
|
|
3
3
|
type ClickableFeature = Merge<MapGeoJSONFeature, {
|
|
4
4
|
layer: {
|
|
5
5
|
id: string;
|
|
6
|
-
onClick: (feature: MapGeoJSONFeature, event: AugmentedMouseEvent) => any;
|
|
6
|
+
onClick: (feature: MapGeoJSONFeature, event: AugmentedMouseEvent, context: Record<string, any>) => any;
|
|
7
7
|
};
|
|
8
8
|
}>;
|
|
9
9
|
type AugmentedMouseEvent = Merge<MapMouseEvent, {
|
|
@@ -11,6 +11,7 @@ type AugmentedMouseEvent = Merge<MapMouseEvent, {
|
|
|
11
11
|
}>;
|
|
12
12
|
type LayeredMapOnClickHandlerProps = {
|
|
13
13
|
resolveTargetFeature?: (features: AugmentedMouseEvent['features'], event: AugmentedMouseEvent) => ClickableFeature | Promise<ClickableFeature>;
|
|
14
|
+
context?: Record<string, any>;
|
|
14
15
|
};
|
|
15
|
-
export declare function layeredMapOnClickHandler({ resolveTargetFeature, }?: LayeredMapOnClickHandlerProps): (e: AugmentedMouseEvent) => Promise<void>;
|
|
16
|
+
export declare function layeredMapOnClickHandler({ resolveTargetFeature, context, }?: LayeredMapOnClickHandlerProps): (e: AugmentedMouseEvent) => Promise<void>;
|
|
16
17
|
export {};
|
package/dist/index.mjs
CHANGED
|
@@ -6,19 +6,27 @@ import { Flex, useRefByKey, useLocalState, DropdownMenu } from '@orioro/react-ui
|
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
import { usePrevious } from 'react-use';
|
|
8
8
|
import { mergeRefs } from 'react-merge-refs';
|
|
9
|
-
import {
|
|
9
|
+
import { mdiCloseCircleOutline, mdiCheck, mdiTerrain, mdiVideo3d } from '@mdi/js';
|
|
10
|
+
import { interpolate, strExpr } from '@orioro/util';
|
|
10
11
|
import { ckmeans } from 'simple-statistics';
|
|
11
12
|
import { schemeYlOrRd } from 'd3-scale-chromatic';
|
|
12
13
|
import { maxIndex, range, variance, sum } from 'd3';
|
|
13
14
|
import { bbox } from '@turf/turf';
|
|
14
15
|
import { createPortal } from 'react-dom';
|
|
15
|
-
import { mdiCheck, mdiTerrain, mdiVideo3d } from '@mdi/js';
|
|
16
16
|
import { Icon } from '@mdi/react';
|
|
17
17
|
import { Tooltip } from '@radix-ui/themes';
|
|
18
18
|
import maplibregl from 'maplibre-gl';
|
|
19
19
|
import mlcontour from 'maplibre-contour';
|
|
20
20
|
import MaplibreInspect from '@maplibre/maplibre-gl-inspect';
|
|
21
21
|
|
|
22
|
+
function _validZIndex(zIndex) {
|
|
23
|
+
return typeof zIndex === 'number' && !Number.isNaN(zIndex);
|
|
24
|
+
}
|
|
25
|
+
// Return 1 makes layerB come first in array order
|
|
26
|
+
// and layerA later, so it will be
|
|
27
|
+
// rendered on top of layerB
|
|
28
|
+
var LAYER_A_ON_TOP_OF_B = 1;
|
|
29
|
+
var LAYER_B_ON_TOP_OF_A = -1;
|
|
22
30
|
function sortLayers(layers, _a) {
|
|
23
31
|
var existingLayers = _a.existingLayers;
|
|
24
32
|
var existingLayersById = existingLayers ? Object.fromEntries(existingLayers.map(function (layer) {
|
|
@@ -31,7 +39,27 @@ function sortLayers(layers, _a) {
|
|
|
31
39
|
// - Later in the list → Rendered on top (higher z-index).
|
|
32
40
|
// - Earlier in the list → Rendered below.
|
|
33
41
|
//
|
|
34
|
-
return layers
|
|
42
|
+
return layers
|
|
43
|
+
//
|
|
44
|
+
// PREVIOUS SORT:
|
|
45
|
+
// .map((layer, index) => ({
|
|
46
|
+
// ...layer,
|
|
47
|
+
// //
|
|
48
|
+
// // Allow for zIndex overriding
|
|
49
|
+
// // In case no zIndex is set, respect the order in which
|
|
50
|
+
// // layers were provided.
|
|
51
|
+
// //
|
|
52
|
+
// // Layers that come after are rendered on top of previous layers
|
|
53
|
+
// //
|
|
54
|
+
// zIndex: typeof layer.zIndex === 'number' ? layer.zIndex : index,
|
|
55
|
+
// }))
|
|
56
|
+
// //
|
|
57
|
+
// // Order layers in ascending zIndex order, so that
|
|
58
|
+
// // layers with higher zIndex are rendered later and on top of
|
|
59
|
+
// // previous ones
|
|
60
|
+
// //
|
|
61
|
+
// .sort((layerA, layerB) => (layerA.zIndex >= layerB.zIndex ? 1 : -1))
|
|
62
|
+
.map(function (layer, index) {
|
|
35
63
|
return __assign(__assign({}, layer), {
|
|
36
64
|
//
|
|
37
65
|
// Allow for zIndex overriding
|
|
@@ -40,7 +68,8 @@ function sortLayers(layers, _a) {
|
|
|
40
68
|
//
|
|
41
69
|
// Layers that come after are rendered on top of previous layers
|
|
42
70
|
//
|
|
43
|
-
|
|
71
|
+
_inputOrderIndex: index,
|
|
72
|
+
zIndex: typeof layer.zIndex === 'number' ? layer.zIndex : null
|
|
44
73
|
});
|
|
45
74
|
})
|
|
46
75
|
//
|
|
@@ -48,9 +77,38 @@ function sortLayers(layers, _a) {
|
|
|
48
77
|
// layers with higher zIndex are rendered later and on top of
|
|
49
78
|
// previous ones
|
|
50
79
|
//
|
|
80
|
+
// Layers without zIndex are always rendered beneath
|
|
81
|
+
// those with zIndex
|
|
82
|
+
//
|
|
83
|
+
// Layers with the same zIndex are compared using _inputOrderIndex
|
|
84
|
+
//
|
|
51
85
|
.sort(function (layerA, layerB) {
|
|
52
|
-
|
|
53
|
-
|
|
86
|
+
var aValid = _validZIndex(layerA.zIndex);
|
|
87
|
+
var bValid = _validZIndex(layerB.zIndex);
|
|
88
|
+
var aZIndex = layerA.zIndex;
|
|
89
|
+
var bZIndex = layerB.zIndex;
|
|
90
|
+
if (aValid && !bValid) {
|
|
91
|
+
return LAYER_A_ON_TOP_OF_B;
|
|
92
|
+
} else if (!aValid && bValid) {
|
|
93
|
+
return LAYER_B_ON_TOP_OF_A;
|
|
94
|
+
} else if (!aValid && !bValid || aZIndex === bZIndex) {
|
|
95
|
+
return layerA._inputOrderIndex >= layerB._inputOrderIndex ? LAYER_A_ON_TOP_OF_B : LAYER_B_ON_TOP_OF_A;
|
|
96
|
+
} else {
|
|
97
|
+
return aZIndex > bZIndex ? LAYER_A_ON_TOP_OF_B : LAYER_B_ON_TOP_OF_A;
|
|
98
|
+
}
|
|
99
|
+
})
|
|
100
|
+
//
|
|
101
|
+
// This was a strategy to use beforeId to
|
|
102
|
+
// sync map order. We've faced some pitfalls:
|
|
103
|
+
// - Some layers do not exist when multiple layers
|
|
104
|
+
// are created at once, thus maplibre fails to
|
|
105
|
+
// apply beforeId (and throws errors)
|
|
106
|
+
// - There are issues related to layer dynamic ordering,
|
|
107
|
+
// see: https://github.com/visgl/react-map-gl/issues/939#issuecomment-1515395161
|
|
108
|
+
// - We've opted for manually syncing layer orders when
|
|
109
|
+
// layers update
|
|
110
|
+
//
|
|
111
|
+
.map(function (layer, index, sortedLayers) {
|
|
54
112
|
if (index === sortedLayers.length - 1) {
|
|
55
113
|
// is last layer
|
|
56
114
|
return __assign(__assign({}, layer), {
|
|
@@ -211,7 +269,11 @@ function syncLayerOrder(_a) {
|
|
|
211
269
|
if (!map.getLayer(beneathLayerId)) {
|
|
212
270
|
return;
|
|
213
271
|
}
|
|
214
|
-
|
|
272
|
+
try {
|
|
273
|
+
map.moveLayer(layerId, beneathLayerId);
|
|
274
|
+
} catch (err) {
|
|
275
|
+
console.warn("failed to move ".concat(layerId, " beneath ").concat(beneathLayerId));
|
|
276
|
+
}
|
|
215
277
|
}
|
|
216
278
|
});
|
|
217
279
|
}
|
|
@@ -291,7 +353,7 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
|
|
|
291
353
|
return;
|
|
292
354
|
}
|
|
293
355
|
// Timeout ensures layers are added to map before moving
|
|
294
|
-
setTimeout(function () {
|
|
356
|
+
var timeoutId = setTimeout(function () {
|
|
295
357
|
var expectedLayerOrderId = parsed.layers.map(function (layer) {
|
|
296
358
|
return layer.id;
|
|
297
359
|
});
|
|
@@ -300,6 +362,9 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
|
|
|
300
362
|
map: mapRef.current
|
|
301
363
|
});
|
|
302
364
|
}, 0);
|
|
365
|
+
return function () {
|
|
366
|
+
clearTimeout(timeoutId);
|
|
367
|
+
};
|
|
303
368
|
}, [parsed === null || parsed === void 0 ? void 0 : parsed.layers]);
|
|
304
369
|
return /*#__PURE__*/React.createElement(Map, __assign({
|
|
305
370
|
ref: mapRef,
|
|
@@ -330,7 +395,9 @@ function selectFirstClickableFeature(features) {
|
|
|
330
395
|
function layeredMapOnClickHandler(_a) {
|
|
331
396
|
var _b = _a === void 0 ? {} : _a,
|
|
332
397
|
_c = _b.resolveTargetFeature,
|
|
333
|
-
resolveTargetFeature = _c === void 0 ? selectFirstClickableFeature : _c
|
|
398
|
+
resolveTargetFeature = _c === void 0 ? selectFirstClickableFeature : _c,
|
|
399
|
+
_d = _b.context,
|
|
400
|
+
context = _d === void 0 ? {} : _d;
|
|
334
401
|
return function onClick(e) {
|
|
335
402
|
return __awaiter(this, void 0, void 0, function () {
|
|
336
403
|
var features, clickableFeatures, targetFeature, _a;
|
|
@@ -353,7 +420,7 @@ function layeredMapOnClickHandler(_a) {
|
|
|
353
420
|
_b.label = 3;
|
|
354
421
|
case 3:
|
|
355
422
|
targetFeature = _a;
|
|
356
|
-
targetFeature.layer.onClick(targetFeature, e);
|
|
423
|
+
targetFeature.layer.onClick(targetFeature, e, context);
|
|
357
424
|
_b.label = 4;
|
|
358
425
|
case 4:
|
|
359
426
|
return [2 /*return*/];
|
|
@@ -367,6 +434,9 @@ var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTem
|
|
|
367
434
|
var DataSectionHeading = styled.h3(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0;\n line-height: 1.2;\n font-size: 1rem;\n"], ["\n margin: 0;\n line-height: 1.2;\n font-size: 1rem;\n"])));
|
|
368
435
|
var DataSectionContainer = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 15px 10px;\n"], ["\n padding: 15px 10px;\n"])));
|
|
369
436
|
var EntriesList = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n list-style: none;\n margin-top: 0;\n margin-bottom: 0;\n > li + li {\n margin-top: 4px;\n }\n"], ["\n padding: 0;\n list-style: none;\n margin-top: 0;\n margin-bottom: 0;\n > li + li {\n margin-top: 4px;\n }\n"])));
|
|
437
|
+
function _notEmpty(value) {
|
|
438
|
+
return typeof value !== 'undefined' && value !== null && value !== '';
|
|
439
|
+
}
|
|
370
440
|
function DataSection(_a) {
|
|
371
441
|
var title = _a.title,
|
|
372
442
|
entries = _a.entries,
|
|
@@ -374,12 +444,12 @@ function DataSection(_a) {
|
|
|
374
444
|
return Array.isArray(entries) && entries.length > 0 && (/*#__PURE__*/React.createElement(DataSectionContainer, __assign({
|
|
375
445
|
direction: "column",
|
|
376
446
|
gap: "10px"
|
|
377
|
-
}, props), title && /*#__PURE__*/React.createElement(DataSectionHeading, null, title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EntriesList, null, entries.map(function (_a, index) {
|
|
447
|
+
}, props), title && /*#__PURE__*/React.createElement(DataSectionHeading, null, title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EntriesList, null, entries.filter(Boolean).map(function (_a, index) {
|
|
378
448
|
var label = _a[0],
|
|
379
449
|
value = _a[1];
|
|
380
450
|
return /*#__PURE__*/React.createElement("li", {
|
|
381
451
|
key: index
|
|
382
|
-
}, typeof label === 'string' ? /*#__PURE__*/React.createElement("span", null, label
|
|
452
|
+
}, typeof label === 'string' ? (/*#__PURE__*/React.createElement("span", null, "".concat(label).concat(_notEmpty(value) ? ': ' : ''))) : label, typeof value === 'string' ? (/*#__PURE__*/React.createElement("span", {
|
|
383
453
|
style: {
|
|
384
454
|
fontWeight: 'bold'
|
|
385
455
|
}
|
|
@@ -842,26 +912,35 @@ function makeSyncedMaps(_a) {
|
|
|
842
912
|
var _c = useState(initialViewState),
|
|
843
913
|
viewState = _c[0],
|
|
844
914
|
setViewState = _c[1];
|
|
845
|
-
var
|
|
846
|
-
|
|
847
|
-
|
|
915
|
+
var syncedOnMove = useCallback(function (evt) {
|
|
916
|
+
setViewState(evt.viewState);
|
|
917
|
+
if (typeof baseMapProps.onMove === 'function') {
|
|
918
|
+
baseMapProps.onMove(evt);
|
|
919
|
+
}
|
|
920
|
+
}, [baseMapProps.onMove]);
|
|
848
921
|
var _d = useState(false),
|
|
849
922
|
isDragging = _d[0],
|
|
850
923
|
setIsDragging = _d[1];
|
|
851
|
-
var
|
|
852
|
-
|
|
853
|
-
|
|
924
|
+
var syncedOnDragEnd = useCallback(function (e) {
|
|
925
|
+
setIsDragging(false);
|
|
926
|
+
if (typeof baseMapProps.onDragEnd === 'function') {
|
|
927
|
+
baseMapProps.onDragEnd(e);
|
|
928
|
+
}
|
|
929
|
+
}, [setIsDragging, baseMapProps.onDragEnd]);
|
|
854
930
|
var _e = useState(null),
|
|
855
931
|
hoverInfo = _e[0],
|
|
856
932
|
setHoverInfo = _e[1];
|
|
857
933
|
var _f = useState(null),
|
|
858
934
|
tooltips = _f[0],
|
|
859
935
|
setTooltips = _f[1];
|
|
860
|
-
var
|
|
936
|
+
var syncedOnDragStart = useCallback(function (e) {
|
|
861
937
|
setIsDragging(true);
|
|
862
938
|
setTooltips(null);
|
|
863
|
-
|
|
864
|
-
|
|
939
|
+
if (typeof baseMapProps.onDragStart === 'function') {
|
|
940
|
+
baseMapProps.onDragStart(e);
|
|
941
|
+
}
|
|
942
|
+
}, [baseMapProps.onDragStart]);
|
|
943
|
+
var syncedOnMouseMove = useCallback(function (event, index) {
|
|
865
944
|
var nextHoverInfo = parseHoverInfo(index, event);
|
|
866
945
|
setHoverInfo(function (prevHoverInfo) {
|
|
867
946
|
mapSetFeaturesState(event.target, prevHoverInfo === null || prevHoverInfo === void 0 ? void 0 : prevHoverInfo.features, {
|
|
@@ -880,7 +959,13 @@ function makeSyncedMaps(_a) {
|
|
|
880
959
|
}
|
|
881
960
|
return getTooltip(nextHoverInfo, mapInstanceRefs[index]) || null;
|
|
882
961
|
}) : null);
|
|
883
|
-
|
|
962
|
+
if (typeof baseMapProps.onMouseMove === 'function') {
|
|
963
|
+
//
|
|
964
|
+
// Allow onMouseMove to be composed with base
|
|
965
|
+
//
|
|
966
|
+
baseMapProps.onMouseMove(event);
|
|
967
|
+
}
|
|
968
|
+
}, [maps, baseMapProps.onMouseMove]);
|
|
884
969
|
//
|
|
885
970
|
// There is no notion of mouseenter/mouseleave
|
|
886
971
|
// in maplibre.gl.
|
|
@@ -890,7 +975,7 @@ function makeSyncedMaps(_a) {
|
|
|
890
975
|
// https://github.com/mapbox/mapbox-gl-js/issues/10594
|
|
891
976
|
// https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
|
|
892
977
|
//
|
|
893
|
-
var
|
|
978
|
+
var syncedOnMouseOut = useCallback(function (event) {
|
|
894
979
|
setHoverInfo(null);
|
|
895
980
|
setTooltips(null);
|
|
896
981
|
if (Array.isArray(hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features)) {
|
|
@@ -898,7 +983,10 @@ function makeSyncedMaps(_a) {
|
|
|
898
983
|
hover: false
|
|
899
984
|
});
|
|
900
985
|
}
|
|
901
|
-
|
|
986
|
+
if (typeof baseMapProps.onMouseOut === 'function') {
|
|
987
|
+
baseMapProps.onMouseOut(event);
|
|
988
|
+
}
|
|
989
|
+
}, [setHoverInfo, setTooltips, hoverInfo, baseMapProps.onMouseOut]);
|
|
902
990
|
//
|
|
903
991
|
// Expose map instances
|
|
904
992
|
//
|
|
@@ -907,6 +995,14 @@ function makeSyncedMaps(_a) {
|
|
|
907
995
|
mapInstances: mapInstanceRefs
|
|
908
996
|
};
|
|
909
997
|
}, [mapInstanceRefs]);
|
|
998
|
+
// Let's review, this might have performance impact
|
|
999
|
+
var cursor = useMemo(function () {
|
|
1000
|
+
var _a;
|
|
1001
|
+
return isDragging ? 'grabbing' : (((_a = hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 ? hoverInfo.features.some(function (feat) {
|
|
1002
|
+
var _a;
|
|
1003
|
+
return typeof ((_a = feat.layer) === null || _a === void 0 ? void 0 : _a.onClick) === 'function';
|
|
1004
|
+
}) ? 'pointer' : 'default' : 'default';
|
|
1005
|
+
}, [isDragging, hoverInfo]);
|
|
910
1006
|
return /*#__PURE__*/React.createElement(Flex, {
|
|
911
1007
|
ref: containerRef,
|
|
912
1008
|
direction: "row",
|
|
@@ -932,7 +1028,9 @@ function makeSyncedMaps(_a) {
|
|
|
932
1028
|
}
|
|
933
1029
|
})) : null, Array.isArray(tooltips) && tooltips[index], /*#__PURE__*/React.createElement(MapComponent, __assign({
|
|
934
1030
|
ref: setMapInstanceRef(index),
|
|
935
|
-
cursor
|
|
1031
|
+
// cursor={isDragging ? 'grabbing' : 'default'}
|
|
1032
|
+
// Let's review, this might have performance impact
|
|
1033
|
+
cursor: cursor
|
|
936
1034
|
}, baseMapProps, mapProps, maps.length > 1 ? viewState || {} : {}, {
|
|
937
1035
|
style: __assign(__assign({}, mapProps.style || {}), {
|
|
938
1036
|
position: 'absolute',
|
|
@@ -941,11 +1039,11 @@ function makeSyncedMaps(_a) {
|
|
|
941
1039
|
width: '100%',
|
|
942
1040
|
height: '100%'
|
|
943
1041
|
}),
|
|
944
|
-
onMove:
|
|
945
|
-
onDragStart:
|
|
946
|
-
onDragEnd:
|
|
1042
|
+
onMove: syncedOnMove,
|
|
1043
|
+
onDragStart: syncedOnDragStart,
|
|
1044
|
+
onDragEnd: syncedOnDragEnd,
|
|
947
1045
|
onMouseMove: function onMouseMove(event) {
|
|
948
|
-
return
|
|
1046
|
+
return syncedOnMouseMove(event, index);
|
|
949
1047
|
},
|
|
950
1048
|
//
|
|
951
1049
|
// There is no notion of mouseenter/mouseleave
|
|
@@ -956,7 +1054,7 @@ function makeSyncedMaps(_a) {
|
|
|
956
1054
|
// https://github.com/mapbox/mapbox-gl-js/issues/10594
|
|
957
1055
|
// https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
|
|
958
1056
|
//
|
|
959
|
-
onMouseOut:
|
|
1057
|
+
onMouseOut: syncedOnMouseOut
|
|
960
1058
|
})));
|
|
961
1059
|
}), children);
|
|
962
1060
|
});
|
|
@@ -968,6 +1066,70 @@ var SyncedMaps = makeSyncedMaps({
|
|
|
968
1066
|
});
|
|
969
1067
|
var templateObject_1;
|
|
970
1068
|
|
|
1069
|
+
function useTilesLoading(maps) {
|
|
1070
|
+
maps = Array.isArray(maps) ? maps : [maps];
|
|
1071
|
+
var _a = useState(false),
|
|
1072
|
+
loading = _a[0],
|
|
1073
|
+
setLoading = _a[1];
|
|
1074
|
+
var checkLoading = function checkLoading() {
|
|
1075
|
+
var loading = maps.some(function (map) {
|
|
1076
|
+
return !map.areTilesLoaded();
|
|
1077
|
+
});
|
|
1078
|
+
setLoading(loading);
|
|
1079
|
+
};
|
|
1080
|
+
useEffect(function () {
|
|
1081
|
+
var handlers = maps.map(function (map) {
|
|
1082
|
+
var update = function update() {
|
|
1083
|
+
return checkLoading();
|
|
1084
|
+
};
|
|
1085
|
+
map.on('dataloading', update);
|
|
1086
|
+
// map.on('data', update)
|
|
1087
|
+
map.on('idle', update);
|
|
1088
|
+
return function () {
|
|
1089
|
+
map.off('dataloading', update);
|
|
1090
|
+
// map.off('data', update)
|
|
1091
|
+
map.off('idle', update);
|
|
1092
|
+
};
|
|
1093
|
+
});
|
|
1094
|
+
checkLoading(); // initial
|
|
1095
|
+
return function () {
|
|
1096
|
+
return handlers.forEach(function (off) {
|
|
1097
|
+
return off();
|
|
1098
|
+
});
|
|
1099
|
+
};
|
|
1100
|
+
}, [maps]);
|
|
1101
|
+
return loading;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
function useMapRegistry() {
|
|
1105
|
+
var _a = useState([]),
|
|
1106
|
+
maps = _a[0],
|
|
1107
|
+
setMaps = _a[1];
|
|
1108
|
+
var onLoad = useCallback(function (evt) {
|
|
1109
|
+
//
|
|
1110
|
+
// Set maps in next tick, so that does not interfere
|
|
1111
|
+
// in map element rendering
|
|
1112
|
+
//
|
|
1113
|
+
return setTimeout(function () {
|
|
1114
|
+
return setMaps(function (currMaps) {
|
|
1115
|
+
return __spreadArray(__spreadArray([], currMaps, true), [evt.target], false);
|
|
1116
|
+
});
|
|
1117
|
+
}, 0);
|
|
1118
|
+
}, []);
|
|
1119
|
+
var onRemove = useCallback(function (evt) {
|
|
1120
|
+
return setMaps(function (currMaps) {
|
|
1121
|
+
return currMaps.filter(function (map) {
|
|
1122
|
+
return map !== evt.target;
|
|
1123
|
+
});
|
|
1124
|
+
});
|
|
1125
|
+
}, []);
|
|
1126
|
+
return {
|
|
1127
|
+
maps: maps,
|
|
1128
|
+
onLoad: onLoad,
|
|
1129
|
+
onRemove: onRemove
|
|
1130
|
+
};
|
|
1131
|
+
}
|
|
1132
|
+
|
|
971
1133
|
function DynamicImages(_a) {
|
|
972
1134
|
var _this = this;
|
|
973
1135
|
var onGenerateImage = _a.onGenerateImage;
|
|
@@ -1032,6 +1194,7 @@ function iconPathToSvg(path, _a) {
|
|
|
1032
1194
|
var pathAttrs = ["fill=\"".concat(fill, "\""), style ? "style=\"".concat(style, "\"") : ''].filter(Boolean).join(' ');
|
|
1033
1195
|
return "<svg ".concat(svgAttrs, "><path ").concat(pathAttrs, " d=\"").concat(path, "\" /></svg>");
|
|
1034
1196
|
}
|
|
1197
|
+
|
|
1035
1198
|
/**
|
|
1036
1199
|
* Renders an SVG string onto a canvas and returns an object compatible with maplibre `addImage`.
|
|
1037
1200
|
*
|
|
@@ -1040,9 +1203,9 @@ function iconPathToSvg(path, _a) {
|
|
|
1040
1203
|
* @returns Promise resolving to { width, height, data, pixelRatio }
|
|
1041
1204
|
*/
|
|
1042
1205
|
function svgToMaplibreImage(svgString_1) {
|
|
1043
|
-
return __awaiter(this, arguments, void 0, function (svgString,
|
|
1044
|
-
if (
|
|
1045
|
-
|
|
1206
|
+
return __awaiter(this, arguments, void 0, function (svgString, inputPixelRatio) {
|
|
1207
|
+
if (inputPixelRatio === void 0) {
|
|
1208
|
+
inputPixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
|
|
1046
1209
|
}
|
|
1047
1210
|
return __generator(this, function (_a) {
|
|
1048
1211
|
return [2 /*return*/, new Promise(function (resolve, reject) {
|
|
@@ -1052,6 +1215,8 @@ function svgToMaplibreImage(svgString_1) {
|
|
|
1052
1215
|
var url = URL.createObjectURL(svgBlob);
|
|
1053
1216
|
var img = new Image();
|
|
1054
1217
|
img.onload = function () {
|
|
1218
|
+
// Normalize pixel ratio: integer and at least 1
|
|
1219
|
+
var pixelRatio = Math.max(1, Math.round(inputPixelRatio || 1));
|
|
1055
1220
|
var width = img.width * pixelRatio;
|
|
1056
1221
|
var height = img.height * pixelRatio;
|
|
1057
1222
|
var canvas = document.createElement('canvas');
|
|
@@ -1079,21 +1244,64 @@ function svgToMaplibreImage(svgString_1) {
|
|
|
1079
1244
|
});
|
|
1080
1245
|
});
|
|
1081
1246
|
}
|
|
1082
|
-
|
|
1083
|
-
|
|
1247
|
+
|
|
1248
|
+
function svgImageId(imageId, options) {
|
|
1249
|
+
return options ? "".concat(imageId, "(").concat(JSON.stringify(options), ")") : imageId;
|
|
1084
1250
|
}
|
|
1085
|
-
function
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1251
|
+
var ERROR_ICON_EXPR = function ERROR_ICON_EXPR(options) {
|
|
1252
|
+
if (options === void 0) {
|
|
1253
|
+
options = {};
|
|
1254
|
+
}
|
|
1255
|
+
return function () {
|
|
1256
|
+
return iconPathToSvg(mdiCloseCircleOutline, __assign({
|
|
1257
|
+
fill: 'red'
|
|
1258
|
+
}, options));
|
|
1259
|
+
};
|
|
1260
|
+
};
|
|
1261
|
+
function svgImageGenerator(svgImageSpecsById) {
|
|
1262
|
+
var fns = Object.fromEntries(Object.entries(svgImageSpecsById).map(function (_a) {
|
|
1263
|
+
var imageId = _a[0],
|
|
1264
|
+
iconSpec = _a[1];
|
|
1265
|
+
if (typeof iconSpec === 'string' && iconSpec.startsWith('<svg')) {
|
|
1266
|
+
//
|
|
1267
|
+
// Full svg
|
|
1268
|
+
//
|
|
1269
|
+
return [imageId, function (options) {
|
|
1270
|
+
if (options === void 0) {
|
|
1271
|
+
options = {};
|
|
1272
|
+
}
|
|
1273
|
+
return function () {
|
|
1274
|
+
return interpolate(iconSpec, options);
|
|
1275
|
+
};
|
|
1276
|
+
}];
|
|
1277
|
+
} else if (typeof iconSpec === 'string') {
|
|
1278
|
+
//
|
|
1279
|
+
// Its a string, assume it is an svg path
|
|
1280
|
+
//
|
|
1281
|
+
return [imageId, function (options) {
|
|
1282
|
+
if (options === void 0) {
|
|
1283
|
+
options = {};
|
|
1284
|
+
}
|
|
1285
|
+
return function () {
|
|
1286
|
+
return iconPathToSvg(iconSpec, options);
|
|
1287
|
+
};
|
|
1288
|
+
}];
|
|
1289
|
+
} else if (typeof iconSpec === 'function') {
|
|
1290
|
+
//
|
|
1291
|
+
// Function that returns custom svg
|
|
1292
|
+
//
|
|
1293
|
+
return [imageId, function (options) {
|
|
1294
|
+
if (options === void 0) {
|
|
1295
|
+
options = {};
|
|
1296
|
+
}
|
|
1297
|
+
return function () {
|
|
1298
|
+
return iconSpec(options);
|
|
1299
|
+
};
|
|
1300
|
+
}];
|
|
1301
|
+
} else {
|
|
1302
|
+
console.warn("Invalid icon spec for ".concat(imageId, ", will ignore"), iconSpec);
|
|
1303
|
+
return [imageId, ERROR_ICON_EXPR];
|
|
1304
|
+
}
|
|
1097
1305
|
}));
|
|
1098
1306
|
var expr = strExpr({
|
|
1099
1307
|
expressions: fns
|
|
@@ -1114,13 +1322,89 @@ function svgIconGenerator(iconPathsById) {
|
|
|
1114
1322
|
});
|
|
1115
1323
|
});
|
|
1116
1324
|
}
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1325
|
+
//
|
|
1326
|
+
// Expose generator fns
|
|
1327
|
+
//
|
|
1328
|
+
Object.assign(onGenerateSvgImage, Object.fromEntries(Object.keys(svgImageSpecsById).map(function (imageId) {
|
|
1329
|
+
return [imageId, function (options) {
|
|
1330
|
+
return svgImageId(imageId, options);
|
|
1120
1331
|
}];
|
|
1121
1332
|
})));
|
|
1122
1333
|
return onGenerateSvgImage;
|
|
1123
1334
|
}
|
|
1335
|
+
function svgIconGenerator() {
|
|
1336
|
+
var args = [];
|
|
1337
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
1338
|
+
args[_i] = arguments[_i];
|
|
1339
|
+
}
|
|
1340
|
+
console.warn('svgIconGenerator is deprecated, migrate to svgImageGenerator');
|
|
1341
|
+
return svgImageGenerator.apply(void 0, args);
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
function _pattern(strTemplate) {
|
|
1345
|
+
return function (data) {
|
|
1346
|
+
return interpolate(strTemplate, data);
|
|
1347
|
+
};
|
|
1348
|
+
}
|
|
1349
|
+
function _svgViewBox(_a) {
|
|
1350
|
+
var height = _a.height,
|
|
1351
|
+
width = _a.width;
|
|
1352
|
+
return "viewBox=\"0 0 ".concat(width, " ").concat(height, "\" height=\"").concat(height, "\" width=\"").concat(width, "\"");
|
|
1353
|
+
}
|
|
1354
|
+
function _bgRect() {
|
|
1355
|
+
return "<rect\n width=\"100%\"\n height=\"100%\"\n fill=\"${ fill = transparent }\"\n />";
|
|
1356
|
+
}
|
|
1357
|
+
// Source:
|
|
1358
|
+
// https://pattern.monster/cross-section
|
|
1359
|
+
var squares_1 = _pattern("<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ".concat(_svgViewBox({
|
|
1360
|
+
height: 20,
|
|
1361
|
+
width: 20
|
|
1362
|
+
}), ">\n <defs>\n <pattern\n patternTransform=\"scale(${ scale = 1 })\"\n id=\"a\"\n width=\"20\"\n height=\"20\"\n patternUnits=\"userSpaceOnUse\"\n >\n ").concat(_bgRect(), "\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"2\"\n d=\"M10 0v20ZM0 10h20Z\"\n />\n </pattern>\n </defs>\n <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
|
|
1363
|
+
// Source:
|
|
1364
|
+
// https://pattern.monster/triangles-4
|
|
1365
|
+
var triangles_1 = _pattern("<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ".concat(_svgViewBox({
|
|
1366
|
+
height: 40,
|
|
1367
|
+
width: 20
|
|
1368
|
+
}), ">\n <defs>\n <pattern\n patternTransform=\"scale(${ scale = 1 })\"\n id=\"a\"\n width=\"20\"\n height=\"40\"\n patternUnits=\"userSpaceOnUse\"\n >\n ").concat(_bgRect(), "\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z\"\n />\n </pattern>\n </defs>\n <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
|
|
1369
|
+
// Source:
|
|
1370
|
+
// https://pattern.monster/diamonds-1
|
|
1371
|
+
var diamonds_1 = _pattern("<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ".concat(_svgViewBox({
|
|
1372
|
+
height: 50,
|
|
1373
|
+
width: 50
|
|
1374
|
+
}), ">\n <defs>\n <pattern\n patternTransform=\"scale(${ scale = 1 })\"\n id=\"a\"\n width=\"50\"\n height=\"50\"\n patternUnits=\"userSpaceOnUse\"\n >\n ").concat(_bgRect(), "\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M50 25 37.5 50 25 25 37.5 0zm-25 0L12.5 50 0 25 12.5 0z\"\n />\n </pattern>\n </defs>\n <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
|
|
1375
|
+
var cross_1 = _pattern("<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ".concat(_svgViewBox({
|
|
1376
|
+
height: 20,
|
|
1377
|
+
width: 20
|
|
1378
|
+
}), ">\n <defs>\n <pattern\n patternTransform=\"scale(${ scale = 1 })\"\n id=\"a\"\n width=\"20\"\n height=\"20\"\n patternUnits=\"userSpaceOnUse\"\n >\n ").concat(_bgRect(), "\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n stroke-linecap=\"square\"\n d=\"M3.25 10h13.5M10 3.25v13.5\"\n />\n </pattern>\n </defs>\n <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
|
|
1379
|
+
// https://pattern.monster/cubes-1
|
|
1380
|
+
var mosaic_1 = _pattern("<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ".concat(_svgViewBox({
|
|
1381
|
+
width: 60,
|
|
1382
|
+
height: 60
|
|
1383
|
+
}), ">\n <defs>\n <pattern\n patternTransform=\"scale(${ scale = 1 })\"\n id=\"a\"\n width=\"60\"\n height=\"60\"\n patternUnits=\"userSpaceOnUse\">\n ").concat(_bgRect(), "\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M15 30v30m-7.5 0V30h15v30m7.5 0H0V30h30M45 0v30m7.5-30v30m-15 0V0M30 0h30v30M30 45h30m-30-7.5h30m0 15H30M30 30h30v30H30zM0 15h30M0 7.5h30m0 15H0M0 0h30v30H0z\"\n />\n </pattern>\n </defs>\n <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
|
|
1384
|
+
var waves_1 = _pattern("<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ".concat(_svgViewBox({
|
|
1385
|
+
width: 120,
|
|
1386
|
+
height: 80
|
|
1387
|
+
}), ">\n <defs>\n <pattern\n patternTransform=\"scale(${ scale = 1 })\"\n id=\"a\"\n width=\"120\"\n height=\"80\"\n patternUnits=\"userSpaceOnUse\">\n ").concat(_bgRect(), "\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M-50.129 12.685C-33.346 12.358-16.786 4.918 0 5c16.787.082 43.213 10 60 10s43.213-9.918 60-10 33.346 7.358 50.129 7.685\"\n />\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M-50.129 32.685C-33.346 32.358-16.786 24.918 0 25c16.787.082 43.213 10 60 10s43.213-9.918 60-10 33.346 7.358 50.129 7.685\"\n />\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M-50.129 52.685C-33.346 52.358-16.786 44.918 0 45c16.787.082 43.213 10 60 10s43.213-9.918 60-10 33.346 7.358 50.129 7.685\"\n />\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M-50.129 72.685C-33.346 72.358-16.786 64.918 0 65c16.787.082 43.213 10 60 10s43.213-9.918 60-10 33.346 7.358 50.129 7.685\"\n />\n </pattern>\n </defs>\n <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
|
|
1388
|
+
var circles_1 = _pattern("<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ".concat(_svgViewBox({
|
|
1389
|
+
width: 20,
|
|
1390
|
+
height: 20
|
|
1391
|
+
}), ">\n <defs>\n <pattern\n patternTransform=\"scale(${ scale = 1 })\"\n id=\"a\"\n width=\"20\"\n height=\"20\"\n patternUnits=\"userSpaceOnUse\">\n ").concat(_bgRect(), "\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z\"\n />\n </pattern>\n </defs>\n <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
|
|
1392
|
+
var lines_1 = _pattern("<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ".concat(_svgViewBox({
|
|
1393
|
+
width: 20,
|
|
1394
|
+
height: 80
|
|
1395
|
+
}), ">\n <defs>\n <pattern\n patternTransform=\"scale(${ scale = 1 })\"\n id=\"a\"\n width=\"20\"\n height=\"80\"\n patternUnits=\"userSpaceOnUse\">\n ").concat(_bgRect(), "\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M0 10h20z\"\n />\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M0 30h20z\"\n />\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M0 50h20z\"\n />\n <path\n fill=\"transparent\"\n stroke=\"${ stroke = #000000 }\"\n stroke-width=\"${ strokeWidth = 2 }\"\n d=\"M0 70h20z\"\n />\n </pattern>\n </defs>\n <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
|
|
1396
|
+
|
|
1397
|
+
var index = /*#__PURE__*/Object.freeze({
|
|
1398
|
+
__proto__: null,
|
|
1399
|
+
circles_1: circles_1,
|
|
1400
|
+
cross_1: cross_1,
|
|
1401
|
+
diamonds_1: diamonds_1,
|
|
1402
|
+
lines_1: lines_1,
|
|
1403
|
+
mosaic_1: mosaic_1,
|
|
1404
|
+
squares_1: squares_1,
|
|
1405
|
+
triangles_1: triangles_1,
|
|
1406
|
+
waves_1: waves_1
|
|
1407
|
+
});
|
|
1124
1408
|
|
|
1125
1409
|
var DEFAULT_MIN_K = 3;
|
|
1126
1410
|
var DEFAULT_MAX_K = 9;
|
|
@@ -1642,4 +1926,4 @@ function InspectControl(props) {
|
|
|
1642
1926
|
return null;
|
|
1643
1927
|
}
|
|
1644
1928
|
|
|
1645
|
-
export { $naturalBreaks, ControlContainer, DynamicImages, HoverTooltip, InspectControl, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getSrcLayer, getSrcViewByLayerId, hoverParseEvent,
|
|
1929
|
+
export { $naturalBreaks, ControlContainer, DynamicImages, HoverTooltip, InspectControl, LayeredMap, MapWindow, index as SVG_PATTERNS, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, circles_1, cross_1, diamonds_1, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, layeredMapOnClickHandler, lines_1, makeSyncedMaps, mapSetFeaturesState, mosaic_1, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, squares_1, svgIconGenerator, svgImageGenerator, svgImageId, triangles_1, useClientRect, useHover, useLayeredMap, useMapRegistry, useTilesLoading, waves_1, withHover };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orioro/react-maplibre-util",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"packageManager": "yarn@4.0.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.mjs",
|
|
@@ -51,12 +51,12 @@
|
|
|
51
51
|
"@maplibre/maplibre-gl-inspect": "^1.7.1",
|
|
52
52
|
"@mdi/js": "^7.4.47",
|
|
53
53
|
"@mdi/react": "^1.6.1",
|
|
54
|
-
"@orioro/react-chart-util": "^0.
|
|
54
|
+
"@orioro/react-chart-util": "^0.3.0",
|
|
55
55
|
"@orioro/react-select": "^3.0.2",
|
|
56
|
-
"@orioro/react-ui-core": "^0.0.
|
|
57
|
-
"@orioro/resolve": "^0.1.
|
|
56
|
+
"@orioro/react-ui-core": "^0.0.14",
|
|
57
|
+
"@orioro/resolve": "^0.1.9",
|
|
58
58
|
"@orioro/scale-util": "^0.0.2",
|
|
59
|
-
"@orioro/util": "^0.
|
|
59
|
+
"@orioro/util": "^0.15.1",
|
|
60
60
|
"@turf/turf": "^7.2.0",
|
|
61
61
|
"d3": "^7.9.0",
|
|
62
62
|
"d3-scale-chromatic": "^3.1.0",
|