Add suburb, quarter, neighborhood rendering

osm-americana · Jul 6, 2024 · cde59f8 · cde59f8
1 parent 1edd81e
commit cde59f8
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 0 deletions.
diff --git 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
@@ -208,6 +208,155 @@ export const city = {
   metadata: {},
 };
 
+export const suburb = {
+  id: "place_suburb",
+  type: "symbol",
+  paint: {
+    "text-color": Color.waterLabel,
+    "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, 10],
+        [12, 14],
+        [14, 18],
+      ],
+    },
+    "text-field": Label.localizedName,
+    "text-padding": 1,
+    "text-transform": "uppercase",
+    "text-letter-spacing": 0.04,
+    "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.waterLabel,
+    "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": 0.04,
+    "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.waterLabel,
+    "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": 0.04,
+    "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",