diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx index 5c659832..3d509b1c 100644 --- a/app/src/MapViewComponent.tsx +++ b/app/src/MapViewComponent.tsx @@ -20,7 +20,7 @@ import { language_script_pairs } from "../../styles/src/language.ts"; import { LayerSpecification } from "@maplibre/maplibre-gl-style-spec"; import { FileSource, PMTiles, Protocol } from "pmtiles"; -import { createHash, parseHash } from "./hash"; +import { createHash, layersForVersion, parseHash } from "./utils"; const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "main").substr(0, 8); @@ -390,15 +390,7 @@ export default function MapViewComponent() { if (publishedStyleVersion === undefined) { setNpmLayers([]); } else { - fetch( - `https://unpkg.com/protomaps-themes-base@${publishedStyleVersion}/dist/layers/${theme}.json`, - ) - .then((resp) => { - return resp.json(); - }) - .then((j) => { - setNpmLayers(j); - }); + setNpmLayers(await layersForVersion(publishedStyleVersion, theme)); } })(); }, [publishedStyleVersion, theme]); diff --git a/app/src/VisualTestsComponent.tsx b/app/src/VisualTestsComponent.tsx index 76d3f026..6de6fc36 100644 --- a/app/src/VisualTestsComponent.tsx +++ b/app/src/VisualTestsComponent.tsx @@ -4,6 +4,7 @@ import * as pmtiles from "pmtiles"; import { useEffect, useRef, useState } from "react"; import layers from "../../styles/src/index.ts"; import rawExamples from "./examples.json"; +import { layersForVersion } from "./utils"; import "maplibre-gl/dist/maplibre-gl.css"; // @ts-ignore @@ -54,6 +55,7 @@ const createMap = ( zoom: zoom, glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf", + sprite: "https://protomaps.github.io/basemaps-assets/sprites/v3/light", sources: { protomaps: { type: "vector", @@ -143,13 +145,6 @@ const linkTo = (props: { name?: string; tag?: string }) => { return `/visualtests/?${q.toString()}`; }; -const layersForVersion = async (version: string) => { - const resp = await fetch( - `https://unpkg.com/protomaps-themes-base@${version}/dist/layers/light.json`, - ); - return await resp.json(); -}; - const latestVersion = async () => { const resp = await fetch("https://registry.npmjs.org/protomaps-themes-base", { headers: { Accept: "application/vnd.npm.install-v1+json" }, diff --git a/app/src/hash.ts b/app/src/utils.ts similarity index 62% rename from app/src/hash.ts rename to app/src/utils.ts index 323933e2..15f87a43 100644 --- a/app/src/hash.ts +++ b/app/src/utils.ts @@ -24,3 +24,20 @@ export function createHash( }) .join("&")}`; } + +export async function layersForVersion(version: string, theme?: string) { + if (version >= "4.0.0") { + const resp = await fetch( + `https://unpkg.com/protomaps-themes-base@${version}/dist/styles/${ + theme || "light" + }/en.json`, + ); + return (await resp.json()).layers; + } + const resp = await fetch( + `https://unpkg.com/protomaps-themes-base@${version}/dist/layers/${ + theme || "light" + }.json`, + ); + return await resp.json(); +} diff --git a/styles/src/base_layers.ts b/styles/src/base_layers.ts index 9c9eb638..e519aaf5 100644 --- a/styles/src/base_layers.ts +++ b/styles/src/base_layers.ts @@ -1697,6 +1697,7 @@ export function labels_layers( 22, 2, ], + "text-justify": "auto", "text-anchor": ["step", ["zoom"], "left", 8, "center"], "text-radial-offset": 0.4, },