Fix PMTiles Map Rendering using MapLibre GL

Cargo.toml

@@ -23,7 +23,7 @@ serde = { version = "1.0.228", features = ["derive"] }
 serde_json = "1.0"
 tokio = { version = "1.50.0", features = ["full"] }
 tower = "0.5.3"
-tower-http = { version = "0.6.8", features = ["fs"] }
+tower-http = { version = "0.6.8", features = ["cors", "fs"] }
 redb = "2.1"
 pathfinding = "4.3.0"
 

src/main/resources/static/app.js

@@ -1,13 +1,61 @@
 // 1. Initialize the Leaflet map FIRST
-var map = L.map('map').setView([14.5995, 120.9842], 13); // Manila Default
-
-// 2. Construct a strict Absolute URL for the Web Worker
-const mapUrl = `${window.location.origin}/map.pmtiles`;
-
-// 3. Add the Vector PMTiles layer
-protomapsL.leafletLayer({
-    url: mapUrl,
-    theme: 'light'
+var map = L.map('map').setView([43.7696, 11.2558], 13); // Firenze Default
+
+// 2. Setup PMTiles MapLibre protocol
+const protocol = new pmtiles.Protocol();
+maplibregl.addProtocol("pmtiles", protocol.tile);
+
+// 3. Construct URL
+const mapUrl = `pmtiles://${window.location.origin}/map.pmtiles`;
+
+// 4. Add the Vector layer via MapLibre GL Leaflet
+const glLayer = L.maplibreGL({
+    style: {
+        version: 8,
+        glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
+        sources: {
+            "protomaps": {
+                type: "vector",
+                url: mapUrl,
+                attribution: '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>'
+            }
+        },
+        layers: [
+            {
+                id: "background",
+                type: "background",
+                paint: { "background-color": "#e0dfdf" }
+            },
+            {
+                id: "earth",
+                type: "fill",
+                source: "protomaps",
+                "source-layer": "earth",
+                paint: { "fill-color": "#e0dfdf" }
+            },
+            {
+                id: "water",
+                type: "fill",
+                source: "protomaps",
+                "source-layer": "water",
+                paint: { "fill-color": "#a2c1df" }
+            },
+            {
+                id: "roads",
+                type: "line",
+                source: "protomaps",
+                "source-layer": "roads",
+                paint: { "line-color": "#ffffff", "line-width": 2 }
+            },
+            {
+                id: "buildings",
+                type: "fill",
+                source: "protomaps",
+                "source-layer": "buildings",
+                paint: { "fill-color": "#cccccc" }
+            }
+        ]
+    }
 }).addTo(map);
 
 var layers = {

src/main/resources/static/index.html

@@ -160,7 +160,10 @@ <h3>Route Waypoints</h3>
 </div>
 
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    <script src="https://unpkg.com/protomaps-leaflet@5.1.0/dist/protomaps-leaflet.js"></script>
+    <script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.22/leaflet-maplibre-gl.js"></script>
+    <script src="https://unpkg.com/pmtiles@3.2.1/dist/pmtiles.js"></script>
     <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
 <script src="app.js"></script>
 </body>

src/server.rs

@@ -10,6 +10,7 @@ use rust_embed::RustEmbed;
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
 use tokio::net::TcpListener;
+use tower_http::cors::{CorsLayer, Any};
 use tower_http::services::ServeFile;
 use crate::graph::{GraphData, SecurityAsset};
 use geo::{Polygon, Point, Coord};
@@ -122,6 +123,12 @@ pub async fn run_server(graph_path: String, pmtiles_path: String, bind: String)
     // ServeFile correctly implements HTTP Range requests natively which map.pmtiles requires.
     let serve_pmtiles = ServeFile::new(pmtiles_path);
 
+    let cors = CorsLayer::new()
+        .allow_origin(Any)
+        .allow_methods(Any)
+        .allow_headers(vec![header::RANGE, header::ACCEPT, header::CONTENT_TYPE])
+        .expose_headers(vec![header::CONTENT_LENGTH, header::CONTENT_RANGE, header::CONTENT_TYPE]);
+
     let app = Router::new()
         .route("/", get(index_handler))
         .route("/api/security-assets", get(get_assets).post(post_asset))
@@ -132,6 +139,7 @@ pub async fn run_server(graph_path: String, pmtiles_path: String, bind: String)
         .route("/api/map-bounds", get(get_map_bounds))
         .route("/map.pmtiles", axum::routing::get_service(serve_pmtiles))
         .route("/{*file}", get(static_handler))
+        .layer(cors)
         .with_state(state);
 
     println!("Listening on http://{}", bind);