From d8ddaa67c8630891e5f30c1ac87de19d168f7df2 Mon Sep 17 00:00:00 2001
From: bbecquet <benjamin.becquet@gmail.com>
Date: Thu, 9 Sep 2021 12:15:11 +0200
Subject: [PATCH] Improve town/city hierarchy

---
 icons/place-circled-dot-black.svg |   6 ++
 icons/place-dot-black.svg         |   3 +
 style.json                        | 111 ++++++++++++++++++++----------
 3 files changed, 84 insertions(+), 36 deletions(-)
 create mode 100644 icons/place-circled-dot-black.svg
 create mode 100644 icons/place-dot-black.svg

diff --git a/icons/place-circled-dot-black.svg b/icons/place-circled-dot-black.svg
new file mode 100644
index 0000000..732fd01
--- /dev/null
+++ b/icons/place-circled-dot-black.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20.003">
+  <g stroke="#000" stroke-linecap="round" transform="matrix(.88458 0 0 .88458 -82.881 -121.359)">
+    <circle cx="105" cy="148.5" r="9.611" fill="#fff" stroke-width="2"/>
+    <circle cx="105" cy="148.5" r="6.128" stroke-width="1.275"/>
+  </g>
+</svg>
diff --git a/icons/place-dot-black.svg b/icons/place-dot-black.svg
new file mode 100644
index 0000000..b949b7c
--- /dev/null
+++ b/icons/place-dot-black.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <circle cx="86.179" cy="139.095" r="9.058" stroke="#000" stroke-width="1.885" stroke-linecap="round" />
+</svg>
diff --git a/style.json b/style.json
index a5458c2..e58e89a 100644
--- a/style.json
+++ b/style.json
@@ -4977,13 +4977,14 @@
           ]
         },
         "text-font": [
-          "Noto Sans Bold"
+          "Noto Sans Regular"
         ],
         "text-field": "{name}",
         "text-max-width": 9
       },
       "paint": {
-        "text-color": "hsl(0, 0%, 24%)",
+        "text-color": "#0c0c0e",
+        "text-opacity": 0.8,
         "text-halo-width": 1.2,
         "text-halo-color": "rgba(255,255,255,0.8)"
       }
@@ -4997,6 +4998,7 @@
       },
       "source": "basemap",
       "source-layer": "place",
+      "maxzoom": 17,
       "filter": [
         "==",
         "class",
@@ -5011,21 +5013,22 @@
           "stops": [
             [
               10,
-              12
+              11
             ],
             [
               15,
-              22
+              20
             ]
           ]
         },
+        "text-anchor": "center",
         "text-field": "{name}",
         "text-max-width": 8,
         "visibility": "visible"
       },
       "paint": {
-        "text-color": "#333",
-        "text-halo-width": 1.2,
+        "text-color": "#0c0c0e",
+        "text-halo-width": 1.5,
         "text-halo-color": "rgba(255,255,255,0.8)"
       }
     },
@@ -5038,6 +5041,7 @@
       },
       "source": "basemap",
       "source-layer": "place",
+      "maxzoom": 17,
       "filter": [
         "==",
         "class",
@@ -5062,12 +5066,28 @@
         },
         "text-field": "{name}",
         "text-max-width": 8,
+        "text-offset": [
+          "step",
+          ["zoom"],
+          ["literal", [0, -0.3]],
+          8,
+          ["literal", [0, 0]]
+        ],
+        "text-anchor": {
+          "stops": [
+            [0, "bottom"],
+            [8, "center"]
+          ]
+        },
+        "icon-image": "place-dot-black",
+        "icon-size": 0.25,
         "visibility": "visible"
       },
       "paint": {
-        "text-color": "#333",
-        "text-halo-width": 1.2,
-        "text-halo-color": "rgba(255,255,255,0.8)"
+        "text-color": "#0c0c0e",
+        "text-halo-width": 1.5,
+        "text-halo-color": "rgba(255,255,255,0.8)",
+        "icon-opacity": ["step", ["zoom"], 1, 8, 0]
       }
     },
     {
@@ -5079,6 +5099,7 @@
       },
       "source": "basemap",
       "source-layer": "place",
+      "maxzoom": 16,
       "filter": [
         "all",
         [
@@ -5098,25 +5119,32 @@
         ],
         "text-size": {
           "base": 1.2,
-          "stops": [
-            [
-              7,
-              14
-            ],
-            [
-              11,
-              24
-            ]
-          ]
+          "stops": [[7, 13], [10, 18], [15, 26]]
         },
         "text-field": "{name}",
         "text-max-width": 8,
+        "text-offset": [
+          "step",
+          ["zoom"],
+          ["literal", [0, -0.3]],
+          8,
+          ["literal", [0, 0]]
+        ],
+        "text-anchor": {
+          "stops": [
+            [0, "bottom"],
+            [8, "center"]
+          ]
+        },
+        "icon-image": "place-dot-black",
+        "icon-size": 0.33,
         "visibility": "visible"
       },
       "paint": {
-        "text-color": "#333",
-        "text-halo-width": 1.2,
-        "text-halo-color": "rgba(255,255,255,0.8)"
+        "text-color": "#0c0c0e",
+        "text-halo-width": 2,
+        "text-halo-color": "rgba(255,255,255,0.8)",
+        "icon-opacity": ["step", ["zoom"], 1, 8, 0]
       }
     },
     {
@@ -5128,6 +5156,7 @@
       },
       "source": "basemap",
       "source-layer": "place",
+      "maxzoom": 15,
       "filter": [
         "all",
         [
@@ -5142,30 +5171,40 @@
         ]
       ],
       "layout": {
-        "text-font": [
-          "Noto Sans Regular"
-        ],
-        "text-size": {
-          "base": 1.2,
+        "text-font": {
           "stops": [
-            [
-              7,
-              14
-            ],
-            [
-              11,
-              24
-            ]
+            [0, ["Noto Sans Bold"]],
+            [8, ["Noto Sans Regular"]]
           ]
         },
+        "text-size": {
+          "base": 1.2,
+          "stops": [[7, 15], [10, 24], [15, 32]]
+        },
         "text-field": "{name}",
         "text-max-width": 8,
+        "text-offset": [
+          "step",
+          ["zoom"],
+          ["literal", [0, -0.3]],
+          8,
+          ["literal", [0, 0]]
+        ],
+        "text-anchor": {
+          "stops": [
+            [0, "bottom"],
+            [8, "center"]
+          ]
+        },
+        "icon-image": "place-circled-dot-black",
+        "icon-size": 0.5,
         "visibility": "visible"
       },
       "paint": {
         "text-color": "#333",
         "text-halo-width": 1.2,
-        "text-halo-color": "rgba(255,255,255,0.8)"
+        "text-halo-color": "rgba(255,255,255,0.8)",
+        "icon-opacity": ["step", ["zoom"], 1, 8, 0]
       }
     },
     {