diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c33122d..07ae5bea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +Styles v3.0.0 +------ +- introduce dependency on a spritesheet: + - example for `light` theme https://protomaps.github.io/basemaps-assets/sprites/v3/light` + - Style deployments need to depend on the spritesheet assets in addition to fonts. +- Migrate town labels to single "symbol" style layer to specify linked "icon" and "text", using the new spritesheet to source the icon's image. This resolves a bug where townspot icons in the old places_locality_circle "circle" style layer were often orphaned (still displayed) even if the related text in the places_locality "symbol" style layer couldn't be placed. The circle style layer has been removed and consolidated into the symbol style layer. + +Styles v2.0.0 +------ +- Standardize JS package.json on ES6 modules + Tiles v3.5.1 ------ - Order landcover by kind consistently [#154] diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx index 90648755..bd659159 100644 --- a/app/src/MapViewComponent.tsx +++ b/app/src/MapViewComponent.tsx @@ -90,9 +90,9 @@ function getMaplibreStyle( style.layers = []; if (localSprites) { - // style.sprite = `${location.protocol}//${location.host}/${theme}`; + style.sprite = `${location.protocol}//${location.host}/${theme}`; } else { - // style.sprite = `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`; + style.sprite = `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`; } style.glyphs = diff --git a/styles/package-lock.json b/styles/package-lock.json index 81552645..c43c77f0 100644 --- a/styles/package-lock.json +++ b/styles/package-lock.json @@ -1,12 +1,12 @@ { "name": "protomaps-themes-base", - "version": "2.0.0-alpha.6", + "version": "3.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "protomaps-themes-base", - "version": "2.0.0-alpha.6", + "version": "3.0.0", "license": "BSD-3-Clause", "devDependencies": { "@biomejs/biome": "^1.5.3", diff --git a/styles/package.json b/styles/package.json index d113e943..b1af9764 100644 --- a/styles/package.json +++ b/styles/package.json @@ -1,6 +1,6 @@ { "name": "protomaps-themes-base", - "version": "2.0.0", + "version": "3.0.0", "description": "Protomaps basemap themes for MapLibre GL JS", "type": "module", "exports": "./dist/index.js", diff --git a/styles/src/base_layers.ts b/styles/src/base_layers.ts index 77288886..743e225c 100644 --- a/styles/src/base_layers.ts +++ b/styles/src/base_layers.ts @@ -1692,29 +1692,6 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] { "text-halo-width": 2, }, }, - // { - // id: "pois_high_zooms", - // type: "symbol", - // source: source, - // minzoom: 15, - // "source-layer": "pois", - // "filter": ["any", [">=", ["get", "pmap:min_zoom"], 13]], - // layout: { - // "symbol-sort-key": ["get", "pmap:min_zoom"], - // "text-font": ["Noto Sans Regular"], - // "text-field": ["get", "name"], - // "text-size": 11, - // "text-max-width": 9, - // "icon-padding": ["interpolate", ["linear"], - // ["zoom"], 0, 2, 14, 2, 16, 20, 17, 2, 22, 2 - // ], - // }, - // paint: { - // "text-color": t.subplace_label, - // "text-halo-color": t.subplace_label_halo, - // "text-halo-width": 1.5, - // }, - // }, { id: "physical_point_ocean", type: "symbol", @@ -1824,61 +1801,12 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] { ], "text-transform": "uppercase", }, - paint: { - "text-color": t.subplace_label, - "text-halo-color": t.subplace_label_halo, - "text-halo-width": 2.0, - }, - }, - { - id: "pois_important", - type: "symbol", - source: source, - "source-layer": "pois", - filter: ["any", ["<", ["get", "pmap:min_zoom"], 13]], - layout: { - "symbol-sort-key": ["get", "pmap:min_zoom"], - "text-font": ["Noto Sans Regular"], - "text-field": ["get", "name"], - "text-size": 11, - "text-max-width": 9, - "icon-padding": [ - "interpolate", - ["linear"], - ["zoom"], - 0, - 2, - 14, - 2, - 16, - 20, - 17, - 2, - 22, - 2, - ], - }, paint: { "text-color": t.subplace_label, "text-halo-color": t.subplace_label_halo, "text-halo-width": 1.5, }, }, - { - id: "places_locality_circle", - type: "circle", - source: source, - "source-layer": "places", - filter: ["==", "pmap:kind", "locality"], - paint: { - "circle-radius": 2, - "circle-stroke-width": 1.5, - "circle-stroke-color": t.city_circle_stroke, - "circle-color": t.city_circle, - "circle-translate": [-6, 0], - }, - maxzoom: 8, - }, { id: "places_locality", type: "symbol", @@ -1886,6 +1814,8 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] { "source-layer": "places", filter: ["==", "pmap:kind", "locality"], layout: { + "icon-image": ["step", ["zoom"], "townspot", 8, ""], + "icon-size": 0.7, "text-field": "{name}", "text-font": [ "case", @@ -1968,7 +1898,7 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] { ["linear"], ["zoom"], 0, - 2, + 0, 8, 4, 10, @@ -1979,7 +1909,7 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] { 2, ], "text-anchor": ["step", ["zoom"], "left", 8, "center"], - "text-radial-offset": 0.2, + "text-radial-offset": 0.4, }, paint: { "text-color": t.city_label, diff --git a/styles/src/themes.ts b/styles/src/themes.ts index d614c9d2..9e75cfc7 100644 --- a/styles/src/themes.ts +++ b/styles/src/themes.ts @@ -79,8 +79,6 @@ export interface Theme { peak_label: string; subplace_label: string; subplace_label_halo: string; - city_circle: string; - city_circle_stroke: string; city_label: string; city_label_halo: string; state_label: string; @@ -169,8 +167,6 @@ export const CONTRAST: Theme = { peak_label: "#61bb5b", subplace_label: "#757d91", subplace_label_halo: "#ffffff", - city_circle: "#666666", - city_circle_stroke: "#ffffff", city_label: "#3c3c3c", city_label_halo: "#ffffff", state_label: "#777777", @@ -259,8 +255,6 @@ export const LIGHT: Theme = { peak_label: "#7e9aa0", subplace_label: "#8f8f8f", subplace_label_halo: "#e0e0e0", - city_circle: "#ffffff", - city_circle_stroke: "#a3a3a3", city_label: "#5c5c5c", city_label_halo: "#e0e0e0", state_label: "#b3b3b3", @@ -349,8 +343,6 @@ export const DARK: Theme = { peak_label: "#898080", subplace_label: "#525252", subplace_label_halo: "#1f1f1f", - city_circle: "#000000", - city_circle_stroke: "#7a7a7a", city_label: "#7a7a7a", city_label_halo: "#212121", state_label: "#3d3d3d", @@ -439,8 +431,6 @@ export const WHITE: Theme = { peak_label: "#adadad", subplace_label: "#8f8f8f", subplace_label_halo: "#ffffff", - city_circle: "#ffffff", - city_circle_stroke: "#adadad", city_label: "#5c5c5c", city_label_halo: "#ffffff", state_label: "#b3b3b3", @@ -529,8 +519,6 @@ export const GRAYSCALE: Theme = { peak_label: "#5c5c5c", subplace_label: "#7a7a7a", subplace_label_halo: "#cccccc", - city_circle: "#c2c2c2", - city_circle_stroke: "#7a7a7a", city_label: "#474747", city_label_halo: "#cccccc", state_label: "#999999", @@ -619,8 +607,6 @@ export const BLACK: Theme = { peak_label: "#707070", subplace_label: "#5c5c5c", subplace_label_halo: "#141414", - city_circle: "#000000", - city_circle_stroke: "#666666", city_label: "#999999", city_label_halo: "#141414", state_label: "#3d3d3d",