From 359dd1b649ea767ad8e668e7855c97adb4e789bd Mon Sep 17 00:00:00 2001
From: tyronechrisharris <142608718+tyronechrisharris@users.noreply.github.com>
Date: Fri, 20 Mar 2026 15:27:24 +0000
Subject: [PATCH] Fix PMTiles map rendering using maplibre-gl and add CORS
headers
- Removed `protomaps-leaflet` in favor of `maplibre-gl` and `@maplibre/maplibre-gl-leaflet` for robust PMTiles rendering.
- Defined explicit vector layer painting rules (earth, water, roads, buildings) in `app.js` to ensure visual data renders.
- Updated `index.html` with necessary maplibre-gl CSS and JS dependencies.
- Added a `CorsLayer` in the backend using `tower-http` to properly handle HTTP Range requests for PMTiles byte-serving.
- Updated default coordinates to Firenze.
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
Cargo.toml | 2 +-
src/main/resources/static/app.js | 66 ++++++++++++++++++++++++----
src/main/resources/static/index.html | 5 ++-
src/server.rs | 8 ++++
4 files changed, 70 insertions(+), 11 deletions(-)
diff --git a/Cargo.toml b/Cargo.toml
index 76ac668..786ab6a 100644
--- a/Cargo.toml
+++ b/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"
diff --git a/src/main/resources/static/app.js b/src/main/resources/static/app.js
index 40665b5..81ed0d5 100644
--- a/src/main/resources/static/app.js
+++ b/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: 'Protomaps © OpenStreetMap'
+ }
+ },
+ 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 = {
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index c3c43e1..b473ec7 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -160,7 +160,10 @@ Route Waypoints
-
+
+
+
+
diff --git a/src/server.rs b/src/server.rs
index 82197c9..9a106d1 100644
--- a/src/server.rs
+++ b/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);