diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index 9f332a06e..1000e3276 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -157,6 +157,27 @@ "doc_url": "https://openmaptiles.org/schema/#place", "icon_url": "https://raw.githubusercontent.com/osm-americana/openstreetmap-americana/main/icons/place_dot.svg" }, + { + "key": "place", + "value": "suburb", + "object_types": ["node"], + "description": "Suburbs are labeled in capital letters.", + "doc_url": "https://openmaptiles.org/schema/#place" + }, + { + "key": "place", + "value": "quarter", + "object_types": ["node"], + "description": "Quarters are labeled in capital letters.", + "doc_url": "https://openmaptiles.org/schema/#place" + }, + { + "key": "place", + "value": "neighbourhood", + "object_types": ["node"], + "description": "Neighborhoods are labeled in capital letters.", + "doc_url": "https://openmaptiles.org/schema/#place" + }, { "key": "disputed", "value": "yes", diff --git a/src/constants/color.js b/src/constants/color.js index e2bf7bdc7..cf6851c19 100644 --- a/src/constants/color.js +++ b/src/constants/color.js @@ -28,6 +28,8 @@ export const airportOutline = "hsl(250, 41%, 79%)"; export const airportRunway = "hsl(250, 41%, 79%)"; export const airportLabel = "hsl(250, 71%, 29%)"; +export const urbanSubAreaLabel = "hsl(211, 43%, 28%)"; + //TODO - rename this variable to "palette" export const palette = { black: "black", diff --git a/src/layer/index.js b/src/layer/index.js index 740eb6061..e23a4c422 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -232,6 +232,9 @@ export function build(locales) { lyrPoi.poi, lyrPlace.state, + lyrPlace.neighborhood, + lyrPlace.quarter, + lyrPlace.suburb, lyrPlace.village, lyrPlace.town, lyrPlace.city, diff --git a/src/layer/place.js b/src/layer/place.js index 611199a7d..0abda0ef0 100644 --- a/src/layer/place.js +++ b/src/layer/place.js @@ -208,6 +208,175 @@ export const city = { metadata: {}, }; +export const suburb = { + id: "place_suburb", + type: "symbol", + paint: { + "text-color": Color.urbanSubAreaLabel, + "text-halo-color": labelHaloColor, + "text-halo-width": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 3, + 1.5, + 6, + 2.5, + ], + "text-halo-blur": labelHaloBlur, + }, + filter: ["==", ["get", "class"], "suburb"], + layout: { + "text-font": ["Americana-Regular"], + "text-size": { + base: 1.2, + stops: [ + [10, 12], + [12, 15], + [14, 18], + ], + }, + "text-field": Label.localizedName, + "text-padding": 1, + "text-transform": "uppercase", + "text-letter-spacing": { + base: 0.04, + stops: [ + [11, 0.04], + [12, 0.08], + [13, 0.2], + [14, 0.4], + ], + }, + "text-variable-anchor": ["center"], + "text-radial-offset": [ + "interpolate", + ["exponential", 1.6], + ["zoom"], + 3, + 0.5, + 7, + 3, + ], + "text-max-width": 6, + }, + source: "openmaptiles", + maxzoom: 15, + minzoom: 11, + "source-layer": "place", +}; + +export const quarter = { + id: "place_quarter", + type: "symbol", + paint: { + "text-color": Color.urbanSubAreaLabel, + "text-halo-color": labelHaloColor, + "text-halo-width": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 3, + 1.5, + 6, + 2.5, + ], + "text-halo-blur": labelHaloBlur, + }, + filter: ["==", ["get", "class"], "quarter"], + layout: { + "text-font": ["Americana-Regular"], + "text-size": { + base: 1.2, + stops: [ + [13, 12], + [14, 14], + [16, 18], + ], + }, + "text-field": Label.localizedName, + "text-padding": 1, + "text-transform": "uppercase", + "text-letter-spacing": { + base: 0.04, + stops: [ + [14, 0.08], + [15, 0.2], + ], + }, + "text-variable-anchor": ["center"], + "text-radial-offset": [ + "interpolate", + ["exponential", 1.6], + ["zoom"], + 3, + 0.5, + 7, + 3, + ], + "text-max-width": 6, + }, + source: "openmaptiles", + maxzoom: 16, + minzoom: 13, + "source-layer": "place", +}; + +export const neighborhood = { + id: "place_neighborhood", + type: "symbol", + paint: { + "text-color": Color.urbanSubAreaLabel, + "text-halo-color": labelHaloColor, + "text-halo-width": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 3, + 1.5, + 6, + 2.5, + ], + "text-halo-blur": labelHaloBlur, + }, + filter: ["==", ["get", "class"], "neighbourhood"], + layout: { + "text-font": ["Americana-Regular"], + "text-size": { + base: 1.2, + stops: [ + [14, 12], + [16, 14], + ], + }, + "text-field": Label.localizedName, + "text-padding": 1, + "text-transform": "uppercase", + "text-letter-spacing": { + base: 0.04, + stops: [ + [15, 0.08], + [16, 0.2], + ], + }, + "text-variable-anchor": ["center"], + "text-radial-offset": [ + "interpolate", + ["exponential", 1.6], + ["zoom"], + 3, + 0.5, + 7, + 3, + ], + "text-max-width": 6, + }, + source: "openmaptiles", + maxzoom: 17, + minzoom: 14, + "source-layer": "place", +}; + export const state = { id: "place_state", type: "symbol", @@ -442,6 +611,18 @@ export const legendEntries = [ layers: [village.id], filter: nonCapitalFilter, }, + { + description: "Major district", + layers: [suburb.id], + }, + { + description: "Large neighborhood", + layers: [quarter.id], + }, + { + description: "Neighborhood", + layers: [neighborhood.id], + }, { description: "National capital", layers: populatedPlaceLayers,