Skip to content

Commit

Permalink
add labels checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
bdon committed Nov 25, 2024
1 parent 93a1dc9 commit 1a8ac96
Showing 1 changed file with 32 additions and 8 deletions.
40 changes: 32 additions & 8 deletions app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
import "./App.css";
import maplibregl from "maplibre-gl";
import { StyleSpecification } from "maplibre-gl";
import { Theme, layersWithCustomTheme } from "protomaps-themes-base";
import { Theme, layersWithCustomTheme, noLabelsWithCustomTheme } from "protomaps-themes-base";

const THEMES = ["contrast", "bright", "calm", "black_and_white", "pink"];

Expand All @@ -24,13 +24,22 @@ themeToLayers.set("black_and_white", black_and_white);
import pink from "../themes/pink.ts";
themeToLayers.set("pink", pink);

const getStyle = (index: number):StyleSpecification => {
const getStyle = (index: number, showLabels: boolean):StyleSpecification => {
let themeName = THEMES[index];
let layers = layersWithCustomTheme(
"protomaps",
themeToLayers.get(themeName)!,
"en",
);
let layers;

if (showLabels) {
layers = layersWithCustomTheme(
"protomaps",
themeToLayers.get(themeName)!,
"en",
);
} else {
layers = noLabelsWithCustomTheme(
"protomaps",
themeToLayers.get(themeName)!,
);
}
return {
version: 8,
glyphs:
Expand All @@ -57,6 +66,8 @@ function App() {
let map: maplibregl.Map;

const [selectedIndex, setSelectedIndex] = createSignal(0);
const [showLabels, setShowLabels] = createSignal(true);

onMount(async () => {
maplibregl.setRTLTextPlugin(
"https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js",
Expand All @@ -70,17 +81,30 @@ function App() {
});

createEffect(() => {
map.setStyle(getStyle(selectedIndex()));
map.setStyle(getStyle(selectedIndex(),showLabels()));
});

const selectTheme = (i: number) => {
setSelectedIndex(i);
}

const handleShowLabelsChange = (event) => {

Check failure on line 91 in app/App.tsx

View workflow job for this annotation

GitHub Actions / gh_pages

Parameter 'event' implicitly has an 'any' type.
setShowLabels(event.target.checked);
};

console.log(showLabels());

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>
<input
id="showLabels"
type="checkbox"
checked={showLabels()}
onChange={handleShowLabelsChange}
/>
<label for="showLabels">Show labels</label>
</div>
<div id="map"></div>
</div>
Expand Down

0 comments on commit 1a8ac96

Please sign in to comment.