Skip to content

Commit

Permalink
Improve mid-zoom levels and water color
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@matthijsmelissen
matthijsmelissen committed Jun 3, 2017
1 parent c169d8b commit 5fd79b7
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 38 deletions.
25 changes: 25 additions & 0 deletions landcover.mss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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'],
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -576,6 +600,7 @@
[way_pixels >= 64] { polygon-gamma: 0.3; }
}
}
}

/* man_made=cutline */
#landcover-line {
Expand Down
4 changes: 2 additions & 2 deletions project.mml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
77 changes: 43 additions & 34 deletions roads.mss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

@tertiary-shield: #3b3b3b;

@unimportant-road: @residential-casing;
@unimportant-road: white;

@residential-construction: #aaa;
@service-construction: #aaa;
Expand Down Expand Up @@ -78,19 +78,23 @@
@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;
@trunk-width-z12: 3.5;
@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;
Expand All @@ -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;
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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'],
Expand Down
2 changes: 1 addition & 1 deletion style.mss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ Map {
background-color: @water-color;
}

@water-color: #b5d0d0;
@water-color: #aad3df;

This comment has been minimized.

Sign in to view

Copy link
@jarlarntzen

jarlarntzen Sep 1, 2017

This is a fantastic change for the better! Thank you so much! It is finally possible to tell small lakes apart from the surrounding forest!

This comment has been minimized.

Sign in to view

Copy link
@kocio-pl

kocio-pl Sep 1, 2017

Collaborator

@jarlarntzen It all started with #1781, indeed. But it's interesting for me that nobody ever said a word about leaving original color, and we have plenty of disagreements about rendering, so it was probably really needed not only in relation to the forest.
@land-color: #f2efe9;

@standard-halo-radius: 1;
Expand Down
2 changes: 1 addition & 1 deletion water.mss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@water-text: #6699cc;
@water-text: darken(#6699cc, 10%);
@glacier: #ddecec;
@glacier-line: #9cf;

Expand Down

0 comments on commit 5fd79b7

Please sign in to comment.