@smartnet360/svelte-components 0.0.62 → 0.0.63
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.
|
@@ -16,8 +16,10 @@
|
|
|
16
16
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
17
17
|
|
|
18
18
|
interface Props {
|
|
19
|
+
/** External Mapbox map instance (if provided, no new map will be created) */
|
|
20
|
+
externalMap?: MapboxMap;
|
|
19
21
|
/** Mapbox access token */
|
|
20
|
-
accessToken
|
|
22
|
+
accessToken?: string;
|
|
21
23
|
/** Map style URL or style object (default: streets-v12) */
|
|
22
24
|
style?: string | StyleSpecification;
|
|
23
25
|
/** Initial map center [lng, lat] */
|
|
@@ -45,6 +47,7 @@
|
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
let {
|
|
50
|
+
externalMap,
|
|
48
51
|
accessToken,
|
|
49
52
|
style = 'mapbox://styles/mapbox/streets-v12',
|
|
50
53
|
center = [0, 0],
|
|
@@ -64,10 +67,30 @@
|
|
|
64
67
|
const mapStore = createMapStore();
|
|
65
68
|
setContext(MAP_CONTEXT_KEY, mapStore);
|
|
66
69
|
|
|
67
|
-
let mapContainer
|
|
70
|
+
let mapContainer = $state<HTMLDivElement>();
|
|
68
71
|
let map: MapboxMap | null = null;
|
|
72
|
+
let isExternalMap = false;
|
|
69
73
|
|
|
70
74
|
onMount(() => {
|
|
75
|
+
// If external map is provided, use it instead of creating a new one
|
|
76
|
+
if (externalMap) {
|
|
77
|
+
map = externalMap;
|
|
78
|
+
isExternalMap = true;
|
|
79
|
+
|
|
80
|
+
// Set the map in store immediately
|
|
81
|
+
mapStore.set(map);
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Otherwise, create a new map instance
|
|
86
|
+
if (!accessToken) {
|
|
87
|
+
throw new Error('MapboxProvider: accessToken is required when not using externalMap');
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
if (!mapContainer) {
|
|
91
|
+
throw new Error('MapboxProvider: map container not found');
|
|
92
|
+
}
|
|
93
|
+
|
|
71
94
|
// Set access token
|
|
72
95
|
mapboxgl.accessToken = accessToken;
|
|
73
96
|
|
|
@@ -117,7 +140,8 @@
|
|
|
117
140
|
});
|
|
118
141
|
|
|
119
142
|
onDestroy(() => {
|
|
120
|
-
if (map)
|
|
143
|
+
// Only remove the map if we created it (not an external map)
|
|
144
|
+
if (map && !isExternalMap) {
|
|
121
145
|
map.remove();
|
|
122
146
|
map = null;
|
|
123
147
|
}
|
|
@@ -125,7 +149,9 @@
|
|
|
125
149
|
});
|
|
126
150
|
</script>
|
|
127
151
|
|
|
128
|
-
|
|
152
|
+
{#if !externalMap}
|
|
153
|
+
<div bind:this={mapContainer} class="mapbox-container {className}"></div>
|
|
154
|
+
{/if}
|
|
129
155
|
|
|
130
156
|
{#if children}
|
|
131
157
|
{@render children()}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import { type StyleSpecification } from 'mapbox-gl';
|
|
1
|
+
import { type Map as MapboxMap, type StyleSpecification } from 'mapbox-gl';
|
|
2
2
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
3
3
|
interface Props {
|
|
4
|
+
/** External Mapbox map instance (if provided, no new map will be created) */
|
|
5
|
+
externalMap?: MapboxMap;
|
|
4
6
|
/** Mapbox access token */
|
|
5
|
-
accessToken
|
|
7
|
+
accessToken?: string;
|
|
6
8
|
/** Map style URL or style object (default: streets-v12) */
|
|
7
9
|
style?: string | StyleSpecification;
|
|
8
10
|
/** Initial map center [lng, lat] */
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
const BASE_LAT = 37.7749;
|
|
11
11
|
const BASE_LNG = -122.4194;
|
|
12
12
|
// Grid parameters for distributing sites
|
|
13
|
-
const NUM_SITES =
|
|
13
|
+
const NUM_SITES = 10;
|
|
14
14
|
const GRID_SIZE = 10; // 10×10 grid
|
|
15
15
|
const LAT_SPACING = 0.01; // ~1.1 km spacing
|
|
16
16
|
const LNG_SPACING = 0.015; // ~1.1 km spacing (adjusted for longitude)
|