From 86d59b73460af6e62f552d6c45c7c8b5b6062c4a Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@users.noreply.github.com>
Date: Wed, 7 May 2025 10:56:59 -0700
Subject: [PATCH] force map view to be dark mode [#567] (#569)

* force map view to be dark mode [#567]

* nearest resampling for raster mode
* cleanup python deps

* formatting
---
 app/src/PageMap.tsx                     | 24 ++++++++++--------------
 python/rio-pmtiles/requirements-dev.txt |  1 -
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/src/PageMap.tsx b/app/src/PageMap.tsx
index c26a61e..efa16cb 100644
--- a/app/src/PageMap.tsx
+++ b/app/src/PageMap.tsx
@@ -116,10 +116,7 @@ function MapView(props: {
     if (archiveForProtocol) {
       protocol.add(archiveForProtocol);
     }
-    let flavor = "white";
-    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
-      flavor = "black";
-    }
+
     if (await tileset.isOverlay()) {
       setBasemap(true);
     }
@@ -198,7 +195,7 @@ function MapView(props: {
           },
           paint: {
             "text-color": colorForIdx(i),
-            "text-halo-color": flavor,
+            "text-halo-color": "black",
             "text-halo-width": 2,
           },
           filter: ["==", ["geometry-type"], "LineString"],
@@ -216,7 +213,7 @@ function MapView(props: {
           },
           paint: {
             "text-color": colorForIdx(i),
-            "text-halo-color": flavor,
+            "text-halo-color": "black",
             "text-halo-width": 2,
           },
           filter: ["==", ["geometry-type"], "Point"],
@@ -240,7 +237,7 @@ function MapView(props: {
           },
           paint: {
             "text-color": colorForIdx(i),
-            "text-halo-color": flavor,
+            "text-halo-color": "black",
             "text-halo-width": 2,
           },
           filter: ["==", ["geometry-type"], "Polygon"],
@@ -255,6 +252,9 @@ function MapView(props: {
         source: "tileset",
         id: "tileset_raster",
         type: "raster",
+        paint: {
+          "raster-resampling": "nearest",
+        },
       });
     }
   };
@@ -330,11 +330,6 @@ function MapView(props: {
       );
     }
 
-    let flavor = "white";
-    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
-      flavor = "black";
-    }
-
     map = new MaplibreMap({
       hash: "map",
       container: mapContainer,
@@ -343,7 +338,7 @@ function MapView(props: {
         version: 8,
         glyphs:
           "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
-        sprite: `https://protomaps.github.io/basemaps-assets/sprites/v4/${flavor}`,
+        sprite: "https://protomaps.github.io/basemaps-assets/sprites/v4/black",
         sources: {
           basemap: {
             type: "vector",
@@ -355,7 +350,7 @@ function MapView(props: {
               "Background © <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a>",
           },
         },
-        layers: layers("basemap", namedFlavor(flavor), { lang: "en" }).map(
+        layers: layers("basemap", namedFlavor("black"), { lang: "en" }).map(
           (l) => {
             if (!("layout" in l)) {
               l.layout = {};
@@ -504,6 +499,7 @@ function MapView(props: {
             classList={{
               "h-full": true,
               "flex-1": true,
+              "bg-gray-900": true,
               inspectFeatures: props.inspectFeatures(),
               frozen: frozen(),
             }}
diff --git a/python/rio-pmtiles/requirements-dev.txt b/python/rio-pmtiles/requirements-dev.txt
index ae65960..1f51bc3 100644
--- a/python/rio-pmtiles/requirements-dev.txt
+++ b/python/rio-pmtiles/requirements-dev.txt
@@ -10,5 +10,4 @@ coverage==4.5.1
 rasterio~=1.0
 shapely~=2.0.0
 supermercado==0.2.0
-snuggs==1.4.2
 tqdm==4.66.3