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

Add a hillshade layer #1157

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Add a hillshade layer #1157

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6fb25d0
Add a hillshade layer
jleedev Sep 18, 2024
e12f62c
Move hillshade under water
jleedev Sep 18, 2024
56760ba
Changed the hillshade colors
jleedev Sep 18, 2024
ad3e8cb
Fade out more slowly
jleedev Sep 18, 2024
6ff4bcd
Add a toggle button
jleedev Sep 18, 2024
6eeca39
Upgrade maplibre-gl from 2.4.0 to 4.7.0
jleedev Sep 19, 2024
0f98db3
Increase hillshade source from 12 to 13.
jleedev Sep 19, 2024
4025dcb
Merge branch 'main' into jleedev-relieved
claysmalley Sep 23, 2024
607eeff
Darken shadow
jleedev Sep 23, 2024
1394349
Extract colors; disable by default
jleedev Sep 23, 2024
021c041
correct import
jleedev Sep 23, 2024
4977f95
Fade out even less
jleedev Sep 24, 2024
ca32102
Bump version
jleedev Sep 24, 2024
1dc4523
Merge branch 'main' into jleedev-relieved
claysmalley Dec 16, 2024
b951717
Merge branch 'main' into jleedev-relieved
claysmalley Dec 18, 2024
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
12 changes: 12 additions & 0 deletions src/js/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,18 @@ export function build(tileURL, spriteURL, glyphURL, locales) {
url: tileURL,
type: "vector",
},
dem: {
attribution:
'<a target="_blank" rel="noopener" href="https://registry.opendata.aws/terrain-tiles/">Terrain Tiles</a>',
type: "raster-dem",
tiles: [
"https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png",
],
encoding: "terrarium",
tileSize: 256,
// The actual maxzoom is 15
maxzoom: 12,
},
},
sprite: spriteURL,
light: {
Expand Down
19 changes: 19 additions & 0 deletions src/layer/hillshade.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export const hillshading = {
id: "hillshading",
type: "hillshade",
source: "dem",
paint: {
"hillshade-exaggeration": [
"interpolate",
["linear"],
["zoom"],
3,
0.2,
12,
0.5,
],
"hillshade-shadow-color": "rgba(102,85,51,1)",
"hillshade-highlight-color": "rgba(255,255,204,1)",
"hillshade-accent-color": "rgba(0,0,0,1)",
Copy link
Member

Choose a reason for hiding this comment

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

With these colors, some road lines don’t have a lot of contrast against the background, while the knockouts around labels stand out enough to look like halos again. Maybe we could try moving all three colors closer to the preexisting background color. This could also help the layer recede into the background while still conveying information about rugged terrain to those who look for it.

Copy link
Member Author

Choose a reason for hiding this comment

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

Tamed it a lot. Since the hillshade is now restricted to the luminance space, I increase the exaggeration at low zooms since it no longer fights with other colors. It fades away at high zooms to avoid ruining the foreground by being a murky blob, and to avoid getting confused by things like stadiums.

Copy link
Member

Choose a reason for hiding this comment

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

In the flat lands, the old version made it actually look like a crumpled paper map :-D

},
};
3 changes: 3 additions & 0 deletions src/layer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import * as lyrBackground from "./background.js";
import * as lyrBoundary from "./boundary.js";
import * as lyrConstruction from "./construction.js";
import * as lyrHighwayShield from "./highway_shield.js";
import * as lyrHillshade from "./hillshade.js";
import * as lyrLanduse from "./landuse.js";
import * as lyrOneway from "./oneway.js";
import * as lyrPark from "./park.js";
Expand Down Expand Up @@ -83,6 +84,8 @@ export function build(locales) {

lyrFerry.ferry,

lyrHillshade.hillshading,
Copy link
Member

Choose a reason for hiding this comment

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

The Terrarium tiles are a bit sensitive to artificial structures like dams that look a bit strange over water, like the Lock and Dam Number 12 on the Mississippi River at Bellevue, Iowa:

A big embankment formed by the hillshading layer in the middle of the river.

If we move this layer lower in the stack, such as right below water_line, then the waterbody layer would tend to obscure this and other anomalies over water:

Most of the embankment gone, save for a small secondary protrusion on the landward side.

However, the tradeoff is that the “hill” shading would no longer double as a bathymetry layer at sea:

Before After
Seamounts and ridges on the sea floor around the Bahamas. Solid water fill.

While bathymetry is pretty cool, I think it’s far enough out of scope of a (land) transportation map as to be a distraction. It also looks a bit discolored without hypsometric tinting, whereas on land the absence of that tinting is quite reasonable on a non-topographic map. (General-purpose overview maps would prioritize showing the continental shelf using hypsometric tinting before bothering with elevation shading.)

Copy link
Member Author

Choose a reason for hiding this comment

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

Unfortunately this means farewell to "tunnels under terrain", which was pretty cute.

It's a little odd to see the ocean floor load and then get covered with water but it makes sense when you think about it.

Now there are no longer enormous glitches all over the entire ocean, just a few.

Copy link
Member

Choose a reason for hiding this comment

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

Incidentally, #995 gives tunnels a different treatment that wouldn’t really exhibit the cute underlapping effect anyways.

The flash of bathymetry feels like an unsubtle Easter egg, of which we have too few in this project. 🙃 In seriousness, maybe we could load the DEM source and hillshade layer only after the main sources and layers load, to avoid jank and unnecessary bandwidth and power usage. To avoid distracting the user on land, we could fade in the hillshade layer with a hillshade-exaggeration-transition property, akin to deferred 3D terrain in F4Map, though I don’t know how well that would perform.


lyrAeroway.runway,
lyrAeroway.runwayArea,
lyrAeroway.taxiway,
Expand Down