From f83ce1e4011aec56667f2d745e8c6694d9896874 Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Sat, 16 Nov 2024 17:06:36 +0800 Subject: [PATCH] theme switcher --- app/index.html | 2 +- app/src/App.css | 17 +++++++++++ app/src/App.tsx | 80 ++++++++++++++++++++++++++++++++++--------------- 3 files changed, 74 insertions(+), 25 deletions(-) diff --git a/app/index.html b/app/index.html index 7021737..e70c2b5 100644 --- a/app/index.html +++ b/app/index.html @@ -4,7 +4,7 @@ - Vite + Solid + TS + Basemaps Themes
diff --git a/app/src/App.css b/app/src/App.css index cc76de7..f2e2afa 100644 --- 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 index 5b22072..0a605fc 100644 --- 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(); + +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 ( +
+ {props.name} +
+ ) +} function App() { + let map: maplibregl.Map; + + const [selectedIndex, setSelectedIndex] = createSignal(0); onMount(async () => { maplibregl.setRTLTextPlugin( "https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/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 (
+
+ {(themeName,i) =>
selectTheme(i())}>
} +
);