mertani-web-toolkit 0.1.63 → 0.1.64
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/dist/components/inputs/SelectInput/SelectInput.svelte +1 -1
- package/dist/components/map/Map.d.ts +1 -0
- package/dist/components/map/Map.js +1 -0
- package/dist/components/map/Map.svelte +284 -0
- package/dist/components/map/Map.svelte.d.ts +44 -0
- package/dist/components/map/MapGeoJSON.svelte +60 -0
- package/dist/components/map/MapGeoJSON.svelte.d.ts +8 -0
- package/dist/components/map/MapMarker.svelte +424 -0
- package/dist/components/map/MapMarker.svelte.d.ts +25 -0
- package/dist/components/map/MapMarkerGroup.svelte +213 -0
- package/dist/components/map/MapMarkerGroup.svelte.d.ts +31 -0
- package/dist/components/map/MapTopoJSON.svelte +70 -0
- package/dist/components/map/MapTopoJSON.svelte.d.ts +9 -0
- package/dist/components/map/MapVelocity.svelte +152 -0
- package/dist/components/map/MapVelocity.svelte.d.ts +37 -0
- package/dist/components/map/PopupWrapper.svelte +8 -0
- package/dist/components/map/PopupWrapper.svelte.d.ts +7 -0
- package/dist/components/map/map.css +176 -0
- package/dist/icons/BsSliders.svelte +21 -21
- package/dist/icons/Crosshair.svelte +12 -0
- package/dist/icons/Crosshair.svelte.d.ts +26 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.js +6 -0
- package/dist/utils/mapContext.d.ts +27 -0
- package/dist/utils/mapContext.js +52 -0
- package/package.json +9 -2
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onDestroy } from 'svelte';
|
|
3
|
+
import { useMapContext } from '../../utils/mapContext.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
topology,
|
|
7
|
+
objectName,
|
|
8
|
+
style,
|
|
9
|
+
onEachFeature
|
|
10
|
+
}: {
|
|
11
|
+
topology: any; // TopoJSON topology object
|
|
12
|
+
objectName?: string;
|
|
13
|
+
style?: any;
|
|
14
|
+
onEachFeature?: (feature: any, layer: any) => void;
|
|
15
|
+
} = $props();
|
|
16
|
+
|
|
17
|
+
const mapStore = useMapContext();
|
|
18
|
+
let map: any = null;
|
|
19
|
+
let layer: any = null;
|
|
20
|
+
let unsub: (() => void) | null = null;
|
|
21
|
+
|
|
22
|
+
async function rebuild() {
|
|
23
|
+
if (!map) return;
|
|
24
|
+
if (layer) {
|
|
25
|
+
layer.remove?.();
|
|
26
|
+
layer = null;
|
|
27
|
+
}
|
|
28
|
+
if (!topology) return;
|
|
29
|
+
|
|
30
|
+
const leafletMod = await import('leaflet');
|
|
31
|
+
const L = (leafletMod as any).default ?? leafletMod;
|
|
32
|
+
const topo = await import('topojson-client');
|
|
33
|
+
|
|
34
|
+
const objects = topology?.objects ?? {};
|
|
35
|
+
const names = Object.keys(objects);
|
|
36
|
+
const pickName = objectName ?? names[0];
|
|
37
|
+
if (!pickName) return;
|
|
38
|
+
|
|
39
|
+
const fc = (topo as any).feature(topology, objects[pickName]);
|
|
40
|
+
layer = L.geoJSON(fc, { style, onEachFeature });
|
|
41
|
+
layer.addTo(map);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
$effect(() => {
|
|
45
|
+
topology;
|
|
46
|
+
objectName;
|
|
47
|
+
style;
|
|
48
|
+
onEachFeature;
|
|
49
|
+
rebuild();
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
unsub = (mapStore as any).subscribe((m: any) => {
|
|
53
|
+
map = m;
|
|
54
|
+
if (!map && layer) {
|
|
55
|
+
layer.remove?.();
|
|
56
|
+
layer = null;
|
|
57
|
+
}
|
|
58
|
+
if (map) rebuild();
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
onDestroy(() => {
|
|
62
|
+
try {
|
|
63
|
+
unsub?.();
|
|
64
|
+
} finally {
|
|
65
|
+
unsub = null;
|
|
66
|
+
layer?.remove?.();
|
|
67
|
+
layer = null;
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
</script>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type $$ComponentProps = {
|
|
2
|
+
topology: any;
|
|
3
|
+
objectName?: string;
|
|
4
|
+
style?: any;
|
|
5
|
+
onEachFeature?: (feature: any, layer: any) => void;
|
|
6
|
+
};
|
|
7
|
+
declare const MapTopoJSON: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
8
|
+
type MapTopoJSON = ReturnType<typeof MapTopoJSON>;
|
|
9
|
+
export default MapTopoJSON;
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onDestroy } from 'svelte';
|
|
3
|
+
import type { Map as LMap, Layer } from 'leaflet';
|
|
4
|
+
import type { Writable } from 'svelte/store';
|
|
5
|
+
import { useMapContext } from '../../utils/mapContext.js';
|
|
6
|
+
|
|
7
|
+
// Type for leaflet-velocity data structure
|
|
8
|
+
interface VelocityDataHeader {
|
|
9
|
+
nx: number;
|
|
10
|
+
ny: number;
|
|
11
|
+
lo1: number;
|
|
12
|
+
la1: number;
|
|
13
|
+
lo2: number;
|
|
14
|
+
la2: number;
|
|
15
|
+
dx: number;
|
|
16
|
+
dy: number;
|
|
17
|
+
parameterNumber?: number;
|
|
18
|
+
parameterCategory?: number;
|
|
19
|
+
parameterUnit?: string;
|
|
20
|
+
refTime?: string;
|
|
21
|
+
forecastTime?: number;
|
|
22
|
+
[key: string]: unknown;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
interface VelocityDataRecord {
|
|
26
|
+
header: VelocityDataHeader;
|
|
27
|
+
data: number[];
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
type VelocityData = VelocityDataRecord[] | null;
|
|
31
|
+
|
|
32
|
+
// Type for leaflet-velocity layer
|
|
33
|
+
interface VelocityLayer extends Layer {
|
|
34
|
+
stop?(): void;
|
|
35
|
+
clear?(): void;
|
|
36
|
+
addTo(map: LMap): this;
|
|
37
|
+
remove(): this;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Type for velocity layer options
|
|
41
|
+
interface VelocityLayerOptions {
|
|
42
|
+
velocityScale?: number;
|
|
43
|
+
particleAge?: number;
|
|
44
|
+
particleMultiplier?: number;
|
|
45
|
+
particleLineWidth?: number;
|
|
46
|
+
frameRate?: number;
|
|
47
|
+
pane?: string;
|
|
48
|
+
[key: string]: unknown;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Type for Leaflet namespace with velocityLayer
|
|
52
|
+
type LeafletNamespace = typeof import('leaflet') & {
|
|
53
|
+
velocityLayer?: new (options: {
|
|
54
|
+
data: VelocityDataRecord[];
|
|
55
|
+
[key: string]: unknown;
|
|
56
|
+
}) => VelocityLayer;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
let {
|
|
60
|
+
data,
|
|
61
|
+
options
|
|
62
|
+
}: {
|
|
63
|
+
data: VelocityData;
|
|
64
|
+
options?: VelocityLayerOptions;
|
|
65
|
+
} = $props();
|
|
66
|
+
|
|
67
|
+
const mapStore = useMapContext() as Writable<LMap | null>;
|
|
68
|
+
let map: LMap | null = null;
|
|
69
|
+
let layer: VelocityLayer | null = null;
|
|
70
|
+
let unsub: (() => void) | null = null;
|
|
71
|
+
|
|
72
|
+
function removeLayer() {
|
|
73
|
+
if (!layer) return;
|
|
74
|
+
|
|
75
|
+
try {
|
|
76
|
+
if (typeof layer.stop === 'function') {
|
|
77
|
+
layer.stop();
|
|
78
|
+
}
|
|
79
|
+
if (typeof layer.clear === 'function') {
|
|
80
|
+
layer.clear();
|
|
81
|
+
}
|
|
82
|
+
} catch (e) {
|
|
83
|
+
// Ignore errors
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (map) {
|
|
87
|
+
try {
|
|
88
|
+
map.removeLayer(layer);
|
|
89
|
+
} catch (e) {
|
|
90
|
+
// Layer might already be removed
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
try {
|
|
95
|
+
layer.remove?.();
|
|
96
|
+
} catch (e) {
|
|
97
|
+
// Ignore errors
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
layer = null;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
async function rebuild() {
|
|
104
|
+
if (!map) return;
|
|
105
|
+
|
|
106
|
+
removeLayer();
|
|
107
|
+
|
|
108
|
+
if (!data) return;
|
|
109
|
+
|
|
110
|
+
const leafletMod = await import('leaflet');
|
|
111
|
+
const L = (leafletMod.default ?? leafletMod) as LeafletNamespace;
|
|
112
|
+
|
|
113
|
+
await import('leaflet-velocity');
|
|
114
|
+
|
|
115
|
+
const ctor = L.velocityLayer;
|
|
116
|
+
if (!ctor || typeof ctor !== 'function') return;
|
|
117
|
+
|
|
118
|
+
layer = new ctor({ data, ...(options ?? {}) });
|
|
119
|
+
layer.addTo(map);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
$effect(() => {
|
|
123
|
+
const currentData = data;
|
|
124
|
+
|
|
125
|
+
if (!currentData) {
|
|
126
|
+
removeLayer();
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
(async () => {
|
|
131
|
+
await rebuild();
|
|
132
|
+
})();
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
unsub = mapStore.subscribe((m: LMap | null) => {
|
|
136
|
+
map = m;
|
|
137
|
+
if (!map) {
|
|
138
|
+
removeLayer();
|
|
139
|
+
} else {
|
|
140
|
+
rebuild();
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
onDestroy(() => {
|
|
145
|
+
try {
|
|
146
|
+
unsub?.();
|
|
147
|
+
} finally {
|
|
148
|
+
unsub = null;
|
|
149
|
+
removeLayer();
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
</script>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
interface VelocityDataHeader {
|
|
2
|
+
nx: number;
|
|
3
|
+
ny: number;
|
|
4
|
+
lo1: number;
|
|
5
|
+
la1: number;
|
|
6
|
+
lo2: number;
|
|
7
|
+
la2: number;
|
|
8
|
+
dx: number;
|
|
9
|
+
dy: number;
|
|
10
|
+
parameterNumber?: number;
|
|
11
|
+
parameterCategory?: number;
|
|
12
|
+
parameterUnit?: string;
|
|
13
|
+
refTime?: string;
|
|
14
|
+
forecastTime?: number;
|
|
15
|
+
[key: string]: unknown;
|
|
16
|
+
}
|
|
17
|
+
interface VelocityDataRecord {
|
|
18
|
+
header: VelocityDataHeader;
|
|
19
|
+
data: number[];
|
|
20
|
+
}
|
|
21
|
+
type VelocityData = VelocityDataRecord[] | null;
|
|
22
|
+
interface VelocityLayerOptions {
|
|
23
|
+
velocityScale?: number;
|
|
24
|
+
particleAge?: number;
|
|
25
|
+
particleMultiplier?: number;
|
|
26
|
+
particleLineWidth?: number;
|
|
27
|
+
frameRate?: number;
|
|
28
|
+
pane?: string;
|
|
29
|
+
[key: string]: unknown;
|
|
30
|
+
}
|
|
31
|
+
type $$ComponentProps = {
|
|
32
|
+
data: VelocityData;
|
|
33
|
+
options?: VelocityLayerOptions;
|
|
34
|
+
};
|
|
35
|
+
declare const MapVelocity: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
36
|
+
type MapVelocity = ReturnType<typeof MapVelocity>;
|
|
37
|
+
export default MapVelocity;
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
.map-container {
|
|
2
|
+
position: relative;
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
min-height: 280px; /* fallback so it doesn't collapse in docs/story/pages */
|
|
6
|
+
background: var(--color-bg-surface);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.top-progress {
|
|
10
|
+
position: absolute;
|
|
11
|
+
left: 0;
|
|
12
|
+
top: 0;
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 3px;
|
|
15
|
+
z-index: 1003;
|
|
16
|
+
background: transparent;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.top-progress .bar {
|
|
20
|
+
height: 100%;
|
|
21
|
+
background: var(--color-bg-act-primary);
|
|
22
|
+
transition: width 120ms ease;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.map-el {
|
|
26
|
+
height: 100%;
|
|
27
|
+
width: 100%;
|
|
28
|
+
min-height: 280px; /* fallback so Leaflet has a definite size */
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Leaflet marker styles */
|
|
32
|
+
.leaflet-marker-icon {
|
|
33
|
+
.status {
|
|
34
|
+
position: relative;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.status img {
|
|
38
|
+
z-index: 1;
|
|
39
|
+
position: absolute;
|
|
40
|
+
left: 50%;
|
|
41
|
+
top: 50%;
|
|
42
|
+
transform: translate(-50%, -50%);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.status .bg {
|
|
46
|
+
z-index: 0;
|
|
47
|
+
width: 40px;
|
|
48
|
+
height: 40px;
|
|
49
|
+
border-radius: 40px;
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 50%;
|
|
52
|
+
opacity: 0.75;
|
|
53
|
+
transform: translateX(-50%) translateY(-50%);
|
|
54
|
+
left: 50%;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Pulse animation */
|
|
59
|
+
.custom-class-map .pulse {
|
|
60
|
+
position: absolute;
|
|
61
|
+
top: 50%;
|
|
62
|
+
left: 50%;
|
|
63
|
+
width: 40px;
|
|
64
|
+
height: 40px;
|
|
65
|
+
border-radius: 50%;
|
|
66
|
+
background-color: var(--pulse-color);
|
|
67
|
+
opacity: 0.6;
|
|
68
|
+
transform: translate(-50%, -50%);
|
|
69
|
+
animation: pulseAnim 2s infinite;
|
|
70
|
+
z-index: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@keyframes pulseAnim {
|
|
74
|
+
0% {
|
|
75
|
+
transform: translate(-50%, -50%) scale(1);
|
|
76
|
+
opacity: 0.7;
|
|
77
|
+
}
|
|
78
|
+
70% {
|
|
79
|
+
transform: translate(-50%, -50%) scale(1.8);
|
|
80
|
+
opacity: 0;
|
|
81
|
+
}
|
|
82
|
+
100% {
|
|
83
|
+
opacity: 0;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Leaflet popup styles */
|
|
88
|
+
.leaflet-popup-content {
|
|
89
|
+
margin: 0 !important;
|
|
90
|
+
width: 100% !important;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.leaflet-popup-content p {
|
|
94
|
+
margin: 0 !important;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.leaflet-popup {
|
|
98
|
+
border-radius: 12px;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media (max-width: 768px) {
|
|
104
|
+
.leaflet-popup {
|
|
105
|
+
max-width: calc(100vw - 24px) !important;
|
|
106
|
+
margin: 12px !important;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Leaflet zoom control styles */
|
|
111
|
+
.leaflet-control-zoom {
|
|
112
|
+
border: none !important;
|
|
113
|
+
box-shadow: none !important;
|
|
114
|
+
background: transparent !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.leaflet-control-zoom a {
|
|
118
|
+
font-size: 24px !important;
|
|
119
|
+
width: 40px !important;
|
|
120
|
+
height: 40px !important;
|
|
121
|
+
display: flex !important;
|
|
122
|
+
align-items: center;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
margin-right: 24px !important;
|
|
125
|
+
transition:
|
|
126
|
+
background 0.2s,
|
|
127
|
+
color 0.2s;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.leaflet-touch .leaflet-bar {
|
|
131
|
+
border: none !important;
|
|
132
|
+
margin-right: 24px !important;
|
|
133
|
+
|
|
134
|
+
@media (max-width: 1024px) {
|
|
135
|
+
margin-right: 20px !important;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@media (max-width: 768px) {
|
|
139
|
+
margin-right: 16px !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@media (max-width: 480px) {
|
|
143
|
+
margin-right: 12px !important;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
.leaflet-popup-content {
|
|
147
|
+
margin-left: 0 !important;
|
|
148
|
+
margin-right: 0 !important;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.leaflet-control-zoom-in {
|
|
152
|
+
border-top-left-radius: 8px !important;
|
|
153
|
+
border-top-right-radius: 8px !important;
|
|
154
|
+
margin-bottom: 2px !important;
|
|
155
|
+
background-color: color-mix(in srgb, var(--color-bg-surface), transparent 30%) !important;
|
|
156
|
+
color: var(--color-text-primary) !important;
|
|
157
|
+
backdrop-filter: blur(2px);
|
|
158
|
+
|
|
159
|
+
&:hover {
|
|
160
|
+
background-color: color-mix(in srgb, var(--color-bg-surface), transparent 5%) !important;
|
|
161
|
+
color: var(--color-text-primary) !important;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.leaflet-control-zoom-out {
|
|
166
|
+
border-bottom-left-radius: 8px !important;
|
|
167
|
+
border-bottom-right-radius: 8px !important;
|
|
168
|
+
background-color: color-mix(in srgb, var(--color-bg-surface), transparent 30%) !important;
|
|
169
|
+
color: var(--color-text-primary) !important;
|
|
170
|
+
backdrop-filter: blur(2px);
|
|
171
|
+
|
|
172
|
+
&:hover {
|
|
173
|
+
background-color: color-mix(in srgb, var(--color-bg-surface), transparent 5%) !important;
|
|
174
|
+
color: var(--color-text-primary) !important;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
width="16"
|
|
3
|
-
height="16"
|
|
4
|
-
viewBox="0 0 16 16"
|
|
5
|
-
fill="currentColor"
|
|
6
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
-
>
|
|
8
|
-
<g clip-path="url(#clip0_887_5745)">
|
|
9
|
-
<path
|
|
10
|
-
fill-rule="evenodd"
|
|
11
|
-
clip-rule="evenodd"
|
|
12
|
-
d="M11.5 2.00006C11.303 2.00006 11.108 2.03886 10.926 2.11425C10.744 2.18963 10.5786 2.30012 10.4393 2.4394C10.3001 2.57869 10.1896 2.74405 10.1142 2.92604C10.0388 3.10803 10 3.30308 10 3.50006C10 3.69705 10.0388 3.8921 10.1142 4.07409C10.1896 4.25608 10.3001 4.42144 10.4393 4.56073C10.5786 4.70001 10.744 4.8105 10.926 4.88588C11.108 4.96127 11.303 5.00006 11.5 5.00006C11.8978 5.00006 12.2794 4.84203 12.5607 4.56073C12.842 4.27942 13 3.89789 13 3.50006C13 3.10224 12.842 2.72071 12.5607 2.4394C12.2794 2.1581 11.8978 2.00006 11.5 2.00006ZM9.05 3.00006C9.16476 2.43492 9.47136 1.92683 9.91787 1.56188C10.3644 1.19692 10.9233 0.997559 11.5 0.997559C12.0767 0.997559 12.6356 1.19692 13.0821 1.56188C13.5286 1.92683 13.8352 2.43492 13.95 3.00006H16V4.00006H13.95C13.8352 4.56521 13.5286 5.0733 13.0821 5.43825C12.6356 5.80321 12.0767 6.00257 11.5 6.00257C10.9233 6.00257 10.3644 5.80321 9.91787 5.43825C9.47136 5.0733 9.16476 4.56521 9.05 4.00006H0V3.00006H9.05ZM4.5 7.00006C4.10218 7.00006 3.72064 7.1581 3.43934 7.4394C3.15804 7.72071 3 8.10224 3 8.50006C3 8.89789 3.15804 9.27942 3.43934 9.56073C3.72064 9.84203 4.10218 10.0001 4.5 10.0001C4.89782 10.0001 5.27936 9.84203 5.56066 9.56073C5.84196 9.27942 6 8.89789 6 8.50006C6 8.10224 5.84196 7.72071 5.56066 7.4394C5.27936 7.1581 4.89782 7.00006 4.5 7.00006ZM2.05 8.00006C2.16476 7.43492 2.47136 6.92683 2.91787 6.56188C3.36438 6.19692 3.92332 5.99756 4.5 5.99756C5.07668 5.99756 5.63562 6.19692 6.08213 6.56188C6.52864 6.92683 6.83524 7.43492 6.95 8.00006H16V9.00006H6.95C6.83524 9.56521 6.52864 10.0733 6.08213 10.4383C5.63562 10.8032 5.07668 11.0026 4.5 11.0026C3.92332 11.0026 3.36438 10.8032 2.91787 10.4383C2.47136 10.0733 2.16476 9.56521 2.05 9.00006H0V8.00006H2.05ZM11.5 12.0001C11.1022 12.0001 10.7206 12.1581 10.4393 12.4394C10.158 12.7207 10 13.1022 10 13.5001C10 13.8979 10.158 14.2794 10.4393 14.5607C10.7206 14.842 11.1022 15.0001 11.5 15.0001C11.8978 15.0001 12.2794 14.842 12.5607 14.5607C12.842 14.2794 13 13.8979 13 13.5001C13 13.1022 12.842 12.7207 12.5607 12.4394C12.2794 12.1581 11.8978 12.0001 11.5 12.0001ZM9.05 13.0001C9.16476 12.4349 9.47136 11.9268 9.91787 11.5619C10.3644 11.1969 10.9233 10.9976 11.5 10.9976C12.0767 10.9976 12.6356 11.1969 13.0821 11.5619C13.5286 11.9268 13.8352 12.4349 13.95 13.0001H16V14.0001H13.95C13.8352 14.5652 13.5286 15.0733 13.0821 15.4383C12.6356 15.8032 12.0767 16.0026 11.5 16.0026C10.9233 16.0026 10.3644 15.8032 9.91787 15.4383C9.47136 15.0733 9.16476 14.5652 9.05 14.0001H0V13.0001H9.05Z"
|
|
13
|
-
fill="currentColor"
|
|
14
|
-
/>
|
|
15
|
-
</g>
|
|
16
|
-
<defs>
|
|
17
|
-
<clipPath id="clip0_887_5745">
|
|
18
|
-
<rect width="16" height="16" fill="currentColor" />
|
|
19
|
-
</clipPath>
|
|
20
|
-
</defs>
|
|
21
|
-
</svg>
|
|
1
|
+
<svg
|
|
2
|
+
width="16"
|
|
3
|
+
height="16"
|
|
4
|
+
viewBox="0 0 16 16"
|
|
5
|
+
fill="currentColor"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<g clip-path="url(#clip0_887_5745)">
|
|
9
|
+
<path
|
|
10
|
+
fill-rule="evenodd"
|
|
11
|
+
clip-rule="evenodd"
|
|
12
|
+
d="M11.5 2.00006C11.303 2.00006 11.108 2.03886 10.926 2.11425C10.744 2.18963 10.5786 2.30012 10.4393 2.4394C10.3001 2.57869 10.1896 2.74405 10.1142 2.92604C10.0388 3.10803 10 3.30308 10 3.50006C10 3.69705 10.0388 3.8921 10.1142 4.07409C10.1896 4.25608 10.3001 4.42144 10.4393 4.56073C10.5786 4.70001 10.744 4.8105 10.926 4.88588C11.108 4.96127 11.303 5.00006 11.5 5.00006C11.8978 5.00006 12.2794 4.84203 12.5607 4.56073C12.842 4.27942 13 3.89789 13 3.50006C13 3.10224 12.842 2.72071 12.5607 2.4394C12.2794 2.1581 11.8978 2.00006 11.5 2.00006ZM9.05 3.00006C9.16476 2.43492 9.47136 1.92683 9.91787 1.56188C10.3644 1.19692 10.9233 0.997559 11.5 0.997559C12.0767 0.997559 12.6356 1.19692 13.0821 1.56188C13.5286 1.92683 13.8352 2.43492 13.95 3.00006H16V4.00006H13.95C13.8352 4.56521 13.5286 5.0733 13.0821 5.43825C12.6356 5.80321 12.0767 6.00257 11.5 6.00257C10.9233 6.00257 10.3644 5.80321 9.91787 5.43825C9.47136 5.0733 9.16476 4.56521 9.05 4.00006H0V3.00006H9.05ZM4.5 7.00006C4.10218 7.00006 3.72064 7.1581 3.43934 7.4394C3.15804 7.72071 3 8.10224 3 8.50006C3 8.89789 3.15804 9.27942 3.43934 9.56073C3.72064 9.84203 4.10218 10.0001 4.5 10.0001C4.89782 10.0001 5.27936 9.84203 5.56066 9.56073C5.84196 9.27942 6 8.89789 6 8.50006C6 8.10224 5.84196 7.72071 5.56066 7.4394C5.27936 7.1581 4.89782 7.00006 4.5 7.00006ZM2.05 8.00006C2.16476 7.43492 2.47136 6.92683 2.91787 6.56188C3.36438 6.19692 3.92332 5.99756 4.5 5.99756C5.07668 5.99756 5.63562 6.19692 6.08213 6.56188C6.52864 6.92683 6.83524 7.43492 6.95 8.00006H16V9.00006H6.95C6.83524 9.56521 6.52864 10.0733 6.08213 10.4383C5.63562 10.8032 5.07668 11.0026 4.5 11.0026C3.92332 11.0026 3.36438 10.8032 2.91787 10.4383C2.47136 10.0733 2.16476 9.56521 2.05 9.00006H0V8.00006H2.05ZM11.5 12.0001C11.1022 12.0001 10.7206 12.1581 10.4393 12.4394C10.158 12.7207 10 13.1022 10 13.5001C10 13.8979 10.158 14.2794 10.4393 14.5607C10.7206 14.842 11.1022 15.0001 11.5 15.0001C11.8978 15.0001 12.2794 14.842 12.5607 14.5607C12.842 14.2794 13 13.8979 13 13.5001C13 13.1022 12.842 12.7207 12.5607 12.4394C12.2794 12.1581 11.8978 12.0001 11.5 12.0001ZM9.05 13.0001C9.16476 12.4349 9.47136 11.9268 9.91787 11.5619C10.3644 11.1969 10.9233 10.9976 11.5 10.9976C12.0767 10.9976 12.6356 11.1969 13.0821 11.5619C13.5286 11.9268 13.8352 12.4349 13.95 13.0001H16V14.0001H13.95C13.8352 14.5652 13.5286 15.0733 13.0821 15.4383C12.6356 15.8032 12.0767 16.0026 11.5 16.0026C10.9233 16.0026 10.3644 15.8032 9.91787 15.4383C9.47136 15.0733 9.16476 14.5652 9.05 14.0001H0V13.0001H9.05Z"
|
|
13
|
+
fill="currentColor"
|
|
14
|
+
/>
|
|
15
|
+
</g>
|
|
16
|
+
<defs>
|
|
17
|
+
<clipPath id="clip0_887_5745">
|
|
18
|
+
<rect width="16" height="16" fill="currentColor" />
|
|
19
|
+
</clipPath>
|
|
20
|
+
</defs>
|
|
21
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="22"
|
|
3
|
+
height="22"
|
|
4
|
+
viewBox="0 0 22 22"
|
|
5
|
+
fill="currentColor"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
d="M11.6875 0.6875C11.6875 0.307804 11.3797 0 11 0C10.6203 0 10.3125 0.307804 10.3125 0.6875V1.39918C5.5447 1.73566 1.73566 5.5447 1.39918 10.3125H0.6875C0.307804 10.3125 0 10.6203 0 11C0 11.3797 0.307804 11.6875 0.6875 11.6875H1.39918C1.73566 16.4553 5.5447 20.2643 10.3125 20.6008V21.3125C10.3125 21.6922 10.6203 22 11 22C11.3797 22 11.6875 21.6922 11.6875 21.3125V20.6008C16.4553 20.2643 20.2643 16.4553 20.6008 11.6875H21.3125C21.6922 11.6875 22 11.3797 22 11C22 10.6203 21.6922 10.3125 21.3125 10.3125H20.6008C20.2643 5.5447 16.4553 1.73566 11.6875 1.39918V0.6875ZM2.77824 10.3125C3.10889 6.30451 6.30451 3.10889 10.3125 2.77824V3.4375C10.3125 3.8172 10.6203 4.125 11 4.125C11.3797 4.125 11.6875 3.8172 11.6875 3.4375V2.77824C15.6955 3.10889 18.8911 6.30451 19.2218 10.3125H18.5625C18.1828 10.3125 17.875 10.6203 17.875 11C17.875 11.3797 18.1828 11.6875 18.5625 11.6875H19.2218C18.8911 15.6955 15.6955 18.8911 11.6875 19.2218V18.5625C11.6875 18.1828 11.3797 17.875 11 17.875C10.6203 17.875 10.3125 18.1828 10.3125 18.5625V19.2218C6.30451 18.8911 3.10889 15.6955 2.77824 11.6875H3.4375C3.8172 11.6875 4.125 11.3797 4.125 11C4.125 10.6203 3.8172 10.3125 3.4375 10.3125H2.77824ZM11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z"
|
|
10
|
+
fill="currentColor"
|
|
11
|
+
/>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default Crosshair;
|
|
2
|
+
type Crosshair = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const Crosshair: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,12 @@ export { default as Tabs } from './components/Tabs/Tabs.svelte';
|
|
|
19
19
|
export { default as TablePagination } from './components/Table/TablePagination.svelte';
|
|
20
20
|
export { default as Illustration } from './components/Illustration/Illustration.svelte';
|
|
21
21
|
export { default as IllustrationLibrary } from './components/Illustration/IllustrationLibrary.svelte';
|
|
22
|
-
export type { Column, DeviceStatus, TableAction } from './components/Table/types.js';
|
|
23
22
|
export { default as DatePicker } from './components/inputs/DatePicker/DatePicker.svelte';
|
|
24
23
|
export { default as Dropdown } from './components/inputs/Dropdown/Dropdown.svelte';
|
|
24
|
+
export { default as Map } from './components/map/Map.svelte';
|
|
25
|
+
export { default as MapMarker } from './components/map/MapMarker.svelte';
|
|
26
|
+
export { default as MapMarkerGroup } from './components/map/MapMarkerGroup.svelte';
|
|
27
|
+
export { default as MapGeoJSON } from './components/map/MapGeoJSON.svelte';
|
|
28
|
+
export { default as MapTopoJSON } from './components/map/MapTopoJSON.svelte';
|
|
29
|
+
export { default as MapVelocity } from './components/map/MapVelocity.svelte';
|
|
30
|
+
export type { Column, DeviceStatus, TableAction } from './components/Table/types.js';
|
package/dist/index.js
CHANGED
|
@@ -21,3 +21,9 @@ export { default as Illustration } from './components/Illustration/Illustration.
|
|
|
21
21
|
export { default as IllustrationLibrary } from './components/Illustration/IllustrationLibrary.svelte';
|
|
22
22
|
export { default as DatePicker } from './components/inputs/DatePicker/DatePicker.svelte';
|
|
23
23
|
export { default as Dropdown } from './components/inputs/Dropdown/Dropdown.svelte';
|
|
24
|
+
export { default as Map } from './components/map/Map.svelte';
|
|
25
|
+
export { default as MapMarker } from './components/map/MapMarker.svelte';
|
|
26
|
+
export { default as MapMarkerGroup } from './components/map/MapMarkerGroup.svelte';
|
|
27
|
+
export { default as MapGeoJSON } from './components/map/MapGeoJSON.svelte';
|
|
28
|
+
export { default as MapTopoJSON } from './components/map/MapTopoJSON.svelte';
|
|
29
|
+
export { default as MapVelocity } from './components/map/MapVelocity.svelte';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Create and set the map context store (call from Map.svelte).
|
|
3
|
+
* Store value is a Leaflet map instance (or null before ready / after destroy).
|
|
4
|
+
*/
|
|
5
|
+
export declare function createMapContext(): import("svelte/store").Writable<null>;
|
|
6
|
+
/**
|
|
7
|
+
* Get the map context store (call from layer components).
|
|
8
|
+
* @returns {import('svelte/store').Writable<any>}
|
|
9
|
+
*/
|
|
10
|
+
export declare function useMapContext(): {};
|
|
11
|
+
/**
|
|
12
|
+
* Create and set the cluster context (call from MapMarkerGroup.svelte).
|
|
13
|
+
*/
|
|
14
|
+
export declare function createClusterContext(): import("svelte/store").Writable<null>;
|
|
15
|
+
/**
|
|
16
|
+
* Get the cluster context store (call from MapMarker.svelte).
|
|
17
|
+
* @returns {import('svelte/store').Writable<any> | null}
|
|
18
|
+
*/
|
|
19
|
+
export declare function useClusterContext(): {} | null;
|
|
20
|
+
/**
|
|
21
|
+
* Set marker item context (call from MapMarker.svelte).
|
|
22
|
+
*/
|
|
23
|
+
export declare function setMarkerItemContext(item: any): void;
|
|
24
|
+
/**
|
|
25
|
+
* Get marker item context (call from snippet inside MapMarker).
|
|
26
|
+
*/
|
|
27
|
+
export declare function useMarkerItemContext(): {} | null;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { getContext, setContext } from 'svelte';
|
|
2
|
+
import { writable } from 'svelte/store';
|
|
3
|
+
const MAP_CONTEXT_KEY = Symbol('mertani.leaflet.map');
|
|
4
|
+
const CLUSTER_CONTEXT_KEY = Symbol('mertani.leaflet.cluster');
|
|
5
|
+
const MARKER_ITEM_CONTEXT_KEY = Symbol('mertani.leaflet.marker.item');
|
|
6
|
+
/**
|
|
7
|
+
* Create and set the map context store (call from Map.svelte).
|
|
8
|
+
* Store value is a Leaflet map instance (or null before ready / after destroy).
|
|
9
|
+
*/
|
|
10
|
+
export function createMapContext() {
|
|
11
|
+
const store = writable(null);
|
|
12
|
+
setContext(MAP_CONTEXT_KEY, store);
|
|
13
|
+
return store;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Get the map context store (call from layer components).
|
|
17
|
+
* @returns {import('svelte/store').Writable<any>}
|
|
18
|
+
*/
|
|
19
|
+
export function useMapContext() {
|
|
20
|
+
const store = getContext(MAP_CONTEXT_KEY);
|
|
21
|
+
if (!store) {
|
|
22
|
+
throw new Error('Map context not found. Make sure this component is used inside <Map>...</Map>.');
|
|
23
|
+
}
|
|
24
|
+
return store;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Create and set the cluster context (call from MapMarkerGroup.svelte).
|
|
28
|
+
*/
|
|
29
|
+
export function createClusterContext() {
|
|
30
|
+
const store = writable(null);
|
|
31
|
+
setContext(CLUSTER_CONTEXT_KEY, store);
|
|
32
|
+
return store;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Get the cluster context store (call from MapMarker.svelte).
|
|
36
|
+
* @returns {import('svelte/store').Writable<any> | null}
|
|
37
|
+
*/
|
|
38
|
+
export function useClusterContext() {
|
|
39
|
+
return getContext(CLUSTER_CONTEXT_KEY) || null;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Set marker item context (call from MapMarker.svelte).
|
|
43
|
+
*/
|
|
44
|
+
export function setMarkerItemContext(item) {
|
|
45
|
+
setContext(MARKER_ITEM_CONTEXT_KEY, item);
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Get marker item context (call from snippet inside MapMarker).
|
|
49
|
+
*/
|
|
50
|
+
export function useMarkerItemContext() {
|
|
51
|
+
return getContext(MARKER_ITEM_CONTEXT_KEY) || null;
|
|
52
|
+
}
|