set text-justify: auto on localities that might use a townspot symbol. (

#313)

* set text-justify: auto on localities that might use a townspot symbol.

* fix unpkg style fetching for v4+

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]);

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" },

app/src/hash.ts → 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();
+}

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,
       },