Merge pull request #299 from headwaymaps/mkirk/map-style-tweaks

[basemap] small tweaks to map style: water, background, and building style
headwaymaps · Jan 10, 2024 · fab9e19 · fab9e19
2 parents af4d937 + 9e431df
commit fab9e19
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/services/frontend/www-app/src/components/BaseMap.vue b/services/frontend/www-app/src/components/BaseMap.vue
@@ -607,7 +607,7 @@ export default defineComponent({
       }
 
       // Add 3-D buildings
-      const render3DZoomLevel = 15;
+      const render3DZoomLevel = 17;
       type LerpableValue =
         | maplibregl.ExpressionSpecification
         | maplibregl.ColorSpecification
@@ -647,10 +647,11 @@ export default defineComponent({
           type: 'fill-extrusion',
           minzoom: render3DZoomLevel,
           paint: {
-            'fill-extrusion-color': zoomLerp<maplibregl.ColorSpecification>(
-              'hsl(35, 8%, 85%)',
-              'hsl(35, 8%, 75%)'
-            ),
+            // This value is based on the background-fill of the "buildings" layer in tileserver/styles/basic/style.json
+            // But the extruded rendering appears "brighter", presumably due rendering lighting effects, so I've
+            // reduced the brightness here to compensate. What we want is an imperceptible transition between 2d and 3d
+            // as the user zooms in.
+            'fill-extrusion-color': 'hsl(40, 5.5%, 87%)',
             'fill-extrusion-height':
               zoomLerp<maplibregl.ExpressionSpecification>(0, [
                 '*',

diff --git a/services/tileserver/styles/basic/style.json b/services/tileserver/styles/basic/style.json
@@ -1,6 +1,6 @@
 {
   "version": 8,
-  "name": "OSM Liberty",
+  "name": "Headway Default",
   "metadata": {
     "maputnik:license": "https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md",
     "maputnik:renderer": "mbgljs",
@@ -24,7 +24,7 @@
     {
       "id": "background",
       "type": "background",
-      "paint": {"background-color": "rgb(239,239,239)"}
+      "paint": {"background-color": "rgb(241,239,231)"}
     },
     {
       "id": "natural_earth",
@@ -159,7 +159,7 @@
       "source": "openmaptiles",
       "source-layer": "water",
       "filter": ["all", ["!=", "brunnel", "tunnel"]],
-      "paint": {"fill-color": "rgb(158,189,255)"}
+      "paint": {"fill-color": "rgb(141,220,248)"}
     },
     {
       "id": "waterway_river",
@@ -1225,10 +1225,10 @@
       "source-layer": "building",
       "minzoom": 13,
       "paint": {
-        "fill-color": "hsl(35, 8%, 85%)",
+        "fill-color": "hsl(40, 5.5%, 89.2%)",
         "fill-outline-color": {
           "base": 1,
-          "stops": [[13, "hsla(35, 6%, 79%, 0.32)"], [14, "hsl(35, 6%, 79%)"]]
+          "stops": [[13, "hsla(40, 6%, 79%, 0.32)"], [14, "hsl(40, 6%, 79%)"]]
         }
       }
     },