Visualizing Water: 3D Rendering of River Basins (draft)

Part 4: how to represent water flux over 3D maps of river basins using Deck.gl.

Testing additional 3D mapping libraries to render river basin topography.

if(interactive()) setwd("_posts/2021-11-01-deckgl/")

library(knitr)
library(scales)
library(stringr)
library(data.table)
library(sf)
library(deckgl)

opts_chunk$set(res=220, pointsize=8)

# Default color palette
pal <- readRDS("../../_assets/pal_iwmi.rds")
par(font.main=1, cex.axis=.8)

# Load layers from Part 3
load("../2021-10-24-3dmap/_data/osm.RData")

adm.pts <- st_centroid(adm)
adm[, "color"] <- colour_ramp(
  unname(pal[1:3]))(seq(0, 1, length=nrow(adm)))
ext <- st_bbox(adm)

This implementation is derived from Deck.gl terrain demo.

Load terrain and satellite tilesets using R package deckgl.

mb_token = Sys.getenv("MAPBOX_TOKEN")
mapbox_api = "https://api.mapbox.com/v4/mapbox.%s/{z}/{x}/{y}.png?access_token=%s"
terrain_img = "terrain-rgb"
surface_img = "satellite"

elev_map = list(
  rScaler = 6553.6,
  gScaler = 25.6,
  bScaler = 0.1,
  offset = -10000  
)

props_basemap = list(
  minZoom = 0,
  maxZoom = 23,
  strategy = "no-overlap",
  elevationDecoder = elev_map,
  elevationData = sprintf(mapbox_api, terrain_img, mb_token),
  texture = sprintf(mapbox_api, surface_img, mb_token),
  wireframe = FALSE,
  color = c(255, 255, 255)
)

props_admin = list(
  getPolygon = JS("d => d.geometry.coordinates"),
  getElevation = ~ADM2_CODE/10,
  extruded = TRUE,
  pickable = TRUE,
  stroked = TRUE,
  filled = TRUE,
  wireframe = FALSE,
  lineWidthMinPixels = 2,
  getLineWidth = 2,
  getLineColor = pal[["light"]],
  getFillColor = ~alpha(color, .4),
  lineJointRounded = TRUE,
  material = list(ambient=0.35, diffuse=0.7, shininess=32),
  tooltip = "Region: {{ADM1_NAME}}<br/>District: {{ADM2_NAME}}"  
)

props_text = list(
  pickable = FALSE,
  getPosition = JS("d => d.geometry.coordinates"),
  getText = ~ADM2_NAME,
  getColor = pal[["black"]],
  sizeMinPixels = 11,
  sizeMaxPixels = 18,
  getAngle = 0,
  background = TRUE,
  backgroundPadding = c(2, 2),
  getBackgroundColor = pal[["light"]]
)

deckgl(
  element_id = "map",
  width = "100%",
  height = "360px",  
  longitude = -8,
  latitude = 11,
  zoom = 5,
  bearing = 0,
  pitch = 40,
  maxPitch = 180,
) %>%
  add_layer("TerrainLayer", properties=props_basemap) %>%
  add_polygon_layer(data=adm, properties=props_admin) %>%
  add_text_layer(data=adm.pts, properties=props_text)

Use Shift + Click to tilt the view angle.

Using Mapbox experimental vector tiles below.

props_admin = list(
  getPolygon = JS("d => d.geometry.coordinates"),
  getElevation = ~ADM2_CODE/10,
  extruded = FALSE,
  pickable = TRUE,
  stroked = TRUE,
  filled = TRUE,
  wireframe = FALSE,
  lineWidthMinPixels = 1,
  getLineWidth = 1,
  getLineColor = pal[["orange"]],
  getFillColor = alpha(pal[["orange"]], .4),
  lineJointRounded = TRUE,
  material = list(ambient=0.35, diffuse=0.7, shininess=32),
  tooltip = "Region: {{ADM1_NAME}}<br/>District: {{ADM2_NAME}}"  
)

props_water = list(
  pickable = FALSE,
  getPath = JS("d => d.geometry.coordinates"),
  getWidth = ~rescale(Class_hydr, to=c(2,8)),
  getColor = alpha(pal[["blue"]], .8),
  widthMinPixels = 2,
  widthMaxPixels = 8,
  capRounded = TRUE,
  jointRounded = TRUE,
  `_pathType` = "open"
)

deckgl(
  element_id = "map2",
  width = "100%",
  height = "360px",
  longitude = -8,
  latitude = 11,
  zoom = 5,
  bearing = 0,
  pitch = 0,
  maxPitch = 180,
) %>%
  add_basemap("https://api.maptiler.com/maps/42a84100-2300-4647-ba8f-a70afaf51946/style.json?key=JdazoF74wMMlc8Esnhmm") %>%
  add_polygon_layer(data=adm, properties=props_admin) %>%
  add_path_layer(data=gloric, properties=props_water)

Use Shift + Click to tilt the view angle.