Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve mid-zoom levels and water color #2654

Merged
merged 6 commits into from
Jul 31, 2017
Merged

Improve mid-zoom levels and water color #2654

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5fd79b7
Improve mid-zoom levels and water color
matthijsmelissen Jun 2, 2017
5dbe0dd
Switch to using an image filter rather than opacity for landcover
matthijsmelissen Jul 11, 2017
f038cb2
Make residential on z11 and z12 lighter again
matthijsmelissen Jul 11, 2017
00fd998
Reduce width secondary/tertiary on z11/z12
matthijsmelissen Jul 18, 2017
faef18b
Make color dimming at z8/z9 less extreme
matthijsmelissen Jul 19, 2017
1a4f111
Proper hexvalue for @water-text
matthijsmelissen Jul 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 26 additions & 4 deletions landcover.mss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@

// --- "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)
@retail: #ffd6d1; // Lch(89,16,30)
Expand Down Expand Up @@ -64,6 +66,17 @@

#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); }
::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],
::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 @@ -198,7 +211,9 @@
}

[feature = 'landuse_residential'][zoom >= 10] {
polygon-fill: @residential;
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;
Expand Down Expand Up @@ -324,7 +339,9 @@
}

[feature = 'landuse_retail'][zoom >= 10] {
polygon-fill: @retail;
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;
Expand All @@ -337,7 +354,9 @@
}

[feature = 'landuse_industrial'][zoom >= 10] {
polygon-fill: @industrial;
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;
Expand Down Expand Up @@ -379,7 +398,9 @@
}

[feature = 'landuse_commercial'][zoom >= 10] {
polygon-fill: @commercial;
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;
Expand Down Expand Up @@ -576,6 +597,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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
@land-color: #f2efe9;

@standard-halo-radius: 1;
Expand Down
2 changes: 1 addition & 1 deletion water.mss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@water-text: #6699cc;
@water-text: darken(#6699cc, 10%);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that the color testing is over, I would simply change it to a proper hex value (#4D80B3).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

@glacier: #ddecec;
@glacier-line: #9cf;

Expand Down