support [lng, lat] as well as {lng, lat}

MIERUNE · Nov 19, 2024 · 6480312 · 6480312
1 parent 37215b4
commit 6480312
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 39 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -3,13 +3,11 @@
 Close #0
 
 ### What I did
-
 <!-- Please describe the motivation behind this PR and the changes it introduces. -->
 
 -
 
 ### Notes
-
 <!-- If manual testing is required, please describe the procedure. -->
 
 None
diff --git a/README.md b/README.md
@@ -2,14 +2,22 @@
 
 ![NPM Version](https://img.shields.io/npm/v/svelte-maplibre-gl)
 
-Svelte wrapper for MapLibre GL JS (supports Svlete 5+ only)
+[Svelte](https://svelte.dev/) library for using [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) as reactive components.
 
 ⚠️ This project is currently in the early stages of development. Features and APIs are subject to change.
 
 Documentaion and Examples: https://svelte-maplibre-gl.pages.dev/examples/
 
 License: MIT or Apache 2.0
 
+## Installation
+
+Using `svelte-maplibre-gl` requires `svelte >= 5.0.0`.
+
+```bash
+npm install --dev svelte-maplibre-gl
+```
+
 ## License
 
 Licensed under the [MIT License](./LICENSE-MIT.txt) or the [Apache License 2.0](./LICENSE-APACHE.txt), at your option.
@@ -26,6 +34,8 @@ Everyone is welcomed to contribute to this project! There are many ways to suppo
 - TODO: Add core contributors
 - And [all contributors](https://github.com/MIERUNE/svelte-maplibre-gl/graphs/contributors)
 
+Supported by [MIERUNE Inc.](https://www.mierune.co.jp/)
+
 ## Acknowledgements
 
 This project `svelte-maplibre-gl` is inspired by the efforts and innovations of the following libraries:

diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
 	"name": "svelte-maplibre-gl",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"license": "(MIT OR Apache-2.0)",
-	"description": "Svelte wrapper for Maplibre GL JS",
+	"description": "Svelte library for using MapLibre GL JS as reactive components",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",

diff --git a/src/content/examples/animate-images/AnimateImages.svelte b/src/content/examples/animate-images/AnimateImages.svelte
@@ -18,7 +18,7 @@
 	class="h-[60vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
 	zoom={5}
-	center={{ lng: -76, lat: 43 }}
+	center={[-76, 43]}
 >
 	<GlobeControl />
 	<ImageSource

diff --git a/src/content/examples/complex/Complex.svelte b/src/content/examples/complex/Complex.svelte
@@ -43,7 +43,7 @@
 	let lineColor = $state('#ff00dd');
 	let lineWidth = $state(1.5);
 	let circleRadius = $state(3);
-	let center = $state({ lng: 137.3543, lat: 37.062 });
+	let center = $state([137.3543, 37.062]);
 	let zoom = $state(6.0);
 	let pitch = $state(0);
 	let bearing = $state(0);
@@ -122,7 +122,7 @@
 </div>
 <div class="flex items-center gap-x-4 text-sm">
 	<pre
-		class="my-1 grow">{`lat: ${center.lat.toFixed(3)}, lng: ${center.lng.toFixed(3)}, z: ${zoom.toFixed(1)}, pitch: ${pitch.toFixed(1)}, bearing: ${bearing.toFixed(1)}`}</pre>
+		class="my-1 grow">{`lat: ${center[1].toFixed(3)}, lng: ${center[0].toFixed(3)}, z: ${zoom.toFixed(1)}, pitch: ${pitch.toFixed(1)}, bearing: ${bearing.toFixed(1)}`}</pre>
 	<pre class="my-1 grow">marker: {`${markerLnglat.lat.toFixed(3)}, ${markerLnglat.lng.toFixed(3)}`}</pre>
 	<label>
 		z:

diff --git a/src/lib/maplibre/controls/FullScreenControl.svelte b/src/lib/maplibre/controls/FullScreenControl.svelte
@@ -5,7 +5,7 @@
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';
 	import { resetEventListener } from '../utils.js';
-	import type { Listener, Event } from '../common.js';
+	import type { Listener, Event } from '../types.js';
 
 	interface Props extends maplibregl.FullscreenControlOptions {
 		position?: maplibregl.ControlPosition;

diff --git a/src/lib/maplibre/controls/GeolocateControl.svelte b/src/lib/maplibre/controls/GeolocateControl.svelte
@@ -5,7 +5,7 @@
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';
 	import { resetEventListener } from '../utils.js';
-	import type { Listener, Event } from '../common.js';
+	import type { Listener, Event } from '../types.js';
 
 	type GeolocateEvent = Event<maplibregl.GeolocateControl> & Object;
 

diff --git a/src/lib/maplibre/map/MapLibre.svelte b/src/lib/maplibre/map/MapLibre.svelte
@@ -2,11 +2,10 @@
 	// https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
 
 	import { onDestroy, type Snippet } from 'svelte';
-	import maplibregl from 'maplibre-gl';
+	import maplibregl, { type LngLatLike } from 'maplibre-gl';
 	import 'maplibre-gl/dist/maplibre-gl.css';
 	import { prepareMapContext } from '../contexts.svelte.js';
-	import type { LngLat } from '../common.js';
-	import { resetEventListener } from '../utils.js';
+	import { formatLngLat, resetEventListener } from '../utils.js';
 
 	type MapEventProps = {
 		[K in keyof maplibregl.MapEventType as `on${K}`]?: (ev: maplibregl.MapEventType[K]) => void;
@@ -16,7 +15,7 @@
 		map?: maplibregl.Map;
 		class?: string;
 		inlineStyle?: string;
-		center?: LngLat;
+		center?: LngLatLike;
 		padding?: maplibregl.PaddingOptions;
 		fov?: number;
 
@@ -207,7 +206,12 @@
 		map.on('move', (ev) => {
 			if (map) {
 				const tr = map.transform;
-				if (!center || center.lat !== tr.center.lat || center.lng !== tr.center.lng) {
+				if (center) {
+					const _center = maplibregl.LngLat.convert(center);
+					if (_center.lat !== tr.center.lat || _center.lng !== tr.center.lng) {
+						center = formatLngLat(center, tr.center);
+					}
+				} else {
 					center = tr.center;
 				}
 				if (tr.zoom !== zoom) {
@@ -361,9 +365,12 @@
 				return Math.abs(a - b) > 1e-14;
 			}
 
-			if (center && (notAlmostEqual(tr.center.lat, center.lat) || notAlmostEqual(tr.center.lng, center.lng))) {
-				jumpTo.center = center;
-				changed = true;
+			if (center) {
+				const _center = maplibregl.LngLat.convert(center);
+				if (notAlmostEqual(tr.center.lat, _center.lat) || notAlmostEqual(tr.center.lng, _center.lng)) {
+					jumpTo.center = center;
+					changed = true;
+				}
 			}
 			if (zoom !== undefined && notAlmostEqual(tr.zoom, zoom)) {
 				jumpTo.zoom = zoom;

diff --git a/src/lib/maplibre/markers/Marker.svelte b/src/lib/maplibre/markers/Marker.svelte
@@ -4,11 +4,10 @@
 	import { onDestroy, type Snippet } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext, prepareMarkerContext } from '../contexts.svelte.js';
-	import type { LngLat } from '../common.js';
-	import { resetEventListener } from '../utils.js';
+	import { formatLngLat, resetEventListener } from '../utils.js';
 
 	interface Props extends Omit<maplibregl.MarkerOptions, 'className'> {
-		lnglat: LngLat;
+		lnglat: maplibregl.LngLatLike;
 		class?: string;
 		/** HTML content of the marker */
 		content?: Snippet;
@@ -77,11 +76,11 @@
 		marker = new maplibregl.Marker(options);
 		markerCtx.marker = marker;
 
-		marker.setLngLat($state.snapshot(lnglat)).addTo(mapCtx.map);
+		marker.setLngLat($state.snapshot(lnglat) as maplibregl.LngLatLike).addTo(mapCtx.map);
 
 		marker.on('drag', (e) => {
 			if (marker) {
-				lnglat = marker.getLngLat();
+				lnglat = formatLngLat(lnglat, marker.getLngLat());
 			}
 			ondrag?.(e);
 		});
@@ -101,10 +100,7 @@
 
 	$effect(() => {
 		if (lnglat && !firstRun) {
-			const prevLnglat = marker?.getLngLat();
-			if (prevLnglat && (prevLnglat.lat !== lnglat.lat || prevLnglat.lng !== lnglat.lng)) {
-				marker?.setLngLat(lnglat);
-			}
+			marker?.setLngLat(lnglat);
 		}
 	});
 

diff --git a/src/lib/maplibre/markers/Popup.svelte b/src/lib/maplibre/markers/Popup.svelte
@@ -4,11 +4,10 @@
 	import { onDestroy, type Snippet } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext, getMarkerContext } from '../contexts.svelte.js';
-	import type { LngLat } from '../common.js';
 	import { resetEventListener } from '../utils.js';
 
 	interface Props extends Omit<maplibregl.PopupOptions, 'className'> {
-		lnglat?: LngLat;
+		lnglat?: maplibregl.LngLatLike;
 		class?: string;
 		/** HTML content of the popup */
 		content?: Snippet;
@@ -22,7 +21,7 @@
 	let container = $state<HTMLElement | null>(null);
 
 	let {
-		lnglat = $bindable(),
+		lnglat,
 		class: className = undefined,
 		offset,
 		closeButton,
@@ -87,10 +86,7 @@
 
 	$effect(() => {
 		if (lnglat && !firstRun) {
-			const prevLnglat = popup?.getLngLat();
-			if (prevLnglat && (prevLnglat.lat !== lnglat.lat || prevLnglat.lng !== lnglat.lng)) {
-				popup?.setLngLat(lnglat);
-			}
+			popup?.setLngLat(lnglat);
 		}
 	});
 

diff --git a/src/lib/maplibre/common.ts → src/lib/maplibre/types.ts b/src/lib/maplibre/common.ts → src/lib/maplibre/types.ts
@@ -1,8 +1,3 @@
-export type LngLat = {
-	lng: number;
-	lat: number;
-};
-
 export type Listener<T> = (event: T) => void;
 
 export type Event<T, N = string> = {

diff --git a/src/lib/maplibre/utils.ts b/src/lib/maplibre/utils.ts
@@ -53,3 +53,13 @@ export function resetLayerEventListener(
 		}
 	};
 }
+
+export function formatLngLat(target: maplibregl.LngLatLike, lnglat: maplibregl.LngLat): maplibregl.LngLatLike {
+	if (Array.isArray(target)) {
+		return [lnglat.lng, lnglat.lat];
+	} else if ('lon' in target) {
+		return { lon: lnglat.lng, lat: lnglat.lat };
+	} else {
+		return { lng: lnglat.lng, lat: lnglat.lat };
+	}
+}