diff --git a/CHANGELOG.md b/CHANGELOG.md index f5cd742a..8909664c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +Styles v4.1.0 +------ +- add icon sprites for six green kinds [#238] +- point v4 styles at v4 sprites assets URL +- change light theme water color to blue instead of white for contrast +- consistent halo size across layers +- add landuse `kind=runway` + Tiles v4.0.1 ------ - fix `roads` `kind=ferry`, remove ferry `kind_detail` [#312] diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx index 3d509b1c..017e996f 100644 --- a/app/src/MapViewComponent.tsx +++ b/app/src/MapViewComponent.tsx @@ -96,7 +96,7 @@ function getMaplibreStyle( if (localSprites) { 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/v4/${theme}`; } style.glyphs = diff --git a/app/src/VisualTestsComponent.tsx b/app/src/VisualTestsComponent.tsx index 6de6fc36..cb44ae0f 100644 --- a/app/src/VisualTestsComponent.tsx +++ b/app/src/VisualTestsComponent.tsx @@ -55,7 +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", + sprite: "https://protomaps.github.io/basemaps-assets/sprites/v4/light", sources: { protomaps: { type: "vector", diff --git a/app/src/examples.json b/app/src/examples.json index 33fb39d6..655f50f0 100644 --- a/app/src/examples.json +++ b/app/src/examples.json @@ -75,5 +75,12 @@ "tags": ["roads"], "center": [-122.440512, 37.807891], "zoom": 16 + }, + { + "name": "edwards-afb", + "description": "edwards air force base runways", + "tags": ["landuse"], + "center": [-118.0726, 34.8328], + "zoom": 10 } ] diff --git a/styles/package-lock.json b/styles/package-lock.json index 60942850..7990920b 100644 --- a/styles/package-lock.json +++ b/styles/package-lock.json @@ -1,12 +1,12 @@ { "name": "protomaps-themes-base", - "version": "4.0.1", + "version": "4.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "protomaps-themes-base", - "version": "4.0.1", + "version": "4.1.0", "license": "BSD-3-Clause", "devDependencies": { "@biomejs/biome": "^1.5.3", diff --git a/styles/package.json b/styles/package.json index f5f26a09..c980169a 100644 --- a/styles/package.json +++ b/styles/package.json @@ -1,6 +1,6 @@ { "name": "protomaps-themes-base", - "version": "4.0.1", + "version": "4.1.0", "description": "Protomaps basemap themes for MapLibre GL JS", "type": "module", "main": "dist/cjs/index.cjs", diff --git a/styles/src/base_layers.ts b/styles/src/base_layers.ts index e519aaf5..1d39b394 100644 --- a/styles/src/base_layers.ts +++ b/styles/src/base_layers.ts @@ -236,20 +236,16 @@ export function nolabels_layers( ], }, }, - // { - // id: "landuse_runway", - // type: "fill", - // source: source, - // "source-layer": "landuse", - // minzoom: 14, - // filter: [ - // "any", - // ["in", "kind_detail", "runway", "taxiway"], - // ], - // paint: { - // "fill-color": t.runway, - // }, - // }, + { + id: "landuse_runway", + type: "fill", + source: source, + "source-layer": "landuse", + filter: ["any", ["in", "kind", "runway", "taxiway"]], + paint: { + "fill-color": t.runway, + }, + }, { id: "water", type: "fill", @@ -1204,40 +1200,6 @@ export function nolabels_layers( ], }, }, - // { - // id: "roads_bridges_highway_casing", - // type: "line", - // source: source, - // "source-layer": "roads", - // minzoom: 12, - // filter: ["all", [">", "level", 0], ["==", "kind", "highway"], ["!=", "link", 1]], - // paint: { - // "line-color": t.bridges_highway_casing, - // "line-gap-width": [ - // "interpolate", - // ["exponential", 1.6], - // ["zoom"], - // 3, - // 0, - // 3.5, - // 0.5, - // 18, - // 32, - // ], - // "line-width": [ - // "interpolate", - // ["exponential", 1.6], - // ["zoom"], - // 7, - // 0, - // 7.5, - // 1, - // ], - // }, - // layout: { - // visibility: casingVisibility, - // }, - // }, { id: "roads_bridges_other", type: "line", @@ -1416,37 +1378,16 @@ export function labels_layers( filter: ["in", "kind", "river", "stream"], layout: { "symbol-placement": "line", - "text-font": ["Noto Sans Regular"], - "text-field": get_multiline_name( - lang, - script, - ) as DataDrivenPropertyValueSpecification, - "text-size": 12, - "text-letter-spacing": 0.3, - }, - paint: { - "text-color": t.waterway_label, - }, - }, - { - id: "pois_peak", - type: "symbol", - source: source, - "source-layer": "pois", - filter: ["==", "kind", "peak"], - layout: { "text-font": ["Noto Sans Italic"], "text-field": get_multiline_name( lang, script, ) as DataDrivenPropertyValueSpecification, - "text-size": ["interpolate", ["linear"], ["zoom"], 10, 8, 16, 12], - "text-letter-spacing": 0.1, - "text-max-width": 9, + "text-size": 12, + "text-letter-spacing": 0.2, }, paint: { - "text-color": t.peak_label, - "text-halo-width": 1.5, + "text-color": t.ocean_label, }, }, { @@ -1469,7 +1410,8 @@ export function labels_layers( paint: { "text-color": t.roads_label_minor, "text-halo-color": t.roads_label_minor_halo, - "text-halo-width": 2, + "text-halo-width": 1, + "text-halo-blur": 1, }, }, { @@ -1489,7 +1431,7 @@ export function labels_layers( "fjord", ], layout: { - "text-font": ["Noto Sans Medium"], + "text-font": ["Noto Sans Italic"], "text-field": get_multiline_name( lang, script, @@ -1510,7 +1452,7 @@ export function labels_layers( "source-layer": "water", filter: ["in", "kind", "lake", "water"], layout: { - "text-font": ["Noto Sans Medium"], + "text-font": ["Noto Sans Italic"], "text-field": get_multiline_name( lang, script, @@ -1543,9 +1485,60 @@ export function labels_layers( paint: { "text-color": t.roads_label_major, "text-halo-color": t.roads_label_major_halo, - "text-halo-width": 2, - }, - }, + "text-halo-width": 1, + "text-halo-blur": 1, + }, + }, + ...((t.pois + ? [ + { + id: "pois", + type: "symbol", + source: source, + "source-layer": "pois", + filter: [ + "all", + [ + "in", + ["get", "kind"], + [ + "literal", + ["beach", "forest", "marina", "park", "peak", "zoo"], + ], + ], + [">=", ["zoom"], ["get", "min_zoom"]], + ], + layout: { + "icon-image": ["get", "kind"], + "text-font": ["Noto Sans Regular"], + "text-justify": "auto", + "text-field": get_multiline_name( + lang, + script, + ) as DataDrivenPropertyValueSpecification, + "text-size": 10, + "text-max-width": 8, + "text-offset": [1, 0], + "text-variable-anchor": ["left", "right"], + }, + paint: { + "text-color": [ + "case", + [ + "in", + ["get", "kind"], + [ + "literal", + ["beach", "forest", "marina", "park", "peak", "zoo"], + ], + ], + t.pois.green, + t.earth, + ], + }, + }, + ] + : []) as LayerSpecification[]), { id: "places_subplace", type: "symbol", @@ -1590,7 +1583,8 @@ export function labels_layers( paint: { "text-color": t.subplace_label, "text-halo-color": t.subplace_label_halo, - "text-halo-width": 1.5, + "text-halo-width": 1, + "text-halo-blur": 1, }, }, { @@ -1705,6 +1699,7 @@ export function labels_layers( "text-color": t.city_label, "text-halo-color": t.city_label_halo, "text-halo-width": 1, + "text-halo-blur": 1, }, }, { @@ -1731,7 +1726,8 @@ export function labels_layers( paint: { "text-color": t.state_label, "text-halo-color": t.state_label_halo, - "text-halo-width": 2, + "text-halo-width": 1, + "text-halo-blur": 1, }, }, { diff --git a/styles/src/generate_styles.ts b/styles/src/generate_styles.ts index 3fd8ea41..b3607815 100644 --- a/styles/src/generate_styles.ts +++ b/styles/src/generate_styles.ts @@ -30,7 +30,7 @@ for (const theme of ["light", "dark", "white", "grayscale", "black"]) { }, }, layers: layers, - sprite: `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`, + sprite: `https://protomaps.github.io/basemaps-assets/sprites/v4/${theme}`, glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf", }; diff --git a/styles/src/themes.ts b/styles/src/themes.ts index f07a33a6..50fff46f 100644 --- a/styles/src/themes.ts +++ b/styles/src/themes.ts @@ -51,7 +51,6 @@ export interface Theme { railway: string; boundaries: string; - waterway_label: string; bridges_other_casing: string; bridges_minor_casing: string; @@ -69,7 +68,6 @@ export interface Theme { roads_label_major: string; roads_label_major_halo: string; ocean_label: string; - peak_label: string; subplace_label: string; subplace_label_halo: string; city_label: string; @@ -77,6 +75,16 @@ export interface Theme { state_label: string; state_label_halo: string; country_label: string; + + pois?: Pois; + + // deprecated + peak_label: string; + waterway_label: string; +} + +export interface Pois { + green: string; } export const CONTRAST: Theme = { @@ -230,7 +238,7 @@ export const LIGHT: Theme = { roads_label_minor_halo: "#ffffff", roads_label_major: "#938a8d", roads_label_major_halo: "#ffffff", - ocean_label: "#ffffff", + ocean_label: "#728dd4", peak_label: "#7e9aa0", subplace_label: "#8f8f8f", subplace_label_halo: "#e0e0e0", @@ -239,6 +247,10 @@ export const LIGHT: Theme = { state_label: "#b3b3b3", state_label_halo: "#e0e0e0", country_label: "#a3a3a3", + + pois: { + green: "#20834D", + }, }; export const DARK: Theme = { @@ -320,6 +332,10 @@ export const DARK: Theme = { state_label: "#3d3d3d", state_label_halo: "#1f1f1f", country_label: "#5c5c5c", + + pois: { + green: "#30C573", + }, }; export const WHITE: Theme = {