Add suburb, quarter, neighborhood rendering

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

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

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,

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,