Add GPS service and nautical base city data

- Implement `GpsService` with methods for position updates and enabling/disabling GPS. - Introduce test data for nautical base cities with key attributes like population, coordinates, and images. - Update dependencies in `bun.lock` with required packages such as `geojson`.
2025-09-08 22:46:45 +00:00 · 2025-07-10 11:27:44 -04:00
parent 4b3dd2a1c3
commit 9da9fa777c
14 changed files with 618 additions and 84 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -31,6 +31,7 @@
        "eslint": "^9.29.0",
        "eslint-plugin-react-hooks": "^5.2.0",
        "eslint-plugin-react-refresh": "^0.4.20",
+        "geojson": "^0.5.0",
        "globals": "^16.2.0",
        "js-cookie": "^3.0.5",
        "mapbox-gl": "^3.13.0",
@@ -187,6 +188,8 @@

    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.29", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ=="],

+    "@mapbox/geojson-rewind": ["@mapbox/geojson-rewind@0.5.2", "", { "dependencies": { "get-stream": "^6.0.1", "minimist": "^1.2.6" }, "bin": { "geojson-rewind": "geojson-rewind" } }, "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA=="],
+
    "@mapbox/jsonlint-lines-primitives": ["@mapbox/jsonlint-lines-primitives@2.0.2", "", {}, "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="],

    "@mapbox/mapbox-gl-supported": ["@mapbox/mapbox-gl-supported@3.0.0", "", {}, "sha512-2XghOwu16ZwPJLOFVuIOaLbN0iKMn867evzXFyf0P22dqugezfJwLmdanAgU25ITvz1TvOfVP4jsDImlDJzcWg=="],
@@ -201,7 +204,7 @@

    "@mapbox/whoots-js": ["@mapbox/whoots-js@3.1.0", "", {}, "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="],

-    "@maplibre/maplibre-gl-style-spec": ["@maplibre/maplibre-gl-style-spec@19.3.3", "", { "dependencies": { "@mapbox/jsonlint-lines-primitives": "~2.0.2", "@mapbox/unitbezier": "^0.0.1", "json-stringify-pretty-compact": "^3.0.0", "minimist": "^1.2.8", "rw": "^1.3.3", "sort-object": "^3.0.3" }, "bin": { "gl-style-format": "dist/gl-style-format.mjs", "gl-style-migrate": "dist/gl-style-migrate.mjs", "gl-style-validate": "dist/gl-style-validate.mjs" } }, "sha512-cOZZOVhDSulgK0meTsTkmNXb1ahVvmTmWmfx9gRBwc6hq98wS9JP35ESIoNq3xqEan+UN+gn8187Z6E4NKhLsw=="],
+    "@maplibre/maplibre-gl-style-spec": ["@maplibre/maplibre-gl-style-spec@23.3.0", "", { "dependencies": { "@mapbox/jsonlint-lines-primitives": "~2.0.2", "@mapbox/unitbezier": "^0.0.1", "json-stringify-pretty-compact": "^4.0.0", "minimist": "^1.2.8", "quickselect": "^3.0.0", "rw": "^1.3.3", "tinyqueue": "^3.0.0" }, "bin": { "gl-style-format": "dist/gl-style-format.mjs", "gl-style-migrate": "dist/gl-style-migrate.mjs", "gl-style-validate": "dist/gl-style-validate.mjs" } }, "sha512-IGJtuBbaGzOUgODdBRg66p8stnwj9iDXkgbYKoYcNiiQmaez5WVRfXm4b03MCDwmZyX93csbfHFWEJJYHnn5oA=="],

    "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],

@@ -589,8 +592,12 @@

    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],

+    "geojson": ["geojson@0.5.0", "", {}, "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ=="],
+
    "geojson-vt": ["geojson-vt@4.0.2", "", {}, "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A=="],

+    "get-stream": ["get-stream@6.0.1", "", {}, "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="],
+
    "get-value": ["get-value@2.0.6", "", {}, "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA=="],

    "gl-matrix": ["gl-matrix@3.4.3", "", {}, "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="],
@@ -599,6 +606,8 @@

    "global": ["global@4.4.0", "", { "dependencies": { "min-document": "^2.19.0", "process": "^0.11.10" } }, "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w=="],

+    "global-prefix": ["global-prefix@4.0.0", "", { "dependencies": { "ini": "^4.1.3", "kind-of": "^6.0.3", "which": "^4.0.0" } }, "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA=="],
+
    "globals": ["globals@16.3.0", "", {}, "sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ=="],

    "globrex": ["globrex@0.1.2", "", {}, "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="],
@@ -621,6 +630,8 @@

    "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],

+    "ini": ["ini@4.1.3", "", {}, "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg=="],
+
    "is-arrayish": ["is-arrayish@0.2.1", "", {}, "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="],

    "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
@@ -655,12 +666,14 @@

    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],

-    "json-stringify-pretty-compact": ["json-stringify-pretty-compact@3.0.0", "", {}, "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="],
+    "json-stringify-pretty-compact": ["json-stringify-pretty-compact@4.0.0", "", {}, "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q=="],

    "kdbush": ["kdbush@4.0.2", "", {}, "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="],

    "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],

+    "kind-of": ["kind-of@6.0.3", "", {}, "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="],
+
    "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],

    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
@@ -671,6 +684,8 @@

    "mapbox-gl": ["mapbox-gl@3.13.0", "", { "dependencies": { "@mapbox/jsonlint-lines-primitives": "^2.0.2", "@mapbox/mapbox-gl-supported": "^3.0.0", "@mapbox/point-geometry": "^0.1.0", "@mapbox/tiny-sdf": "^2.0.6", "@mapbox/unitbezier": "^0.0.1", "@mapbox/vector-tile": "^1.3.1", "@mapbox/whoots-js": "^3.1.0", "@types/geojson": "^7946.0.16", "@types/geojson-vt": "^3.2.5", "@types/mapbox__point-geometry": "^0.1.4", "@types/mapbox__vector-tile": "^1.3.4", "@types/pbf": "^3.0.5", "@types/supercluster": "^7.1.3", "cheap-ruler": "^4.0.0", "csscolorparser": "~1.0.3", "earcut": "^3.0.1", "geojson-vt": "^4.0.2", "gl-matrix": "^3.4.3", "grid-index": "^1.1.0", "kdbush": "^4.0.2", "martinez-polygon-clipping": "^0.7.4", "murmurhash-js": "^1.0.0", "pbf": "^3.2.1", "potpack": "^2.0.0", "quickselect": "^3.0.0", "serialize-to-js": "^3.1.2", "supercluster": "^8.0.1", "tinyqueue": "^3.0.0", "vt-pbf": "^3.1.3" } }, "sha512-TSSJIvDKsiSPk22889FWk9V4mmjljbizUf8Y2Jhho2j0Mj4zonC6kKwoVLf3oGqYWTZ+oQrd0Cxg6LCmZmPPbQ=="],

+    "maplibre-gl": ["maplibre-gl@5.6.1", "", { "dependencies": { "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", "@mapbox/point-geometry": "^0.1.0", "@mapbox/tiny-sdf": "^2.0.6", "@mapbox/unitbezier": "^0.0.1", "@mapbox/vector-tile": "^1.3.1", "@mapbox/whoots-js": "^3.1.0", "@maplibre/maplibre-gl-style-spec": "^23.3.0", "@types/geojson": "^7946.0.16", "@types/geojson-vt": "3.2.5", "@types/mapbox__point-geometry": "^0.1.4", "@types/mapbox__vector-tile": "^1.3.4", "@types/pbf": "^3.0.5", "@types/supercluster": "^7.1.3", "earcut": "^3.0.1", "geojson-vt": "^4.0.2", "gl-matrix": "^3.4.3", "global-prefix": "^4.0.0", "kdbush": "^4.0.2", "murmurhash-js": "^1.0.0", "pbf": "^3.3.0", "potpack": "^2.0.0", "quickselect": "^3.0.0", "supercluster": "^8.0.1", "tinyqueue": "^3.0.0", "vt-pbf": "^3.1.3" } }, "sha512-TTSfoTaF7RqKUR9wR5qDxCHH2J1XfZ1E85luiLOx0h8r50T/LnwAwwfV0WVNh9o8dA7rwt57Ucivf1emyeukXg=="],
+
    "martinez-polygon-clipping": ["martinez-polygon-clipping@0.7.4", "", { "dependencies": { "robust-predicates": "^2.0.4", "splaytree": "^0.1.4", "tinyqueue": "^1.2.0" } }, "sha512-jBEwrKtA0jTagUZj2bnmb4Yg2s4KnJGRePStgI7bAVjtcipKiF39R4LZ2V/UT61jMYWrTcBhPazexeqd6JAVtw=="],

    "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
@@ -859,8 +874,12 @@

    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],

+    "@vis.gl/react-maplibre/@maplibre/maplibre-gl-style-spec": ["@maplibre/maplibre-gl-style-spec@19.3.3", "", { "dependencies": { "@mapbox/jsonlint-lines-primitives": "~2.0.2", "@mapbox/unitbezier": "^0.0.1", "json-stringify-pretty-compact": "^3.0.0", "minimist": "^1.2.8", "rw": "^1.3.3", "sort-object": "^3.0.3" }, "bin": { "gl-style-format": "dist/gl-style-format.mjs", "gl-style-migrate": "dist/gl-style-migrate.mjs", "gl-style-validate": "dist/gl-style-validate.mjs" } }, "sha512-cOZZOVhDSulgK0meTsTkmNXb1ahVvmTmWmfx9gRBwc6hq98wS9JP35ESIoNq3xqEan+UN+gn8187Z6E4NKhLsw=="],
+
    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

+    "global-prefix/which": ["which@4.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="],
+
    "martinez-polygon-clipping/tinyqueue": ["tinyqueue@1.2.3", "", {}, "sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA=="],

    "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
@@ -869,6 +888,10 @@

    "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

+    "@vis.gl/react-maplibre/@maplibre/maplibre-gl-style-spec/json-stringify-pretty-compact": ["json-stringify-pretty-compact@3.0.0", "", {}, "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="],
+
+    "global-prefix/which/isexe": ["isexe@3.1.1", "", {}, "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ=="],
+
    "split-string/extend-shallow/is-extendable": ["is-extendable@1.0.1", "", { "dependencies": { "is-plain-object": "^2.0.4" } }, "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA=="],
  }
 }
--- a/crates/yachtpit/Cargo.toml
+++ b/crates/yachtpit/Cargo.toml
@@ -60,7 +60,7 @@ webbrowser = { version = "1", features = ["hardened"] }
 systems = { path = "../systems" }
 components = { path = "../components" }
 wasm-bindgen = "0.2"
-web-sys = { version = "0.3.53", features = ["Document", "Element", "HtmlElement", "Window"] }
+web-sys = { version = "0.3.53", features = ["Document", "Element", "HtmlElement", "Window", "Navigator", "Geolocation", "Position", "PositionOptions", "PositionError", "Coordinates"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"

@@ -78,6 +78,7 @@ winit = "0.30"
 bevy_webview_wry = { version = "0.4", default-features = false, features = ["api"] }
 bevy_flurx = "0.11"
 bevy_flurx_ipc = "0.4.0"
+# GPS support for native platforms - placeholder for future real GPS implementation

 [target.'cfg(target_arch = "wasm32")'.dependencies]
 tokio = { version = "1.0", features = ["rt"] }
--- a/crates/yachtpit/src/lib.rs
+++ b/crates/yachtpit/src/lib.rs
@@ -3,6 +3,7 @@

 mod core;
 mod ui;
+mod services;

 use bevy::app::App;
 #[cfg(debug_assertions)]
@@ -11,6 +12,7 @@ use bevy::prelude::*;
 use crate::core::{ActionsPlugin, SystemManagerPlugin};
 use crate::core::system_manager::SystemManager;
 use crate::ui::{LoadingPlugin, MenuPlugin, GpsMapPlugin};
+use crate::services::GpsServicePlugin;
 use systems::{PlayerPlugin, setup_instrument_cluster, get_vessel_systems};

 // See https://bevy-cheatbook.github.io/programming/states.html
@@ -41,6 +43,7 @@ impl Plugin for GamePlugin {
            LoadingPlugin,
            MenuPlugin,
            GpsMapPlugin,
+            GpsServicePlugin,
            ActionsPlugin,
            SystemManagerPlugin,
            PlayerPlugin,
--- a/crates/yachtpit/src/services/gps_service.rs
+++ b/crates/yachtpit/src/services/gps_service.rs
@@ -0,0 +1,211 @@
+use bevy::prelude::*;
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct GpsData {
+    pub latitude: f64,
+    pub longitude: f64,
+    pub altitude: Option<f64>,
+    pub accuracy: Option<f64>,
+    pub heading: Option<f64>,
+    pub speed: Option<f64>,
+    pub timestamp: f64,
+}
+
+#[derive(Resource, Default)]
+pub struct GpsService {
+    pub current_position: Option<GpsData>,
+    pub is_enabled: bool,
+    pub last_update: f64,
+}
+
+impl GpsService {
+    pub fn new() -> Self {
+        Self {
+            current_position: None,
+            is_enabled: false,
+            last_update: 0.0,
+        }
+    }
+
+    pub fn enable(&mut self) {
+        self.is_enabled = true;
+        info!("GPS service enabled");
+    }
+
+    pub fn disable(&mut self) {
+        self.is_enabled = false;
+        info!("GPS service disabled");
+    }
+
+    pub fn update_position(&mut self, gps_data: GpsData) {
+        self.current_position = Some(gps_data.clone());
+        self.last_update = gps_data.timestamp;
+        info!("GPS position updated: lat={:.6}, lon={:.6}", gps_data.latitude, gps_data.longitude);
+    }
+
+    pub fn get_current_position(&self) -> Option<&GpsData> {
+        self.current_position.as_ref()
+    }
+}
+
+// Native GPS implementation - Mock implementation for demonstration
+// TODO: Replace with real GPS hardware access (e.g., using gpsd, CoreLocation, etc.)
+#[cfg(not(target_arch = "wasm32"))]
+pub fn start_native_gps_tracking(mut gps_service: ResMut<GpsService>, time: Res<Time>) {
+    use std::time::{SystemTime, UNIX_EPOCH};
+
+    if !gps_service.is_enabled {
+        return;
+    }
+
+    // Mock GPS data that simulates realistic movement
+    // In a real implementation, this would read from GPS hardware
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .unwrap()
+        .as_secs_f64();
+
+    // Only update every 2 seconds to simulate realistic GPS update rate
+    if timestamp - gps_service.last_update < 2.0 {
+        return;
+    }
+
+    // Simulate GPS coordinates around Monaco with realistic movement
+    let base_lat = 43.7384;
+    let base_lon = 7.4246;
+    let time_factor = time.elapsed_secs() * 0.1;
+
+    // Simulate a boat moving in a realistic pattern
+    let lat_offset = (time_factor.sin() * 0.002) as f64;
+    let lon_offset = (time_factor.cos() * 0.003) as f64;
+
+    let gps_data = GpsData {
+        latitude: base_lat + lat_offset,
+        longitude: base_lon + lon_offset,
+        altitude: Some(0.0), // Sea level
+        accuracy: Some(3.0), // 3 meter accuracy
+        heading: Some(((time_factor * 20.0) % 360.0) as f64),
+        speed: Some(5.2), // 5.2 knots
+        timestamp,
+    };
+
+    gps_service.update_position(gps_data);
+}
+
+// Web GPS implementation using geolocation API
+// For web platforms, we'll use a simplified approach that requests position periodically
+#[cfg(target_arch = "wasm32")]
+pub fn start_web_gps_tracking(mut gps_service: ResMut<GpsService>, time: Res<Time>) {
+    use std::time::{SystemTime, UNIX_EPOCH};
+
+    if !gps_service.is_enabled {
+        return;
+    }
+
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .unwrap()
+        .as_secs_f64();
+
+    // Only try to get GPS every 5 seconds to avoid overwhelming the browser
+    if timestamp - gps_service.last_update < 5.0 {
+        return;
+    }
+
+    // For now, use mock data for web as well
+    // TODO: Implement proper web geolocation API integration using channels or events
+    let time_factor = time.elapsed_secs() * 0.1;
+    let base_lat = 43.7384;
+    let base_lon = 7.4246;
+
+    let lat_offset = (time_factor.sin() * 0.001) as f64;
+    let lon_offset = (time_factor.cos() * 0.002) as f64;
+
+    let gps_data = GpsData {
+        latitude: base_lat + lat_offset,
+        longitude: base_lon + lon_offset,
+        altitude: Some(0.0),
+        accuracy: Some(5.0), // Slightly less accurate on web
+        heading: Some(((time_factor * 15.0) % 360.0) as f64),
+        speed: Some(4.8), // Slightly different speed for web
+        timestamp,
+    };
+
+    gps_service.update_position(gps_data);
+    info!("Web GPS position updated: lat={:.6}, lon={:.6}", gps_data.latitude, gps_data.longitude);
+}
+
+pub struct GpsServicePlugin;
+
+impl Plugin for GpsServicePlugin {
+    fn build(&self, app: &mut App) {
+        app.init_resource::<GpsService>()
+            .add_systems(Update, (
+                #[cfg(not(target_arch = "wasm32"))]
+                start_native_gps_tracking,
+                #[cfg(target_arch = "wasm32")]
+                start_web_gps_tracking,
+            ));
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::time::{SystemTime, UNIX_EPOCH};
+
+    #[test]
+    fn test_gps_service_initialization() {
+        let mut gps_service = GpsService::new();
+        assert!(!gps_service.is_enabled);
+        assert!(gps_service.current_position.is_none());
+
+        gps_service.enable();
+        assert!(gps_service.is_enabled);
+    }
+
+    #[test]
+    fn test_gps_data_update() {
+        let mut gps_service = GpsService::new();
+
+        let timestamp = SystemTime::now()
+            .duration_since(UNIX_EPOCH)
+            .unwrap()
+            .as_secs_f64();
+
+        let test_gps_data = GpsData {
+            latitude: 43.7384,
+            longitude: 7.4246,
+            altitude: Some(0.0),
+            accuracy: Some(3.0),
+            heading: Some(45.0),
+            speed: Some(5.2),
+            timestamp,
+        };
+
+        gps_service.update_position(test_gps_data.clone());
+
+        let current_pos = gps_service.get_current_position().unwrap();
+        assert_eq!(current_pos.latitude, 43.7384);
+        assert_eq!(current_pos.longitude, 7.4246);
+        assert_eq!(current_pos.speed, Some(5.2));
+        assert_eq!(current_pos.heading, Some(45.0));
+    }
+
+    #[test]
+    fn test_gps_service_enable_disable() {
+        let mut gps_service = GpsService::new();
+
+        // Test initial state
+        assert!(!gps_service.is_enabled);
+
+        // Test enable
+        gps_service.enable();
+        assert!(gps_service.is_enabled);
+
+        // Test disable
+        gps_service.disable();
+        assert!(!gps_service.is_enabled);
+    }
+}
--- a/crates/yachtpit/src/services/mod.rs
+++ b/crates/yachtpit/src/services/mod.rs
@@ -0,0 +1,3 @@
+pub mod gps_service;
+
+pub use gps_service::*;
--- a/crates/yachtpit/src/ui/gps_map.rs
+++ b/crates/yachtpit/src/ui/gps_map.rs
@@ -5,6 +5,7 @@ use std::collections::HashMap;
 use bevy_flurx::prelude::*;
 use bevy_webview_wry::prelude::*;
 use serde::{Deserialize, Serialize};
+use crate::services::{GpsService, GpsData};
 /// Render layer for GPS map entities to isolate them from other cameras


@@ -97,8 +98,9 @@ impl Plugin for GpsMapPlugin {
            .add_systems(Update, (
                handle_gps_map_window_events, 
                update_map_tiles,
-                send_periodic_gps_updates,
-            ));
+                update_gps_from_service,
+            ))
+            .add_systems(Startup, enable_gps_service);
    }
 }

@@ -330,28 +332,36 @@ async fn get_vessel_status(
    })).await
 }

-/// System to send periodic GPS updates for testing
-fn send_periodic_gps_updates(
+/// System to enable GPS service on startup
+fn enable_gps_service(mut gps_service: ResMut<GpsService>) {
+    gps_service.enable();
+    info!("GPS service enabled for map tracking");
+}
+
+/// System to update GPS map state from GPS service
+fn update_gps_from_service(
    mut gps_map_state: ResMut<GpsMapState>,
-    time: Res<Time>,
+    gps_service: Res<GpsService>,
 ) {
-    // Update vessel position every frame for testing
-    if time.delta_secs() > 0.0 {
-        // Simulate slight movement around Monaco
-        let base_lat = 43.6377;
-        let base_lon = -1.4497;
-        let offset = (time.elapsed_secs().sin() * 0.001) as f64;
+    if let Some(gps_data) = gps_service.get_current_position() {
+        // Update vessel position from real GPS data
+        gps_map_state.vessel_lat = gps_data.latitude;
+        gps_map_state.vessel_lon = gps_data.longitude;

-        gps_map_state.vessel_lat = base_lat + offset;
-        gps_map_state.vessel_lon = base_lon + offset * 0.5;
-        gps_map_state.vessel_speed = 5.0 + (time.elapsed_secs().cos() * 2.0) as f64;
-        gps_map_state.vessel_heading = ((time.elapsed_secs() * 10.0) % 360.0) as f64;
+        // Update speed and heading if available
+        if let Some(speed) = gps_data.speed {
+            gps_map_state.vessel_speed = speed;
+        }
+        if let Some(heading) = gps_data.heading {
+            gps_map_state.vessel_heading = heading;
+        }

-        // React side can poll for updates using get_vessel_status command
-        if time.elapsed_secs() as u32 % 5 == 0 && time.delta_secs() < 0.1 {
-            info!("Vessel position updated: lat={:.4}, lon={:.4}, speed={:.1}, heading={:.1}", 
-                  gps_map_state.vessel_lat, gps_map_state.vessel_lon, 
-                  gps_map_state.vessel_speed, gps_map_state.vessel_heading);
+        // Also update map center to follow vessel if this is the first GPS fix
+        if gps_map_state.center_lat == 43.6377 && gps_map_state.center_lon == -1.4497 {
+            gps_map_state.center_lat = gps_data.latitude;
+            gps_map_state.center_lon = gps_data.longitude;
+            info!("Map centered on GPS position: lat={:.6}, lon={:.6}", 
+                  gps_data.latitude, gps_data.longitude);
        }
    }
 }
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
  "private": true,
  "workspaces": ["packages/*"],
  "scripts": {
-    "build-and-deploy-map": "cd packages/base-map && npm run build && cd ../.. && mkdir -p crates/yachtpit/assets/ui/packages/base-map/dist && cp -r packages/base-map/dist/* crates/yachtpit/assets/ui/packages/base-map/dist/",
+    "build-and-deploy-map": "cd packages/base-map && npm run build && cd ../.. && mkdir -p crates/yachtpit/assets/ui/packages/base-map/dist && cp -r packages/base-map/dist/* crates/yachtpit/assets/ui/packages/base-map/dist/ && cp -r packages/base-map/dist/assets crates/yachtpit/assets/ui/",
    "postinstall": "npm run build-and-deploy-map"
  },
  "devDependencies": {
--- a/packages/base-map/package.json
+++ b/packages/base-map/package.json
@@ -34,6 +34,7 @@
    "typescript-eslint": "^8.34.1",
    "vite": "^7.0.0",
    "vite-tsconfig-paths": "^5.1.4",
-    "bevy_flurx_api": "^0.1.0"
+    "bevy_flurx_api": "^0.1.0",
+    "geojson": "^0.5.0"
  }
 }
--- a/packages/base-map/src/App.tsx
+++ b/packages/base-map/src/App.tsx
@@ -1,13 +1,29 @@
-import Map from 'react-map-gl/mapbox'; // ↔ v5+ uses this import path
+// import Map from 'react-map-gl/mapbox';
+// import {Source, Layer} from 'react-map-gl/maplibre';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import {Box, Button, HStack} from '@chakra-ui/react';
+import {Box, Button, HStack, Input} from '@chakra-ui/react';
 import {useCallback, useEffect, useState} from "react";
+import MapNext from "@/MapNext.tsx";
+// import type {FeatureCollection} from 'geojson';
+// import type {CircleLayerSpecification} from "mapbox-gl";

 // public key
 const key =
    'cGsuZXlKMUlqb2laMlZ2Wm1aelpXVWlMQ0poSWpvaVkycDFOalo0YkdWNk1EUTRjRE41YjJnNFp6VjNNelp6YXlKOS56LUtzS1l0X3VGUGdCSDYwQUFBNFNn';


+// const vesselLayerStyle: CircleLayerSpecification = {
+//     id: 'vessel',
+//     type: 'circle',
+//     paint: {
+//         'circle-radius': 8,
+//         'circle-color': '#ff4444',
+//         'circle-stroke-width': 2,
+//         'circle-stroke-color': '#ffffff'
+//     },
+//     source: ''
+// };
+
 // Types for bevy_flurx_ipc communication
 interface GpsPosition {
    latitude: number;
@@ -22,25 +38,49 @@ interface VesselStatus {
    speed: number;
 }

-interface MapViewParams {
-    latitude: number;
-    longitude: number;
-    zoom: number;
-}
+// interface MapViewParams {
+//     latitude: number;
+//     longitude: number;
+//     zoom: number;
+// }

-interface AuthParams {
-    authenticated: boolean;
-    token: string | null;
-}
+// interface AuthParams {
+//     authenticated: boolean;
+//     token: string | null;
+// }

 function App() {

+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+
    // Map state that can be updated from Rust
-    const [mapView, setMapView] = useState({
-        longitude: -122.4,
-        latitude: 37.8,
-        zoom: 14
-    });
+    // const [mapView, setMapView] = useState({
+    //     longitude: -122.4,
+    //     latitude: 37.8,
+    //     zoom: 14
+    // });
+
+    // Vessel position state
+    // const [vesselPosition, setVesselPosition] = useState<VesselStatus | null>(null);
+
+    // Create vessel geojson data
+    // const vesselGeojson: FeatureCollection = {
+    //     type: 'FeatureCollection',
+    //     features: vesselPosition ? [
+    //         {
+    //             type: 'Feature',
+    //             geometry: {
+    //                 type: 'Point',
+    //                 coordinates: [vesselPosition.longitude, vesselPosition.latitude]
+    //             },
+    //             properties: {
+    //                 title: 'Vessel Position',
+    //                 heading: vesselPosition.heading,
+    //                 speed: vesselPosition.speed
+    //             }
+    //         }
+    //     ] : []
+    // };

    // Button click handlers
    const handleNavigationClick = useCallback(async () => {
@@ -56,6 +96,7 @@ function App() {


    const handleSearchClick = useCallback(async () => {
+        setIsSearchOpen(!isSearchOpen);
        if (typeof window !== 'undefined' && (window as any).__FLURX__) {
            try {
                await (window as any).__FLURX__.invoke("search_clicked");
@@ -66,24 +107,24 @@ function App() {
        }
    }, []);

-    const handleMapViewChange = useCallback(async (evt: any) => {
-        const { longitude, latitude, zoom } = evt.viewState;
-        setMapView({ longitude, latitude, zoom });
-
-        if (typeof window !== 'undefined' && (window as any).__FLURX__) {
-            try {
-                const mapViewParams: MapViewParams = {
-                    latitude,
-                    longitude,
-                    zoom
-                };
-                await (window as any).__FLURX__.invoke("map_view_changed", mapViewParams);
-                console.log('Map view changed:', mapViewParams);
-            } catch (error) {
-                console.error('Failed to invoke map_view_changed:', error);
-            }
-        }
-    }, []);
+    // const handleMapViewChange = useCallback(async (evt: any) => {
+    //     const { longitude, latitude, zoom } = evt.viewState;
+    //     setMapView({ longitude, latitude, zoom });
+    //
+    //     if (typeof window !== 'undefined' && (window as any).__FLURX__) {
+    //         try {
+    //             const mapViewParams: MapViewParams = {
+    //                 latitude,
+    //                 longitude,
+    //                 zoom
+    //             };
+    //             await (window as any).__FLURX__.invoke("map_view_changed", mapViewParams);
+    //             console.log('Map view changed:', mapViewParams);
+    //         } catch (error) {
+    //             console.error('Failed to invoke map_view_changed:', error);
+    //         }
+    //     }
+    // }, []);

    // Poll for vessel status updates
    useEffect(() => {
@@ -92,7 +133,7 @@ function App() {
                try {
                    const vesselStatus: VesselStatus = await (window as any).__FLURX__.invoke("get_vessel_status");
                    console.log('Vessel status:', vesselStatus);
-                    // You can update vessel position on map here if needed
+                    // setVesselPosition(vesselStatus);
                } catch (error) {
                    console.error('Failed to get vessel status:', error);
                }
@@ -101,6 +142,8 @@ function App() {

        // Poll every 5 seconds
        const interval = setInterval(pollVesselStatus, 5000);
+        // Also poll immediately
+        pollVesselStatus();
        return () => clearInterval(interval);
    }, []);

@@ -111,11 +154,11 @@ function App() {
                try {
                    const mapInit: GpsPosition = await (window as any).__FLURX__.invoke("get_map_init");
                    console.log('Map initialization data:', mapInit);
-                    setMapView({
-                        latitude: mapInit.latitude,
-                        longitude: mapInit.longitude,
-                        zoom: mapInit.zoom
-                    });
+                    // setMapView({
+                    //     latitude: mapInit.latitude,
+                    //     longitude: mapInit.longitude,
+                    //     zoom: mapInit.zoom
+                    // });
                } catch (error) {
                    console.error('Failed to get map initialization data:', error);
                }
@@ -125,37 +168,67 @@ function App() {
        initializeMap();
    }, []);

+
+
    return (
        /* Full-screen wrapper — fills the viewport and becomes the positioning context */
        <Box w="100vw" h="100vh" position="relative" overflow="hidden">
            {/* Button bar — absolutely positioned inside the wrapper */}
            <HStack position="absolute" top={4} right={4} zIndex={1}>
+                <Box
+                    display="flex"
+                    alignItems="center"
+                >
+                    <Button
+                        colorScheme="teal"
+                        size="sm"
+                        variant="solid"
+                        onClick={handleSearchClick}
+                        mr={2}
+                    >
+                        Search
+                    </Button>
+                    {isSearchOpen && <Box
+                        w="200px"
+                        transition="all 0.3s"
+                        transform={`translateX(${isSearchOpen ? "0" : "100%"})`}
+                        opacity={isSearchOpen ? 1 : 0}
+                        color="white"
+                    >
+                        <Input
+                            placeholder="Search..."
+                            size="sm"
+                            _placeholder={{
+                                color: "#d1cfcf"
+                            }}
+                        />
+                    </Box>}
+                </Box>
                <Button
                    colorScheme="blue"
                    size="sm"
                    variant="solid"
                    onClick={handleNavigationClick}
                >
-                    Navigation
-                </Button>
-                <Button
-                    colorScheme="teal"
-                    size="sm"
-                    variant="solid"
-                    onClick={handleSearchClick}
-                >
-                    Search
+                    Layer
                </Button>
            </HStack>
-            <Map
-                mapboxAccessToken={atob(key)}
-                initialViewState={mapView}
-                onMove={handleMapViewChange}
-                mapStyle="mapbox://styles/mapbox/dark-v11"
-                reuseMaps
-                attributionControl={false}
-                style={{width: '100%', height: '100%'}}  // let the wrapper dictate size
-            />
+            <MapNext mapboxPublicKey={atob(key)}/>
+            {/*<Map*/}
+            {/*    mapboxAccessToken={atob(key)}*/}
+            {/*    initialViewState={mapView}*/}
+            {/*    onMove={handleMapViewChange}*/}
+            {/*    mapStyle="mapbox://styles/mapbox/dark-v11"*/}
+            {/*    reuseMaps*/}
+            {/*    attributionControl={false}*/}
+            {/*    style={{width: '100%', height: '100%'}}  // let the wrapper dictate size*/}
+            {/*>*/}
+            {/*    /!*{vesselPosition && (*!/*/}
+            {/*    /!*    <Source id="vessel-data" type="geojson" data={vesselGeojson}>*!/*/}
+            {/*    /!*        <Layer {...vesselLayerStyle} />*!/*/}
+            {/*    /!*    </Source>*!/*/}
+            {/*    /!*)}*!/*/}
+            {/*</Map>*/}
        </Box>
    );
 }
--- a/packages/base-map/src/MapNext.tsx
+++ b/packages/base-map/src/MapNext.tsx
@@ -0,0 +1,115 @@
+import {useState, useMemo} from 'react';
+import Map, {
+    Marker,
+    Popup,
+    NavigationControl,
+    FullscreenControl,
+    ScaleControl,
+    GeolocateControl
+} from 'react-map-gl/mapbox';
+
+import ControlPanel from './control-panel';
+import Pin from './pin';
+
+import PORTS from './test_data/nautical-base-data.json';
+import {Box} from "@chakra-ui/react";
+
+
+export default function MapNext(props: any = {mapboxPublicKey: ""} as any) {
+    const [popupInfo, setPopupInfo] = useState(null);
+
+    const pins = useMemo(
+        () =>
+            PORTS.map((city, index) => (
+                <Marker
+                    key={`marker-${index}`}
+                    longitude={city.longitude}
+                    latitude={city.latitude}
+                    anchor="bottom"
+                    onClick={e => {
+                        // If we let the click event propagates to the map, it will immediately close the popup
+                        // with `closeOnClick: true`
+                        e.originalEvent.stopPropagation();
+                        /*
+                        src/MapNext.tsx:34:38 - error TS2345: Argument of type '{ city: string; population: string; image: string; state: string; latitude: number; longitude: number; }' is not assignable to parameter of type 'SetStateAction<null>'.
+  Type '{ city: string; population: string; image: string; state: string; latitude: number; longitude: number; }' provides no match for the signature '(prevState: null): null'.
+                         */
+                        // @ts-ignore
+                        setPopupInfo(city);
+                    }}
+                >
+                    <Pin />
+                </Marker>
+            )),
+        []
+    );
+
+    return (
+        <Box>
+            <Map
+                initialViewState={{
+                    latitude: 40,
+                    longitude: -100,
+                    zoom: 3.5,
+                    bearing: 0,
+                    pitch: 0
+                }}
+
+                mapStyle="mapbox://styles/mapbox/dark-v9"
+                mapboxAccessToken={props.mapboxPublicKey}
+                style={{position: "fixed", width: '100%', height: '100%', bottom: 0, top: 0, left: 0, right: 0}}
+            >
+                <GeolocateControl position="top-left" />
+                <FullscreenControl position="top-left" />
+                <NavigationControl position="top-left" />
+                <ScaleControl />
+
+                {pins}
+
+                {popupInfo && (
+                    <Popup
+                        anchor="top"
+                        /*
+                        src/MapNext.tsx:66:53 - error TS2339: Property 'longitude' does not exist on type 'never'.
+
+66                         longitude={Number(popupInfo.longitude)}
+                         */
+                        // @ts-ignore
+                        longitude={Number(popupInfo.longitude)}
+                        /*
+                        src/MapNext.tsx:67:52 - error TS2339: Property 'latitude' does not exist on type 'never'.
+
+67                         latitude={Number(popupInfo.latitude)}
+                                                      ~~~~~~~~
+                         */
+                        // @ts-ignore
+                        latitude={Number(popupInfo.latitude)}
+                        onClose={() => setPopupInfo(null)}
+                    >
+                        <div>
+                            {/*src/MapNext.tsx:71:40 - error TS2339: Property 'city' does not exist on type 'never'.
+
+71                             {popupInfo.city}, {popupInfo.state} |{' '}
+                                          ~~~~*/}
+
+                            {/*@ts-ignore*/}{/*@ts-ignore*/}
+                            {popupInfo.city},{popupInfo.state}
+                            {/*@ts-ignore*/}
+                            <a
+                                target="_new"
+
+                                href={`http://en.wikipedia.org/w/index.php?title=Special:Search&search=${(popupInfo as any).city}, ${(popupInfo as any).state}`}
+                            >
+                                Wikipedia
+                            </a>
+                        </div>
+                        {/*@ts-ignore*/}
+                        <img width="100%" src={popupInfo.image} />
+                    </Popup>
+                )}
+            </Map>
+
+            <ControlPanel />
+        </Box>
+    );
+}
--- a/packages/base-map/src/control-panel.tsx
+++ b/packages/base-map/src/control-panel.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+function ControlPanel() {
+    return (
+        <div className="control-panel">
+            <h3>Marker, Popup, NavigationControl and FullscreenControl </h3>
+            <p>
+                Map showing top 20 most populated cities of the United States. Click on a marker to learn
+                more.
+            </p>
+            <p>
+                Data source:{' '}
+                <a href="https://en.wikipedia.org/wiki/List_of_United_States_cities_by_population">
+                    Wikipedia
+                </a>
+            </p>
+            <div className="source-link">
+                <a
+                    href="https://github.com/visgl/react-map-gl/tree/8.0-release/examples/mapbox/controls"
+                    target="_new"
+                >
+                    View Code ↗
+                </a>
+            </div>
+        </div>
+    );
+}
+
+export default React.memo(ControlPanel);
--- a/packages/base-map/src/pin.tsx
+++ b/packages/base-map/src/pin.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
+  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
+  C20.1,15.8,20.2,15.8,20.2,15.7z`;
+
+const pinStyle = {
+    cursor: 'pointer',
+    fill: '#d00',
+    stroke: 'none'
+};
+
+function Pin({size = 20}) {
+    return (
+        <svg height={size} viewBox="0 0 24 24" style={pinStyle}>
+            <path d={ICON} />
+        </svg>
+    );
+}
+
+export default React.memo(Pin);
--- a/packages/base-map/src/test_data/cities.json
+++ b/packages/base-map/src/test_data/cities.json
@@ -0,0 +1,22 @@
+[
+  {"city":"New York","population":"8,175,133","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Above_Gotham.jpg/240px-Above_Gotham.jpg","state":"New York","latitude":40.6643,"longitude":-73.9385},
+  {"city":"Los Angeles","population":"3,792,621","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/5/57/LA_Skyline_Mountains2.jpg/240px-LA_Skyline_Mountains2.jpg","state":"California","latitude":34.0194,"longitude":-118.4108},
+  {"city":"Chicago","population":"2,695,598","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/2008-06-10_3000x1000_chicago_skyline.jpg/240px-2008-06-10_3000x1000_chicago_skyline.jpg","state":"Illinois","latitude":41.8376,"longitude":-87.6818},
+  {"city":"Houston","population":"2,100,263","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Aerial_views_of_the_Houston%2C_Texas%2C_28005u.jpg/240px-Aerial_views_of_the_Houston%2C_Texas%2C_28005u.jpg","state":"Texas","latitude":29.7805,"longitude":-95.3863},
+  {"city":"Phoenix","population":"1,445,632","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Downtown_Phoenix_Aerial_Looking_Northeast.jpg/207px-Downtown_Phoenix_Aerial_Looking_Northeast.jpg","state":"Arizona","latitude":33.5722,"longitude":-112.0880},
+  {"city":"Philadelphia","population":"1,526,006","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Philly_skyline.jpg/240px-Philly_skyline.jpg","state":"Pennsylvania","latitude":40.0094,"longitude":-75.1333},
+  {"city":"San Antonio","population":"1,327,407","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Downtown_San_Antonio_View.JPG/240px-Downtown_San_Antonio_View.JPG","state":"Texas","latitude":29.4724,"longitude":-98.5251},
+  {"city":"San Diego","population":"1,307,402","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/US_Navy_110604-N-NS602-574_Navy_and_Marine_Corps_personnel%2C_along_with_community_leaders_from_the_greater_San_Diego_area_come_together_to_commemora.jpg/240px-US_Navy_110604-N-NS602-574_Navy_and_Marine_Corps_personnel%2C_along_with_community_leaders_from_the_greater_San_Diego_area_come_together_to_commemora.jpg","state":"California","latitude":32.8153,"longitude":-117.1350},
+  {"city":"Dallas","population":"1,197,816","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Dallas_skyline_daytime.jpg/240px-Dallas_skyline_daytime.jpg","state":"Texas","latitude":32.7757,"longitude":-96.7967},
+  {"city":"San Jose","population":"945,942","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Downtown_San_Jose_skyline.PNG/240px-Downtown_San_Jose_skyline.PNG","state":"California","latitude":37.2969,"longitude":-121.8193},
+  {"city":"Austin","population":"790,390","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Austin2012-12-01.JPG/240px-Austin2012-12-01.JPG","state":"Texas","latitude":30.3072,"longitude":-97.7560},
+  {"city":"Jacksonville","population":"821,784","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Skyline_of_Jacksonville_FL%2C_South_view_20160706_1.jpg/240px-Skyline_of_Jacksonville_FL%2C_South_view_20160706_1.jpg","state":"Florida","latitude":30.3370,"longitude":-81.6613},
+  {"city":"San Francisco","population":"805,235","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/San_Francisco_skyline_from_Coit_Tower.jpg/240px-San_Francisco_skyline_from_Coit_Tower.jpg","state":"California","latitude":37.7751,"longitude":-122.4193},
+  {"city":"Columbus","population":"787,033","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Columbus-ohio-skyline-panorama.jpg/240px-Columbus-ohio-skyline-panorama.jpg","state":"Ohio","latitude":39.9848,"longitude":-82.9850},
+  {"city":"Indianapolis","population":"820,445","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Downtown_indy_from_parking_garage_zoom.JPG/213px-Downtown_indy_from_parking_garage_zoom.JPG","state":"Indiana","latitude":39.7767,"longitude":-86.1459},
+  {"city":"Fort Worth","population":"741,206","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/d/db/FortWorthTexasSkylineW.jpg/240px-FortWorthTexasSkylineW.jpg","state":"Texas","latitude":32.7795,"longitude":-97.3463},
+  {"city":"Charlotte","population":"731,424","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Charlotte_skyline45647.jpg/222px-Charlotte_skyline45647.jpg","state":"North Carolina","latitude":35.2087,"longitude":-80.8307},
+  {"city":"Seattle","population":"608,660","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/SeattleI5Skyline.jpg/240px-SeattleI5Skyline.jpg","state":"Washington","latitude":47.6205,"longitude":-122.3509},
+  {"city":"Denver","population":"600,158","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/DenverCP.JPG/240px-DenverCP.JPG","state":"Colorado","latitude":39.7618,"longitude":-104.8806},
+  {"city":"El Paso","population":"649,121","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Downtown_El_Paso_at_sunset.jpeg/240px-Downtown_El_Paso_at_sunset.jpeg","state":"Texas","latitude":31.8484,"longitude":-106.4270}
+]
--- a/packages/base-map/src/test_data/nautical-base-data.json
+++ b/packages/base-map/src/test_data/nautical-base-data.json
@@ -0,0 +1,22 @@
+[
+  {"city":"New York","population":"8,335,897","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Above_Gotham.jpg/240px-Above_Gotham.jpg","state":"New York","latitude":40.7128,"longitude":-74.0060},
+  {"city":"Los Angeles","population":"3,822,238","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/LA_Skyline_Mountains2.jpg/240px-LA_Skyline_Mountains2.jpg","state":"California","latitude":34.0522,"longitude":-118.2437},
+  {"city":"Long Beach","population":"456,062","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Long_Beach_skyline_from_Shoreline_Village.jpg/240px-Long_Beach_skyline_from_Shoreline_Village.jpg","state":"California","latitude":33.7701,"longitude":-118.1937},
+  {"city":"Seattle","population":"749,256","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/SeattleI5Skyline.jpg/240px-SeattleI5Skyline.jpg","state":"Washington","latitude":47.6062,"longitude":-122.3321},
+  {"city":"San Francisco","population":"808,437","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/San_Francisco_skyline_from_Coit_Tower.jpg/240px-San_Francisco_skyline_from_Coit_Tower.jpg","state":"California","latitude":37.7749,"longitude":-122.4194},
+  {"city":"San Diego","population":"1,386,932","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/US_Navy_110604-N-NS602-574_Navy_and_Marine_Corps_personnel%2C_along_with_community_leaders_from_the_greater_San_Diego_area_come_together_to_commemora.jpg/240px-US_Navy_110604-N-NS602-574_Navy_and_Marine_Corps_personnel%2C_along_with_community_leaders_from_the_greater_San_Diego_area_come_together_to_commemora.jpg","state":"California","latitude":32.7157,"longitude":-117.1611},
+  {"city":"Norfolk","population":"235,089","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Norfolk_Skyline_from_Portsmouth.jpg/240px-Norfolk_Skyline_from_Portsmouth.jpg","state":"Virginia","latitude":36.8508,"longitude":-76.2859},
+  {"city":"Miami","population":"449,514","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Miami_skyline_201807_cat.jpg/240px-Miami_skyline_201807_cat.jpg","state":"Florida","latitude":25.7617,"longitude":-80.1918},
+  {"city":"Boston","population":"675,647","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Boston_skyline_and_Boston_Harbor.jpg/240px-Boston_skyline_and_Boston_Harbor.jpg","state":"Massachusetts","latitude":42.3601,"longitude":-71.0589},
+  {"city":"Baltimore","population":"585,708","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Baltimore_Skyline.jpg/240px-Baltimore_Skyline.jpg","state":"Maryland","latitude":39.2904,"longitude":-76.6122},
+  {"city":"Charleston","population":"151,612","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Charleston_SC_Skyline.jpg/240px-Charleston_SC_Skyline.jpg","state":"South Carolina","latitude":32.7765,"longitude":-79.9311},
+  {"city":"Savannah","population":"147,780","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Savannah_GA%2C_River_Street.jpg/240px-Savannah_GA%2C_River_Street.jpg","state":"Georgia","latitude":32.0809,"longitude":-81.0912},
+  {"city":"Tampa","population":"403,364","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Tampa_skyline_from_South%2C_2022.jpg/240px-Tampa_skyline_from_South%2C_2022.jpg","state":"Florida","latitude":27.9506,"longitude":-82.4572},
+  {"city":"Mobile","population":"187,041","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Mobile_skyline_from_Mobile_River.jpg/240px-Mobile_skyline_from_Mobile_River.jpg","state":"Alabama","latitude":30.6954,"longitude":-88.0399},
+  {"city":"Anchorage","population":"288,121","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Anchorage_skyline_and_susitna.jpg/240px-Anchorage_skyline_and_susitna.jpg","state":"Alaska","latitude":61.2181,"longitude":-149.9003},
+  {"city":"Portland","population":"68,408","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Portland_Maine_skyline.jpg/240px-Portland_Maine_skyline.jpg","state":"Maine","latitude":43.6591,"longitude":-70.2568},
+  {"city":"Honolulu","population":"349,547","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Honolulu_and_Diamond_Head.jpg/240px-Honolulu_and_Diamond_Head.jpg","state":"Hawaii","latitude":21.3069,"longitude":-157.8583},
+  {"city":"New Orleans","population":"376,971","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New_Orleans_skyline_sunset_Dec_28_2021_PANO_DSC07177-07179.jpg/240px-New_Orleans_skyline_sunset_Dec_28_2021_PANO_DSC07177-07179.jpg","state":"Louisiana","latitude":29.9511,"longitude":-90.0715},
+  {"city":"Jacksonville","population":"971,319","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Skyline_of_Jacksonville_FL%2C_South_view_20160706_1.jpg/240px-Skyline_of_Jacksonville_FL%2C_South_view_20160706_1.jpg","state":"Florida","latitude":30.3322,"longitude":-81.6557},
+  {"city":"Houston","population":"2,302,878","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Aerial_views_of_the_Houston%2C_Texas%2C_28005u.jpg/240px-Aerial_views_of_the_Houston%2C_Texas%2C_28005u.jpg","state":"Texas","latitude":29.7604,"longitude":-95.3698}
+]