theme switcher

protomaps · Nov 16, 2024 · f83ce1e · f83ce1e
1 parent 675c3c2
commit f83ce1e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 25 deletions.
diff --git a/app/index.html b/app/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Solid + TS</title>
+    <title>Basemaps Themes</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/src/App.css b/app/src/App.css
@@ -9,7 +9,24 @@
   height: 100vh;
 }
 
+.sidebar {
+  width: 25%;
+  min-width: 250px;
+  padding: 10px;
+}
+
 #map {
   height: 100vh;
   width: 75%;
 }
+
+.themeRow {
+  border: 1px solid #111;
+  padding: .5rem;
+  margin-bottom: 1rem;
+}
+
+.themeRow:hover {
+  border: 1px solid #aaa;
+  cursor: pointer;
+}
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,45 +1,77 @@
-import { onMount } from "solid-js";
+import { For, createSignal, createEffect, onMount, Component } from "solid-js";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./App.css";
 import maplibregl from "maplibre-gl";
-import { LayerSpecification } from "maplibre-gl";
-import { layersWithCustomTheme } from "protomaps-themes-base";
+import { StyleSpecification } from "maplibre-gl";
+import { Theme, layersWithCustomTheme } from "protomaps-themes-base";
 
-const THEMES = ["contrast"];
+const THEMES = ["contrast", "bright"];
+
+const themeToLayers = new Map<string, Theme>();
+
+for (let themeName of THEMES) {
+  let theme = await import(`../../themes/${themeName}.ts`);
+  themeToLayers.set(themeName, theme.default);
+}
+
+const getStyle = (index: number):StyleSpecification => {
+  let themeName = THEMES[index];
+  let layers = layersWithCustomTheme(
+    "protomaps",
+    themeToLayers.get(themeName)!,
+    "en",
+  );
+  return {
+    version: 8,
+    glyphs:
+      "https://bdon.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
+    sources: {
+      protomaps: {
+        type: "vector",
+        url: "https://api.protomaps.com/tiles/v4.json?key=1003762824b9687f",
+      },
+    },
+    layers: layers,
+  };
+};
+
+const ThemeRow: Component<{name: string, theme: Theme}> = (props) => {
+  return (
+    <div class="themeRow" style={{"background-color":props.theme.background,"color":props.theme.city_label}}>
+      {props.name}
+    </div>
+  )
+}
 
 function App() {
+  let map: maplibregl.Map;
+
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
   onMount(async () => {
     maplibregl.setRTLTextPlugin(
       "https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js",
       true,
     );
 
-    let layers: LayerSpecification[] = [];
-
-    for (let themeName of THEMES) {
-      let theme = await import(`../../themes/${themeName}.ts`);
-      layers = layersWithCustomTheme("protomaps", theme.default, "en");
-    }
-
-    new maplibregl.Map({
+    map = new maplibregl.Map({
       container: "map",
-      style: {
-        version: 8,
-        glyphs:
-          "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
-        sources: {
-          protomaps: {
-            type: "vector",
-            url: "https://api.protomaps.com/tiles/v4.json?key=1003762824b9687f",
-          },
-        },
-        layers: layers,
-      },
+      style: getStyle(selectedIndex()),
     });
   });
 
+  createEffect(() => {
+    map.setStyle(getStyle(selectedIndex()));
+  });
+
+  const selectTheme = (i: number) => {
+    setSelectedIndex(i);
+  }
+
   return (
     <div id="container">
+      <div class="sidebar">
+        <For each={THEMES}>{(themeName,i) => <div onClick={() => selectTheme(i())}><ThemeRow name={themeName} theme={themeToLayers.get(themeName)!}/></div>}</For>
+      </div>
       <div id="map"></div>
     </div>
   );