From 5fd79b7bfad1d895c543e52838c65657fcd9fe1a Mon Sep 17 00:00:00 2001 From: math1985 Date: Sat, 3 Jun 2017 00:18:48 +0200 Subject: [PATCH 1/6] Improve mid-zoom levels and water color This PR changes the following: * Landcover in z<12 is now less bright. * Built-up landcover areas are now rendered more prominently in z<12. * Unimportant roads are now white rather than gray. * Water is now a brighter blue (thakns @kocio-pl). * Low/midzoom roads are now rendered with bright halos. This should improve the legibility and esthetics of the map. In particular: * Roads, esp. primary roads, are now better legible on zooms 8-11 * Water areas are easier to recognize * Minor roads on mid-zoom levels are rendered more clearly * Residential areas are more prominent and easier to recognize --- landcover.mss | 25 +++++++++++++++++ project.mml | 4 +-- roads.mss | 77 ++++++++++++++++++++++++++++----------------------- style.mss | 2 +- water.mss | 2 +- 5 files changed, 72 insertions(+), 38 deletions(-) diff --git a/landcover.mss b/landcover.mss index 79875f50f8..a471b91800 100644 --- a/landcover.mss +++ b/landcover.mss @@ -11,6 +11,7 @@ @residential: #e0dfdf; // Lch(89,0,0) @residential-line: #b9b9b9; // Lch(75,0,0) +@built-up-lowzoom: #aaaaaa; @retail: #ffd6d1; // Lch(89,16,30) @retail-line: #d99c95; // Lch(70,25,30) @commercial: #f2dad9; // Lch(89,8.5,25) @@ -64,6 +65,17 @@ #landcover-low-zoom[zoom < 10], #landcover[zoom >= 10] { + ::low-zoom[zoom < 10] { opacity: 0.3; } + ::lower-mid-zoom[zoom >= 10][zoom < 11] { opacity: 0.4; } + ::mid-zoom[zoom >= 11][zoom < 12] { opacity: 0.5; } + ::upper-mid-zoom[zoom >= 12][zoom < 13] { opacity: 0.6; } + ::high-zoom[zoom >= 13] { opacity: 1; } + + ::low-zoom[zoom < 10], + ::lower-mid-zoom[zoom >= 10][zoom < 11], + ::mid-zoom[zoom >= 11][zoom < 12], + ::upper-mid-zoom[zoom >= 12][zoom < 13], + ::high-zoom[zoom >= 13] { ::first { [feature = 'wetland_mud'], @@ -199,6 +211,9 @@ [feature = 'landuse_residential'][zoom >= 10] { polygon-fill: @residential; + [zoom < 13] { + polygon-fill: @built-up-lowzoom; + } [zoom >= 16] { line-width: .5; line-color: @residential-line; @@ -325,6 +340,9 @@ [feature = 'landuse_retail'][zoom >= 10] { polygon-fill: @retail; + [zoom < 13] { + polygon-fill: @built-up-lowzoom; + } [zoom >= 16] { line-width: 0.5; line-color: @retail-line; @@ -338,6 +356,9 @@ [feature = 'landuse_industrial'][zoom >= 10] { polygon-fill: @industrial; + [zoom < 13] { + polygon-fill: @built-up-lowzoom; + } [zoom >= 16] { line-width: .5; line-color: @industrial-line; @@ -380,6 +401,9 @@ [feature = 'landuse_commercial'][zoom >= 10] { polygon-fill: @commercial; + [zoom < 13] { + polygon-fill: @built-up-lowzoom; + } [zoom >= 16] { line-width: 0.5; line-color: @commercial-line; @@ -576,6 +600,7 @@ [way_pixels >= 64] { polygon-gamma: 0.3; } } } +} /* man_made=cutline */ #landcover-line { diff --git a/project.mml b/project.mml index 023fcabcc5..918f2d8415 100644 --- a/project.mml +++ b/project.mml @@ -102,10 +102,10 @@ Layer: <<: *osm2pgsql table: |- (SELECT - way, name, way_pixels, + way, name, way_pixels, religion, COALESCE(wetland, landuse, "natural") AS feature FROM (SELECT - way, COALESCE(name, '') AS name, + way, COALESCE(name, '') AS name, religion, ('landuse_' || (CASE WHEN landuse IN ('forest', 'military') THEN landuse ELSE NULL END)) AS landuse, ('natural_' || (CASE WHEN "natural" IN ('wood', 'sand', 'scree', 'shingle', 'bare_rock') THEN "natural" ELSE NULL END)) AS "natural", ('wetland_' || (CASE WHEN "natural" IN ('wetland', 'mud') THEN (CASE WHEN "natural" IN ('mud') THEN "natural" ELSE tags->'wetland' END) ELSE NULL END)) AS wetland, diff --git a/roads.mss b/roads.mss index c7f5fb2fda..b97c2addb4 100644 --- a/roads.mss +++ b/roads.mss @@ -40,7 +40,7 @@ @tertiary-shield: #3b3b3b; -@unimportant-road: @residential-casing; +@unimportant-road: white; @residential-construction: #aaa; @service-construction: #aaa; @@ -78,12 +78,14 @@ @motorway-width-z10: 1.9; @trunk-width-z10: 1.9; @primary-width-z10: 1.8; -@secondary-width-z10: 1; +@secondary-width-z10: 1.4; +@tertiary-width-z10: 1; @motorway-width-z11: 2.0; @trunk-width-z11: 1.9; @primary-width-z11: 1.8; -@secondary-width-z11: 1; +@secondary-width-z11: 1.4; +@tertiary-width-z11: 1; @motorway-width-z12: 3.5; @motorway-link-width-z12: 1.5; @@ -91,6 +93,8 @@ @primary-width-z12: 3.5; @secondary-width-z12: 3.5; @tertiary-width-z12: 2.5; +@residential-width-z12: 0.5; +@unclassified-width-z12: 0.8; @motorway-width-z13: 6; @motorway-link-width-z13: 4; @@ -99,6 +103,7 @@ @secondary-width-z13: 5; @tertiary-width-z13: 4; @residential-width-z13: 2.5; +@service-width-z13: 0.8; @living-street-width-z13: 2; @pedestrian-width-z13: 2; @bridleway-width-z13: 0.3; @@ -250,7 +255,9 @@ @paths-tunnel-casing-width: 1; @junction-text-color: #960000; -@halo-color-for-minor-road: white; +@halo-color-for-minor-road: white; +@lowzoom-halo-color: white; +@lowzoom-halo-width: 1; @motorway-oneway-arrow-color: darken(@motorway-casing, 25%); @trunk-oneway-arrow-color: darken(@trunk-casing, 25%); @@ -1039,33 +1046,32 @@ tertiary is rendered from z10 and is not included in osm_planet_roads. */ .roads-fill[zoom >= 10], .bridges-fill[zoom >= 10], .tunnels-fill[zoom >= 10] { + ::halo { - [zoom = 9][feature = 'highway_secondary'] { - line-color: @halo-color-for-minor-road; - line-width: 2.2; - line-opacity: 0.4; - line-join: round; - //Missing line-cap: round; is intentional. It would cause rendering glow multiple times in some places - what as result of partial transparency would cause differences in rendering - //Also, bridges - including bridge casings - are rendered on top of roads. Enabling line-cap: round would result in glow from bridges rendered on top of road around bridges. - } - [zoom = 10][feature = 'highway_secondary'], - [zoom = 11][feature = 'highway_secondary'] { - line-color: @halo-color-for-minor-road; - line-width: 2.7; - line-opacity: 0.4; - line-join: round; - //Missing line-cap: round; is intentional. It would cause rendering glow multiple times in some places - what as result of partial transparency would cause differences in rendering - //Also, bridges - including bridge casings - are rendered on top of roads. Enabling line-cap: round would result in glow from bridges rendered on top of road around bridges. - } - [zoom = 10][feature = 'highway_tertiary'], - [zoom = 11][feature = 'highway_tertiary'], - [zoom = 12][feature = 'highway_unclassified'] { - line-color: @halo-color-for-minor-road; - line-width: 2.2; - line-opacity: 0.3; - line-join: round; - //Missing line-cap: round; is intentional. It would cause rendering glow multiple times in some places - what as result of partial transparency would cause differences in rendering - //Also, bridges - including bridge casings are rendered on top of roads. Enabling line-cap: round would result in glow from bridges rendered on top of road around bridges. + [feature = 'highway_motorway'][link != 'yes'][zoom >= 8][zoom < 12], + [feature = 'highway_trunk'][link != 'yes'][zoom >= 8][zoom < 12], + [feature = 'highway_primary'][link != 'yes'][zoom >= 8][zoom < 12], + [feature = 'highway_secondary'][link != 'yes'][zoom >= 11][zoom < 12] { + [feature = 'highway_motorway'] { + [zoom >= 8] { line-width: @motorway-width-z8 + 2 * @lowzoom-halo-width; } + [zoom >= 9] { line-width: @motorway-width-z9 + 2 * @lowzoom-halo-width; } + [zoom >= 10] { line-width: @motorway-width-z10 + 2 * @lowzoom-halo-width; } + [zoom >= 11] { line-width: @motorway-width-z11 + 2 * @lowzoom-halo-width; } + } + [feature = 'highway_trunk'] { + [zoom >= 8] { line-width: @trunk-width-z8 + 2 * @lowzoom-halo-width; } + [zoom >= 9] { line-width: @trunk-width-z9 + 2 * @lowzoom-halo-width; } + [zoom >= 10] { line-width: @trunk-width-z10 + 2 * @lowzoom-halo-width; } + [zoom >= 11] { line-width: @trunk-width-z11 + 2 * @lowzoom-halo-width; } + } + [feature = 'highway_primary'] { + [zoom >= 8] { line-width: @primary-width-z8 + 2 * @lowzoom-halo-width; } + [zoom >= 9] { line-width: @primary-width-z9 + 2 * @lowzoom-halo-width; } + [zoom >= 10] { line-width: @primary-width-z10 + 2 * @lowzoom-halo-width; } + [zoom >= 11] { line-width: @primary-width-z11 + 2 * @lowzoom-halo-width; } + } + line-color: @lowzoom-halo-color; + line-opacity: .4; } } @@ -1316,7 +1322,10 @@ tertiary is rendered from z10 and is not included in osm_planet_roads. */ [feature = 'highway_tertiary'] { [zoom >= 10] { line-color: @unimportant-road; - line-width: 0.55; + line-width: @tertiary-width-z10; + } + [zoom >= 10] { + line-width: @tertiary-width-z11; } [zoom >= 12] { line-color: @tertiary-fill; @@ -1350,11 +1359,11 @@ tertiary is rendered from z10 and is not included in osm_planet_roads. */ [feature = 'highway_unclassified'] { [zoom = 12][feature = 'highway_residential'] { line-color: @unimportant-road; - line-width: 0.4; + line-width: @residential-width-z12; } [zoom = 12][feature = 'highway_unclassified'] { line-color: @unimportant-road; - line-width: 1; + line-width: @unclassified-width-z12; } [zoom >= 13] { line-width: @residential-width-z13 - 2 * @residential-casing-width-z13; @@ -1445,7 +1454,7 @@ tertiary is rendered from z10 and is not included in osm_planet_roads. */ [feature = 'highway_service'] { [zoom >= 13][service = 'INT-normal'] { - line-width: 1; + line-width: @service-width-z13; line-color: @unimportant-road; } [zoom >= 14][service = 'INT-normal'], diff --git a/style.mss b/style.mss index 426529ea30..2eb24ea1a6 100644 --- a/style.mss +++ b/style.mss @@ -2,7 +2,7 @@ Map { background-color: @water-color; } -@water-color: #b5d0d0; +@water-color: #aad3df; @land-color: #f2efe9; @standard-halo-radius: 1; diff --git a/water.mss b/water.mss index 3a766dfe32..9df268adfb 100644 --- a/water.mss +++ b/water.mss @@ -1,4 +1,4 @@ -@water-text: #6699cc; +@water-text: darken(#6699cc, 10%); @glacier: #ddecec; @glacier-line: #9cf; From 5dbe0dde6ad2298741b2622d4c2fd86fa872f63b Mon Sep 17 00:00:00 2001 From: math1985 Date: Wed, 12 Jul 2017 00:01:30 +0200 Subject: [PATCH 2/6] Switch to using an image filter rather than opacity for landcover --- landcover.mss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/landcover.mss b/landcover.mss index a471b91800..7d1ab77c6a 100644 --- a/landcover.mss +++ b/landcover.mss @@ -65,11 +65,11 @@ #landcover-low-zoom[zoom < 10], #landcover[zoom >= 10] { - ::low-zoom[zoom < 10] { opacity: 0.3; } - ::lower-mid-zoom[zoom >= 10][zoom < 11] { opacity: 0.4; } - ::mid-zoom[zoom >= 11][zoom < 12] { opacity: 0.5; } - ::upper-mid-zoom[zoom >= 12][zoom < 13] { opacity: 0.6; } - ::high-zoom[zoom >= 13] { opacity: 1; } + ::low-zoom[zoom < 10] { image-filters: scale-hsla(0,1,0,1,0.7,0.95,0,1); } + ::lower-mid-zoom[zoom >= 10][zoom < 11] { image-filters: scale-hsla(0,1,0,1,0.6,0.95,0,1); } + ::mid-zoom[zoom >= 11][zoom < 12] { image-filters: scale-hsla(0,1,0,1,0.5,0.96,0,1); } + ::upper-mid-zoom[zoom >= 12][zoom < 13] { image-filters: scale-hsla(0,1,0,1,0.4,0.97,0,1); } + ::high-zoom[zoom >= 13] { image-filters: scale-hsla(0,1,0,1,0, 1, 0,1); } ::low-zoom[zoom < 10], ::lower-mid-zoom[zoom >= 10][zoom < 11], From f038cb2c2b7316c0dfb9fee7544402271477c68b Mon Sep 17 00:00:00 2001 From: math1985 Date: Wed, 12 Jul 2017 00:46:54 +0200 Subject: [PATCH 3/6] Make residential on z11 and z12 lighter again --- landcover.mss | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/landcover.mss b/landcover.mss index 7d1ab77c6a..88e669db64 100644 --- a/landcover.mss +++ b/landcover.mss @@ -9,9 +9,10 @@ // --- "Base" landuses --- +@built-up-upper-lowzoom: #c0c0c0; +@built-up-lower-lowzoom: #aaaaaa; @residential: #e0dfdf; // Lch(89,0,0) @residential-line: #b9b9b9; // Lch(75,0,0) -@built-up-lowzoom: #aaaaaa; @retail: #ffd6d1; // Lch(89,16,30) @retail-line: #d99c95; // Lch(70,25,30) @commercial: #f2dad9; // Lch(89,8.5,25) @@ -210,10 +211,9 @@ } [feature = 'landuse_residential'][zoom >= 10] { - polygon-fill: @residential; - [zoom < 13] { - polygon-fill: @built-up-lowzoom; - } + polygon-fill: @built-up-lower-lowzoom; + [zoom >= 11] { polygon-fill: @built-up-upper-lowzoom; } + [zoom >= 13] { polygon-fill: @residential; } [zoom >= 16] { line-width: .5; line-color: @residential-line; @@ -339,10 +339,9 @@ } [feature = 'landuse_retail'][zoom >= 10] { - polygon-fill: @retail; - [zoom < 13] { - polygon-fill: @built-up-lowzoom; - } + polygon-fill: @built-up-lower-lowzoom; + [zoom >= 11] { polygon-fill: @built-up-upper-lowzoom; } + [zoom >= 13] { polygon-fill: @retail; } [zoom >= 16] { line-width: 0.5; line-color: @retail-line; @@ -355,10 +354,9 @@ } [feature = 'landuse_industrial'][zoom >= 10] { - polygon-fill: @industrial; - [zoom < 13] { - polygon-fill: @built-up-lowzoom; - } + polygon-fill: @built-up-lower-lowzoom; + [zoom >= 11] { polygon-fill: @built-up-upper-lowzoom; } + [zoom >= 13] { polygon-fill: @industrial; } [zoom >= 16] { line-width: .5; line-color: @industrial-line; @@ -400,10 +398,9 @@ } [feature = 'landuse_commercial'][zoom >= 10] { - polygon-fill: @commercial; - [zoom < 13] { - polygon-fill: @built-up-lowzoom; - } + polygon-fill: @built-up-lower-lowzoom; + [zoom >= 11] { polygon-fill: @built-up-upper-lowzoom; } + [zoom >= 13] { polygon-fill: @commercial; } [zoom >= 16] { line-width: 0.5; line-color: @commercial-line; From 00fd998ca9bdc9c57dea1e1d4e5a110840d6109c Mon Sep 17 00:00:00 2001 From: math1985 Date: Wed, 19 Jul 2017 00:09:59 +0200 Subject: [PATCH 4/6] Reduce width secondary/tertiary on z11/z12 --- roads.mss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/roads.mss b/roads.mss index b97c2addb4..bd51434ccd 100644 --- a/roads.mss +++ b/roads.mss @@ -78,14 +78,14 @@ @motorway-width-z10: 1.9; @trunk-width-z10: 1.9; @primary-width-z10: 1.8; -@secondary-width-z10: 1.4; -@tertiary-width-z10: 1; +@secondary-width-z10: 1.1; +@tertiary-width-z10: 0.7; @motorway-width-z11: 2.0; @trunk-width-z11: 1.9; @primary-width-z11: 1.8; -@secondary-width-z11: 1.4; -@tertiary-width-z11: 1; +@secondary-width-z11: 1.1; +@tertiary-width-z11: 0.7; @motorway-width-z12: 3.5; @motorway-link-width-z12: 1.5; @@ -1284,10 +1284,7 @@ tertiary is rendered from z10 and is not included in osm_planet_roads. */ line-color: @unimportant-road; line-width: @secondary-width-z9; } - [zoom >=10] { - line-color: @unimportant-road; - line-width: @secondary-width-z10; - } + [zoom >= 10] { line-width: @secondary-width-z10; } [zoom >= 11] { line-width: @secondary-width-z11; } [zoom >= 12] { line-color: @secondary-fill; @@ -1324,7 +1321,7 @@ tertiary is rendered from z10 and is not included in osm_planet_roads. */ line-color: @unimportant-road; line-width: @tertiary-width-z10; } - [zoom >= 10] { + [zoom >= 11] { line-width: @tertiary-width-z11; } [zoom >= 12] { From faef18bbc679104a68ab445666865beaf62210c3 Mon Sep 17 00:00:00 2001 From: math1985 Date: Thu, 20 Jul 2017 00:10:56 +0200 Subject: [PATCH 5/6] Make color dimming at z8/z9 less extreme --- landcover.mss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/landcover.mss b/landcover.mss index 88e669db64..aeffe04308 100644 --- a/landcover.mss +++ b/landcover.mss @@ -66,7 +66,7 @@ #landcover-low-zoom[zoom < 10], #landcover[zoom >= 10] { - ::low-zoom[zoom < 10] { image-filters: scale-hsla(0,1,0,1,0.7,0.95,0,1); } + ::low-zoom[zoom < 10] { image-filters: scale-hsla(0,1,0,1,0.6,0.95,0,1); } ::lower-mid-zoom[zoom >= 10][zoom < 11] { image-filters: scale-hsla(0,1,0,1,0.6,0.95,0,1); } ::mid-zoom[zoom >= 11][zoom < 12] { image-filters: scale-hsla(0,1,0,1,0.5,0.96,0,1); } ::upper-mid-zoom[zoom >= 12][zoom < 13] { image-filters: scale-hsla(0,1,0,1,0.4,0.97,0,1); } From 1a4f1111cd9b6067992a0c37dd85c82b84fc98a5 Mon Sep 17 00:00:00 2001 From: math1985 Date: Thu, 20 Jul 2017 00:14:53 +0200 Subject: [PATCH 6/6] Proper hexvalue for @water-text --- water.mss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/water.mss b/water.mss index 9df268adfb..c5a7c4d10d 100644 --- a/water.mss +++ b/water.mss @@ -1,4 +1,4 @@ -@water-text: darken(#6699cc, 10%); +@water-text: #4d80b3; @glacier: #ddecec; @glacier-line: #9cf;