Sync center property.

.github/workflows/build.yml

@@ -15,3 +15,4 @@ jobs:
       - run: yarn install --immutable
       - run: yarn build
       - run: yarn lint
+      - run: yarn test

lib/components/map.component.ts

@@ -36,6 +36,7 @@ import {
 } from "@/lib/types";
 import { defaults } from "@/lib/defaults";
 import { MapLib } from "@/lib/lib/map.lib";
+import { isLngLatEqual } from "@/lib/lib/lng_lat";
 import { Position } from "@/lib/components/controls/position.enum";
 import mitt from "mitt";
 import { registerMap } from "@/lib/lib/mapRegistry";
@@ -384,8 +385,14 @@ export default defineComponent({
     "map:pitch",
     "map:pitchend",
     "map:wheel",
-    // Zoom property updated
-    "update:zoom"
+    /**
+     * Center property updated
+     */
+    "update:center",
+    /**
+     * Zoom property updated
+     */
+    "update:zoom",
   ],
   slots: Object as SlotsType<{ default: {} }>,
   setup(props, ctx) {
@@ -430,7 +437,7 @@ export default defineComponent({
     watch(
       () => props.center,
       (v) => {
-        if (v) {
+        if (v && !isLngLatEqual(v, map.value?.getCenter())) {
           map.value?.setCenter(v);
         }
       },
@@ -584,6 +591,9 @@ export default defineComponent({
       );
       map.value.once("styledata", onStyleReady);
       map.value.on("load", boundMapEvents.get("__load") as any);
+      map.value.on("moveend", () => {
+        ctx.emit("update:center", map.value!.getCenter());
+      });
       map.value.on("zoomend", () => {
         ctx.emit("update:zoom", map.value!.getZoom());
       });

lib/lib/lng_lat.ts

@@ -0,0 +1,11 @@
+import { type LngLatLike, LngLat } from "maplibre-gl";
+
+export function isLngLatEqual(one: LngLatLike, two: LngLatLike): Boolean {
+  const firstPosition = LngLat.convert(one);
+  const secondPosition = LngLat.convert(two);
+
+  return (
+    firstPosition.lng === secondPosition.lng &&
+    firstPosition.lat === secondPosition.lat
+  );
+}

package.json

@@ -41,26 +41,30 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "lint": "eslint lib",
-    "prettier": "prettier lib --write"
+    "prettier": "prettier lib --write",
+    "test": "jest"
   },
   "devDependencies": {
     "@babel/types": "^7.23.9",
     "@eslint/js": "^9.1.1",
     "@indoorequal/vue-maplibre-gl": "workspace:^",
     "@mdi/js": "^7.4.47",
     "@types/geojson": "^7946.0.14",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.11.17",
     "@vitejs/plugin-vue": "^5.0.4",
     "eslint": "^9.1.1",
     "eslint-plugin-vue": "^9.25.0",
     "geojson": "^0.5.0",
     "glob": "^10.3.12",
     "globals": "^15.0.0",
+    "jest": "^29.7.0",
     "maplibre-gl": "^3.0.0",
     "mitt": "^3.0.1",
     "modular-maptiler-sdk": "^1.0.16",
     "prettier": "3.2.5",
     "sass": "^1.71.0",
+    "ts-jest": "^29.1.2",
     "typescript": "^5.3.3",
     "typescript-eslint": "^7.7.1",
     "vite": "^5.1.3",

test/lat_lon.test.ts

@@ -0,0 +1,26 @@
+import {
+  type LngLatLike,
+  LngLat,
+} from "maplibre-gl";
+import { isLngLatEqual } from '../lib/lib/lng_lat';
+
+const tests: [LngLatLike, LngLatLike, Boolean][] = [
+  [[-122, 37], [-122, 37], true],
+  [[-122, 37], new LngLat(-122, 37), true],
+  [[1, 37], [-122, 37], false],
+  [[-122, 1], [-122, 37], false],
+  [new LngLat(-122, 37), new LngLat(-122, 37), true],
+  [new LngLat(1, 37), new LngLat(-122, 37), false],
+  [new LngLat(-122, 1), new LngLat(-122, 37), false],
+  [{lon: -122, lat: 37}, {lon: -122, lat: 37}, true],
+  [{lon: 1, lat: 37}, {lon: -122, lat: 37}, false],
+  [{lng: -122, lat: 37}, {lng: -122, lat: 37}, true],
+  [{lng: 1, lat: 37}, {lng: -122, lat: 37}, false]
+];
+
+tests.forEach(([one, two, expected]) => {
+  test(`isLngLatEqual: ${one}/${two}`, () => {
+    const result = isLngLatEqual(one, two);
+    expect(result).toBe(expected);
+  });
+})

tsconfig.json

@@ -28,7 +28,8 @@
       "node",
       "vue",
       "geojson",
-      "maplibre-gl"
+      "maplibre-gl",
+      "jest"
     ]
   },
   "include"        : [