diff --git a/CHANGELOG.md b/CHANGELOG.md index 233bdf32..7b130898 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +Styles v4.3.0 +------ +* Add landcover styling [#154] +* Adjust appearance of landuse layers to fade in after landcover + Styles v4.2.0 ------ * add icons for a few lapis and slategray POIs [#238, #163] diff --git a/styles/package.json b/styles/package.json index 277c5778..cae339e2 100644 --- a/styles/package.json +++ b/styles/package.json @@ -1,6 +1,6 @@ { "name": "protomaps-themes-base", - "version": "4.2.0", + "version": "4.3.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 c9c895f7..f0b80e3d 100644 --- a/styles/src/base_layers.ts +++ b/styles/src/base_layers.ts @@ -28,6 +28,36 @@ export function nolabels_layers( "fill-color": t.earth, }, }, + ...((t.landcover + ? [ + { + id: "landcover", + type: "fill", + source: source, + "source-layer": "landcover", + paint: { + "fill-color": [ + "match", + ["get", "kind"], + "grassland", + t.landcover.grassland, + "barren", + t.landcover.barren, + "urban_area", + t.landcover.urban_area, + "farmland", + t.landcover.farmland, + "glacier", + t.landcover.glacier, + "scrub", + t.landcover.scrub, + t.landcover.forest, + ], + "fill-opacity": ["interpolate", ["linear"], ["zoom"], 5, 1, 7, 0], + }, + }, + ] + : []) as LayerSpecification[]), { id: "landuse_park", type: "fill", @@ -43,16 +73,56 @@ export function nolabels_layers( "nature_reserve", "forest", "golf_course", + "wood", + "nature_reserve", + "forest", + "scrub", + "grassland", + "grass", + "military", + "naval_base", + "airfield", ], paint: { + "fill-opacity": ["interpolate", ["linear"], ["zoom"], 6, 0, 11, 1], "fill-color": [ - "interpolate", - ["linear"], - ["zoom"], - 0, - t.park_a, - 12, + "case", + [ + "in", + ["get", "kind"], + [ + "literal", + [ + "national_park", + "park", + "cemetery", + "protected_area", + "nature_reserve", + "forest", + "golf_course", + ], + ], + ], t.park_b, + [ + "in", + ["get", "kind"], + ["literal", ["wood", "nature_reserve", "forest"]], + ], + t.wood_b, + ["in", ["get", "kind"], ["literal", ["scrub", "grassland", "grass"]]], + t.scrub_b, + ["in", ["get", "kind"], ["literal", ["glacier"]]], + t.glacier, + ["in", ["get", "kind"], ["literal", ["sand"]]], + t.sand, + [ + "in", + ["get", "kind"], + ["literal", ["military", "naval_base", "airfield"]], + ], + t.zoo, + t.earth, ], }, }, @@ -117,72 +187,6 @@ export function nolabels_layers( "fill-color": t.zoo, }, }, - { - id: "landuse_military", - type: "fill", - source: source, - "source-layer": "landuse", - filter: ["in", "kind", "military", "naval_base", "airfield"], - paint: { - "fill-color": t.zoo, - }, - }, - { - id: "landuse_wood", - type: "fill", - source: source, - "source-layer": "landuse", - filter: ["in", "kind", "wood", "nature_reserve", "forest"], - paint: { - "fill-color": [ - "interpolate", - ["linear"], - ["zoom"], - 0, - t.wood_a, - 12, - t.wood_b, - ], - }, - }, - { - id: "landuse_scrub", - type: "fill", - source: source, - "source-layer": "landuse", - filter: ["in", "kind", "scrub", "grassland", "grass"], - paint: { - "fill-color": [ - "interpolate", - ["linear"], - ["zoom"], - 0, - t.scrub_a, - 12, - t.scrub_b, - ], - }, - }, - { - id: "landuse_glacier", - type: "fill", - source: source, - "source-layer": "landuse", - filter: ["==", "kind", "glacier"], - paint: { - "fill-color": t.glacier, - }, - }, - { - id: "landuse_sand", - type: "fill", - source: source, - "source-layer": "landuse", - filter: ["==", "kind", "sand"], - paint: { - "fill-color": t.sand, - }, - }, { id: "landuse_aerodrome", type: "fill", diff --git a/styles/src/themes.ts b/styles/src/themes.ts index 61ae3fac..e33f63a3 100644 --- a/styles/src/themes.ts +++ b/styles/src/themes.ts @@ -280,13 +280,23 @@ export const LIGHT: Theme = { tangerine: "#CB6704", turquoise: "#00C3D4", }, + + landcover: { + grassland: "rgba(210, 239, 207, 1)", + barren: "rgba(255, 243, 215, 1)", + urban_area: "rgba(230, 230, 230, 1)", + farmland: "rgba(216, 239, 210, 1)", + glacier: "rgba(255, 255, 255, 1)", + scrub: "rgba(234, 239, 210, 1)", + forest: "rgba(196, 231, 210, 1)", + }, }; export const DARK: Theme = { background: "#34373d", earth: "#1f1f1f", - park_a: "#232325", - park_b: "#232325", + park_a: "#1c2421", + park_b: "#192a24", hospital: "#252424", industrial: "#222222", school: "#262323", @@ -300,7 +310,7 @@ export const DARK: Theme = { beach: "#28282a", aerodrome: "#1e1e1e", runway: "#333333", - water: "#34373d", + water: "#31353f", zoo: "#222323", military: "#242323", @@ -372,6 +382,16 @@ export const DARK: Theme = { tangerine: "#F19B6E", turquoise: "#00C3D4", }, + + landcover: { + grassland: "rgba(30, 41, 31, 1)", + barren: "rgba(38, 38, 36, 1)", + urban_area: "rgba(28, 28, 28, 1)", + farmland: "rgba(31, 36, 32, 1)", + glacier: "rgba(43, 43, 43, 1)", + scrub: "rgba(34, 36, 30, 1)", + forest: "rgba(28, 41, 37, 1)", + }, }; export const WHITE: Theme = {