DIY Hillshade Sahil Chinoy has a really excellent notebook explaining the basic processes of drawing shaded relief maps in a web browser from digital elevation images, inspired by (and improving!) an old project of mine. It's a great interactive walkthrough of how you can work with a few things—sun elevation, sun azimuth, and terrain elevation data—to produce a simple hillshade. Inspired by that, here are more examples of how this kind of "DIY" hillshading is an artistically, albeit not computationally, powerful way to go about it, because of a host of variables you can tweak to control the final image. While I've more often built on this basic code to produce wilder maps, I've recently returned to simple hillshading and will share some of the knobs I've been fiddling with. For the best effect, view this in Chrome. Some other browsers don't yet support some features used here.
Hillshading a web map
viewof map = { let mapContainer = DOM.element('div', { style: `width:${width}px;height:${height}px` }); yield mapContainer; let map = L.map(mapContainer, { maxZoom: 15, scrollWheelZoom: false }).setView([36.2378784701662,-112.40086555480958], 11); let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // empty tile layer, used as a convenient way to know which terrain tiles to load (manually) let terrainLayer = L.tileLayer('', { attribution: 'Terrain tiles developed by Mapzen' }).addTo(map); // empty tile layer, used as a convenient way to know which terrain tiles to load (manually) let waterLayer = L.tileLayer('').addTo(map); let hillshadePane = map.createPane('hillshade'); hillshadePane.appendChild(finalMapCanvas); let delay; // on map move, reset canvas position and regenerate hillshade const draw = () => { clearTimeout(delay); // a short makes it a little easier to pan around without constant redrawing delay = setTimeout(() => { finalMapContext.clearRect(0, 0, width, height); const top_left = map.containerPointToLayerPoint([0, 0]); L.DomUtil.setPosition(finalMapCanvas, top_left); // reassigning a value to tileObjects kicks off elevation data loading and rendering, in notebook cells below mutable terrainTileObjects = Object.entries(terrainLayer._tiles).map(t => t[1]); mutable waterTileObjects = Object.entries(waterLayer._tiles).map(t => t[1]); }, 500); } map.on('moveend', draw) .on('movestart', () => { clearTimeout(delay); }); draw(); mapContainer.value = map; }
Above is an interactive Leaflet map showing shaded relief that's rendered any time the map moves. Pan and zoom around! But please be patient! This is not an efficient way to get shaded relief on a web map, so it will take a few seconds to draw after you move the map or change any settings. If it ever shows up as blank gray, try moving it just a little to trigger re-rendering. Before getting to all the controls, the first thing to note is that you can do all this using Terrain Tiles developed a few years ago by Mapzen and hosted on AWS. In contrast to grayscale images in the original project, which are limited to 255 elevation values, these images encode a full range of elevation. And, since they're standard web map tiles, you can easily plug all this into a web map and calculate shaded relief for anywhere in the world.
Light source As Sahil (whose widgets I've imported here) showed, the height and direction of the light source are the most basic variables of hillshading, affecting the strength and placement of shadows. Lately I've been enjoying a high sun, which has a pleasing way of highlighting terrain without being harsh. Play around with the slider. A lower elevation produces more shadow but is sometimes more appropriate, for example if you just want to lightly blend some hillshading with a base map.
viewof elevation = slider({ min: 0, max: 90, value: 71, step: 1, //format: ".0°", description: "Sun elevation in degrees" })
{ const svg = d3.select(DOM.svg(250, 120)) .style('font-style', 'italic') .style('font-size', '12px'); svg.append('text') .attr('x', 50) .attr('y', 15) .text('Azimuth') .style('text-anchor', 'middle') svg.append('circle') .attr('cx', 50) .attr('cy', 70) .attr('r', 40) .style('stroke', 'grey') .style('fill', 'none'); svg.append('rect') .attr('x', 46) .attr('y', 66) .attr('width', 8) .attr('height', 8) .style('fill', 'black') const sunAzimuth = azimuth * Math.PI / 180; const dx = Math.cos(sunAzimuth - Math.PI /2) * 40; const dy = Math.sin(sunAzimuth - Math.PI /2) * 40; svg.append('line') .attr('x1', 50) .attr('x2', 50 + dx) .attr('y1', 70) .attr('y2', 70 + dy) .style('stroke', 'black'); svg.append('circle') .attr('cx', 50 + dx) .attr('cy', 70 + dy) .attr('r', 5) .attr('fill', 'gold'); const g = svg.append('g') .attr('transform', 'translate(150, 30)'); g.append('text') .attr('x', 40) .attr('y', -15) .text('Elevation') .style('text-anchor', 'middle') g.append('path') .attr('d', 'M80 80 a 80 80 0 0 0 -80 -80') .style('fill', 'none') .style('stroke', 'grey'); const sunElev = elevation * Math.PI / 180; const dx2 = Math.cos(sunElev) * 80; const dy2 = Math.sin(sunElev) * 80; g.append('line') .attr('x1', 0) .attr('y1', 80) .attr('x2', dx2) .attr('y2', 80 - dy2) .style('stroke', 'black'); g.append('circle') .attr('cx', dx2) .attr('cy', 80 - dy2) .attr('r', 5) .attr('fill', 'gold'); g.append('rect') .attr('x', -4) .attr('y', 76) .attr('width', 8) .attr('height', 8) .style('fill', 'black') return svg.node(); }
Light coming from the top left is generally recommended, so I've buried the azimuth number at the bottom of the notebook. Find and change it if you like, but it's likely to mess with your visual perception of the map.
To save some scrolling, here's a copy of the map so you can see the effect of changes you make.
{ const canvas = DOM.canvas(width, height); canvas.getContext('2d').putImageData(finalMap, 0, 0); return canvas; }
Vertical exaggeration Depending on the terrain and other settings, exaggerating the relief vertically is frequently necessary for it to really look like relief. Mountains look tall in real life, but compared to the horizontal space depicted on most maps, they're actually not that big! In this implementation, however, the map sometimes looks better with a reduction in vertical scale (< 100%). This is a tough thing to set as a constant for all map extents, so it probably needs to be adjusted for any given location and zoom level.
// as a percent. 100 = no exaggeration verticalExaggeration = 300
In this example we're supplying a simple number by which terrain elevations are multiplied, but you could instead devise a more complicated scale that would exaggerate different elevation ranges differently. And if you dig into the algorithms later, you'll also find another z-factor used in a couple of places; the two could probably be combined into one somehow.
Terrain detail The beauty of maps is that they function by simplifying and abstracting the world into something meaningful and usable—if you tried to cram every real-world detail into a map, it would be unreadable. The broad cartographic term is generalization, and how much and what kind of it you should do depends on scale and purpose, among other things. With shaded relief, sometimes you want to show terrain in as much detail as possible, and sometimes you want a more generalized, "here are mountains" look. With map tiles, part of the job is done for us. As you zoom out, tiles increasingly fit more of the world into the same number of pixels, necessarily generalizing the data in order to do so. But we can further generalize in the hillshade calculation. At the moment I do this by calculating slope and aspect based on averages of larger groups of pixels rather than individual pixels (perhaps akin to blurring the source image) but I'm sure there are fancier ways. I sometimes quite like what's labeled the "low" detail option below, combined with reduced vertical exaggeration. It suprises me how well it smooths things out while retaining an overall accurate picture of terrain.
viewof detail = radio({ title: 'Detail', description: 'Level of visual detail in terrain', options: [ { label: 'High', value: 1 }, { label: 'Low', value: 3 }, ], value: 1 })
Here's another copy of the map.
Colors
Brightness adjustment I've found it helpful to adjust the caluclated luminance values a bit, mostly making things less shadowy by mapping them (non-linearly) to a brigther range. Your mileage may vary, depending on the other color scales. The brighten scale below is applied to luminance values (which are between 0 and 1) before other color scales come into play.
brighten = d3.scaleSqrt() .domain([0,1]) .range([.2, .95])
Shadow and highlight color Grayscale hillshade images are common, as they're easily blended with other layers or colorized in something like Photoshop, but don't feel limited to shades of gray! By applying a color scale to luminance values you can, for example, give cool colors to shadows and warm ones to highlights for a dusky look. It's also a good way to fine-tune where and how strongly shadows and highlights appear. Bear in mind that the terrain to which the dark and light ends of this scale apply depends on the sun elevation and azimuth. A sun elevation of 45º produces mountains with dark and bright sides, whereas with an 80º elevation flatter land will be brightest.
ramp(luminanceColor)
// domain is luminance, range is color // a default grayscale would be d3.scaleLinear().domain([0, 1]).range(['#000', '#fff']) luminanceColor = d3.scaleLinear() .domain([0,.7,1]) .range(['#333', '#999', '#fff']) .interpolate(luminanceColorInterpolation) .clamp(true)
Depending on your color scale, you may get interesting results by changing the interpolation method. See Working with Color for some D3 options.
// d3.interpolateRgb would be a "default" luminanceColorInterpolation = d3.interpolateHcl
With all that, here's the hillshade by itself:
hillshadeCanvas = DOM.canvas(width, height)
Hypsometric tint Hypsometric tinting is the use of color to represent elevation, a common technique in "physical" maps but not a requirement. (See the commented code below for a no-tinting option.) It can be an additional way to subtly call attention to relief, or simply to give your map a desired aesthetic. I'm using a color scale based on the minimum and maximum elevations above sea level within any given map view. I'll be drawing water on top of this as a solid color, but you could extend the scale to add bathymetric colors below sea level. Note that the final appearance of color on the map depends on blending mode (described below) and light settings, and may look different than the ramp preview here.
ramp(tints)
tints = { const valueRange = d3.extent(elevationData); // besides the "low" and "high" colors, I want one in between, in this case 75% of the way between low and high const middleValue = .75*(Math.max(0, valueRange[0]) + valueRange[1]); // for no coloring, try d3.scaleLinear([0, 1]).range(['#fff', '#fff']).clamp(true); //c7d6ba return d3.scaleSqrt() .domain([Math.max(0, valueRange[0]), middleValue, valueRange[1]]) .range(['#c7d6ba','#ffeee5', '#fff']) .clamp(true) .interpolate(tintInterpolation); }
Again, you can try out different interpolators on the hypsometric tinting color scale.
tintInterpolation = d3.interpolateHclLong
tintCanvas = DOM.canvas(width, height);
There are different ways to blend the tint and shading layers. Valid options here are anything that works for the Canvas globalCompositeOperation property. 'multiply' is a good stand-by that will essentially darken the tint layer according to the shadow layer, but other values such as 'overlay' can be good depending on the color scales and the look you're going for.
tintBlendMode = 'multiply'
Water I'm grabbing water polygons from vector tiles, then drawing them on top of the tint image. Here you can control the color of water features:
viewof waterColor = color({ value: "#d2def2", description: "Water color", })
waterCanvas = DOM.canvas(width, height)
Casting shadows The basic hillshade is derived solely from slope and aspect, in other words how directly a surface faces the light source. A fancier way to do it is to model the actual interaction of light with the terrain—shadows! Shadows can give a better sense of depth and elevation change than the standard hillshade, as shadow size gives an idea of relative height, and can make things look a little more natural. The hot way to do this kind of shaded relief right now is full-on 3D modeling, probably using Blender. Roughly calculated shadows are added to the final map after hillshade and tint. While I haven't exposed any controls here other than toggling on and off, you can look into the code farther ahead in this notebook to see how I went about this and how changing some variables might affect it. Note: use Chrome if you want shadows. They look very bad without a blur filter; if your browser does not support filters on canvas, shadows are turned off by default. Scroll down a bit to see what I mean.
viewof shadowsOn = radio({ title: 'Shadows', options: [ { label: 'On', value: 1 }, { label: 'Off', value: 0 }, ], value: typeof DOM.context2d(1,1).filter !== 'string' ? 0 : 1 })
Another copy of the map, so you can see how toggling shadows affects it:
Here's the shadow image in isolation:
shadowCopy = { const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); ctx.drawImage(shadowCanvas, 0, 0); return canvas; }
How-to I make no guarantees that any of this code is good or easy to follow, and it's certainly not efficient—it's not the most practical way to do hillshading in the first place, and I'm not clever enough to optimize it. This whole thing is just an exercise is exposing and understanding some things that can go into a hillshade image. Still, read on and look at the functions below if you want to see how it's working. The code blocks are arranged more or less in order of how the process works.
Getting data tileObjects here is an array that exists only to be changed whenever the map moves (way up in the map code at the top of this notebook), because changing it causes all the code below to be re-evaluated, drawing a new hillshade. This array gets sent some empty Leaflet tiles that help us find the necessary elevation data.
mutable terrainTileObjects = [];
Elevation Whenever the map moves, terrain tiles are downloaded. They look crazy, but pixels can be decoded to elevation from their RGB color values.
demCanvas = DOM.canvas(width, height)
elevationData = { // get all terrain tiles in map view const terrainPromises = terrainTileObjects.map(tile => { return d3.image(terrainTileUrl(tile.coords), {crossOrigin: "anonymous"}); }); const images = await Promise.all(terrainPromises) // canvas on which to assemble individual terrain tile images demContext.clearRect(0, 0, width, height); const hillshadeBounds = finalMapCanvas.getBoundingClientRect(); // draw each tile in the right place on the big canvas images.forEach((image, i) => { const bounds = terrainTileObjects[i].el.getBoundingClientRect(); demContext.drawImage(image, bounds.x - hillshadeBounds.x, bounds.y - hillshadeBounds.y); }); // now get elevation values from all pixels on the assembled canvas const demImageData = demContext.getImageData(0,0,width,height); const demData = demImageData.data; const values = []; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { // x + y*width is the position for point (x, y) in a flat array of pixel data // multiply by 4 for imageData position as each pixel is 4 (rgba) values values[x + y*width] = getElevation(4 * (x + y*width), demData); } } return values; }
Slope and aspect Next, from the elevation data, we derive slope and aspect for each pixel
slopeData = elevationData.map((d,i) => { if (!d) { return undefined; } const x = i % width; const y = Math.floor(i / width); return getSlopeAndAspect(x, y); });
function getSlopeAndAspect (x, y) { // refers to a 3x3 grid centered on the pixel in question // each "cell" may be a single pixel or itself a grid of pixels, depending on the cellSize variable const cells = [[], [], []]; // just ignore pixels near edges if (x < 2 * cellSize || x > width - 2 * cellSize || y < 2 * cellSize|| y > height - 2 * cellSize) return; // get values for each grid cell. if cells themselves are grids, cell value is an average of its pixels // this is where the "generalization" comes into play, as it specifies the size of cells // bigger cell size = more generalized for (let row = -1; row <= 1; row ++) { for (let col = -1; col <= 1; col++) { if (row == 0 && col == 0) continue; const cx = x + col * cellSize; const cy = y + row * cellSize; let avg = 0; for (let cellX = cx - halfCell; cellX <= cx + halfCell; cellX++) { for (let cellY = cy - halfCell; cellY <= cy +halfCell ; cellY++) { const val = elevationData[cellX + cellY * width] * (verticalExaggeration / 100); if (val !== undefined) avg += val; } } avg = avg / squaredCell; cells[row + 1][col + 1] = avg; } } /* A B C D E F G H I */ const a = cells[0][0], b = cells[0][1], c = cells[0][2], d = cells[1][0], e = cells[1][1], f = cells[1][2], g = cells[2][0], h = cells[2][1], i = cells[2][2]; const dzdx = ((c + 2*f + i) - (a + 2*d + g)) / 8; const dzdy = ((g + 2*h + i) - (a + 2*b + c)) / 8; const aspect = halfpi - Math.atan2(dzdx, -dzdy); // rotated 90 degrees for proper north up /* simple slope is Math.atan(Math.sqrt( dzdx ** 2 + dzdy ** 2 )) ...but that turns out way too strong on this data. the arbitrary z-factor (.02 by default) and extra square root help */ const slope = Math.atan(Math.sqrt(Math.sqrt( dzdx ** 2 + dzdy ** 2 ) * z)); // the drawing function just uses dzdx and dzdy directly, but we send aspect and slope anyway return {aspect, dzdx, dzdy, slope}; }
Drawing the hillshade The block of code below is evaluated when elevationData and slopeData change, draws luminance (i.e., the hillshade). For some explanation of the constants and calculation of luminance, see Sahil Chinoy's "A faster hillshade" notebook. This code returns canvas ImageData, which will be drawn, along with other layers, on a final image.
hillshadeImageData = { const {a1, a2, a3} = getConstants(azimuth, elevation); const hillshadeData = new Uint8ClampedArray(width * height * 4); elevationData.forEach((d,i) => { const n = i * 4; const slopeAndAspect = slopeData[i]; // in case data is missing somehow, draw white if (!slopeAndAspect) { hillshadeData[n] = 255; hillshadeData[n + 1] = 255; hillshadeData[n + 2] = 255; hillshadeData[n + 3] = 255; return; } const {slope, aspect, dzdx, dzdy} = slopeAndAspect; const dzdx_z = dzdx * z; const dzdy_z = dzdy * z; let luminance = (a1 - a2 * dzdx_z - a3 * dzdy_z) / Math.sqrt(1 + dzdx_z ** 2 + dzdy_z ** 2); // an alternative way to do it // const a = halfpi - slope; // just a constant to simplify luminance a little bit //let luminance = Math.cos(aspect - sunAzimuth) * Math.cos(a) * cosSunElev + Math.sin(a) * sinSunElev; // make it a little brigther luminance = brighten(luminance); // get final hillshade color const shade = d3.color(luminanceColor(luminance)); hillshadeData[n] = shade.r; hillshadeData[n + 1] = shade.g; hillshadeData[n + 2] = shade.b; hillshadeData[n + 3] = 255; }); const hillshadeImageData = new ImageData(hillshadeData, width, height); hillshadeContext.putImageData(hillshadeImageData, 0, 0); return hillshadeImageData; }
Drawing tint Now we go through the elevation data and assign pixel colors based on elevation and the color tint color scale.
tintImageData = { const tintData = new Uint8ClampedArray(width * height * 4); const white = d3.color('#fff'); elevationData.forEach((d,i) => { const n = i * 4; // get color based on elevation const tint = d3.color(tints(d)) || white; tintData[n] = tint.r; tintData[n + 1] = tint.g; tintData[n + 2] = tint.b; tintData[n + 3] = tint.opacity * 255; }); const tintImageData = new ImageData(tintData, width, height); tintCanvas.getContext('2d').putImageData(tintImageData, 0, 0); return tintImageData; }
Drawing water Water is coming from a separate tile layer. Tiles are fetched in the same way as terrain tiles, and contain vector features from OpenStreetMap. The code below gets the tiles, pulls out water features, and draws them to a canvas using D3 and a pseudo map projection via the Leaflet map's point conversion method.
mutable waterTileObjects = [];
waterImageData = { const ctx = waterCanvas.getContext('2d'); function projectPoint(x, y) { var point = map.latLngToContainerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); } const transform = d3.geoTransform({point: projectPoint}); const path = d3.geoPath().projection(transform).context(ctx); // get tiles const vectorTilePromises = waterTileObjects.map(tile => { return d3.json(waterTileUrl(tile.coords)); }); const vectorTiles = await Promise.all(vectorTilePromises); // filter and flatten to only polygon water features const waterFeatures = vectorTiles.map(d => d.water) .map(d => d.features) .reduce((accumulator, currentValue) => accumulator.concat(currentValue), []) .filter(d => d.geometry.type === 'Polygon' || d.geometry.type === 'MultiPolygon'); ctx.clearRect(0, 0, width, height); ctx.fillStyle = waterColor; ctx.beginPath(); waterFeatures.forEach(path); ctx.fill(); return ctx.getImageData(0, 0, width, height); }
Calculating shadows I don't know the first thing about modeling lighting, except my real-world experience that tall things block the sun if you stand close to them. But I took a crack at it, below. I have no idea if this bears any resemblance to any legitimate algorithm. Essentially it traverses diagonal paths (following the direction of the light source) pixel by pixel, keeping looking for high points and then making some decisions about how far and how strongly their shadows should be cast.
shadowData = { // I have been pleased with shadows derived from a 45º high sun, even if the hillshade uses a different sun elevation, but for more "accurate" shadows you could use angle = sunElev const angle = Math.PI / 4; // find minimum elevation of the map view, as a basis for peak elevations and shadow length const minElev = Math.max(0, d3.min(elevationData)); // will be a value for each pixel, which in turn will be drawn to a canvas below const data = []; // very rough conversion from shadow distance (meters) to pixel distance on screen // smaller number means fewer, longer shadows const mPerPx = Math.pow(2, 15 - map.getZoom()); // gets the shadow (0 - 1, 1 being full darkness) for a single pixel, given some data about the elevations and shadows that precede it in the path of light const getShadowForPixel = ({x, y, currentShadow, shadowDistance, distanceTraveled, previousElev, peak, decay}) => { const n = y * width + x, elev = elevationData[n]; // peak is the current high point of the path, prior to this point if (elev >= peak && elev > previousElev) { // in here, if this elevation is higher than the current high point, it becomes the new high point // come up with a length for the shadow of this peak with a lil trig const newShadowDistance = ((elev - minElev) / Math.tan(angle)) / mPerPx; return { // this is a new set of data upon which subsequent pixels in the path will get their shadow data // resets any previous shadow info, as a lower peak is no longer relevant. newPeak: elev, newShadowDistance, newDistanceTraveled: 0, // incremented with each pixel, mostly so we know when to end the shadow newCurrentShadow: 1, // start with full shadow. we don't draw it for the peak but the next pixel needs this newPreviousElev: elev, // for each pixel to know the elevation of the previous pixel newDecay: Math.SQRT2/newShadowDistance, // shadow will fade out over its full length shadowValue: 0, // the actual shadow value for this pixel. 0 (no shadow) for the peak } } else if (distanceTraveled < shadowDistance && decay <= 1) { // in this case, we're still working through the shadow of a prior peak // fade the shadow from its previous value a bit, and increment the distance tally let newCurrentShadow = currentShadow - decay, newDistanceTraveled = distanceTraveled + Math.SQRT2 // sqrt2 = distance of 1 pixel, diagonally return { newPeak: peak, // no change in peak newShadowDistance: shadowDistance, // no change newDistanceTraveled, // increased abobe newCurrentShadow, // set above newPreviousElev: elev, newDecay: decay, // no change shadowValue: Math.sqrt(1 - (elev/peak)) * newCurrentShadow, /* the actual shadow value (above) is further refined based on how close current elevation is to peak elevation. the closer it is in elevation, the weaker the shadow. */ } } //or maybe there's just no shadow because we're far enough from a peak and haven't hit another one yet return { newPeak: 0, newShadowDistance: 0, newDistanceTraveled: 0, newCurrentShadow: 0, newPreviousElev: elev, newDecay: .05, shadowValue: 0, } } // gets the shadows along diagonal lines, in the direction of light // starts from pixel at (col, row) and then traverses a diagonal line, getting shadow data for each pixel // keeps track of the running values like peak, currentShadow, etc. to pass to the pixel function const getShadowsForDiagonal = (col, row) => { let x = col; let y = row; let peak = 0; let shadowDistance = 0; let distanceTraveled = 0; let currentShadow = 0; let previousElev = 0; let decay = .05; while (x < width - 1 && y < height - 1) { const { newPeak, newShadowDistance, newDistanceTraveled, newCurrentShadow, newPreviousElev, shadowValue, newDecay, } = getShadowForPixel({ x: x, y: y, currentShadow, shadowDistance, distanceTraveled, previousElev, peak, decay, }); currentShadow = newCurrentShadow; shadowDistance = newShadowDistance; distanceTraveled = newDistanceTraveled; previousElev = newPreviousElev; peak = newPeak; decay = newDecay; data[y * width + x] = shadowValue; // this assumes a northwestern light source x = x + 1; y = y + 1; } } // get shadows from "sun rays" starting at each pixel along the top for (let col = 0; col < width - 1; col += 1) { const row = 0; getShadowsForDiagonal(col, row); } // and starting at each pixel down the left side for (let row = 1; row < height - 1; row += 1) { const col = 0; getShadowsForDiagonal(col, row); } return data; }
The shadow image looks really stupid, with very unnatural harsh lines. Fair enough; real light in the real world scatters and doesn't just stay in a narrow, confined path. But a simple blur filter performs strong magic that, surprisingly, makes the result not bad. Comment out the blur line in the code below to see what I mean. Note again: some browsers do not support filters on canvas, in which case you'll see the stupid harsh lines below. Best to look at this notebook in Chrome.
shadowCanvas = { // will put shadow imageData on this canvas const canvas = DOM.canvas(width, height); const context = canvas.getContext('2d'); // will then draw the first canvas onto this one, with a blur const finalCanvas = DOM.canvas(width, height); const finalContext = finalCanvas.getContext('2d'); finalContext.filter = 'blur(5px)'; // try commenting this line to see the resultant garbage const data = new Uint8ClampedArray(width * height * 4); // convert the shadow data into grayscale values shadowData.forEach((d, i) => { data[i * 4] = 255 * (1 - d); data[i * 4 + 1] = 255 * (1 - d); data[i * 4 + 2] = 255 * (1 - d); data[i * 4 + 3] = 255; }); const imgData = new ImageData(data, width, height); context.putImageData(imgData, 0, 0); finalContext.drawImage(canvas,0,0) return finalCanvas; }
Drawing the final image Now we can finally draw the end result! This bit of code takes the four layers (hillshade, tint, water, and shadows), and assembles them into the final map.
finalMap = { // drawing the layers to temporary canvases const hillshade = DOM.canvas(width, height); const tint = DOM.canvas(width, height); const water = DOM.canvas(width, height); hillshade.getContext('2d').putImageData(hillshadeImageData, 0, 0); tint.getContext('2d').putImageData(tintImageData, 0, 0); water.getContext('2d').putImageData(waterImageData, 0, 0); tint.getContext('2d').drawImage(water, 0, 0); finalMapContext.clearRect(0, 0, width, height); // assemble canvases into final image finalMapContext.drawImage(hillshade, 0, 0); finalMapContext.save(); finalMapContext.globalCompositeOperation = tintBlendMode; finalMapContext.drawImage(tint, 0, 0); // shadows image (explained below) goes on top if (+shadowsOn === 1) { // finalMapContext.globalAlpha = 1; finalMapContext.globalCompositeOperation = 'multiply'; finalMapContext.drawImage(shadowCanvas, 0, 0); } finalMapContext.restore(); // returning imageData, which makes it easier to repeat the map several times in this notebook return finalMapContext.getImageData(0, 0, width, height); }
One last time, here's the final map!
Appendix Mostly some constants and numbers derived from the various controls above.
sunElev = elevation * degToRad
sunAzimuth = azimuth * degToRad
z = .015
cellSize = detail
halfCell = Math.floor(cellSize/2);
squaredCell = cellSize * cellSize
sinSunElev = Math.sin(sunElev)
cosSunElev = Math.cos(sunElev)
// see https://observablehq.com/@sahilchinoy/a-faster-hillshader getConstants = (azimuth, elevation) => { // convert to radians const alpha = Math.PI / 180 * (azimuth - 90); const beta = Math.PI / 180 * elevation; const a1 = Math.sin(beta); const a2 = Math.cos(beta) * Math.sin(alpha); const a3 = Math.cos(beta) * Math.cos(alpha); return { a1, a2, a3 } }
getIndexForCoordinates = (x, y) => { return width * y * 4 + 4 * x; }
// decodes terrain tile RGB to elevation values getElevation = (index, demData) => { if (!demData) return 0; if (index < 0 || demData[index] === undefined) return undefined; return ((demData[index] * 256 + demData[index+1] + demData[index+2] / 256) - 32768); }
height = Math.floor(width / 2)
hillshadeContext = hillshadeCanvas.getContext('2d')
finalMapCanvas = DOM.canvas(width, height)
finalMapContext = finalMapCanvas.getContext('2d')
tintContext = tintCanvas.getContext('2d')
demContext = demCanvas.getContext('2d')
waterTileUrl = (coords) => `https://tile.nextzen.org/tilezen/vector/v1/all/${coords.z}/${coords.x}/${coords.y}.json?api_key=9HipcCI6T82EWM92otvFcw`
terrainTileUrl = (coords) => `https://elevation-tiles-prod.s3.amazonaws.com/terrarium/${coords.z}/${coords.x}/${coords.y}.png`
azimuth = 315
halfpi = Math.PI * .5
degToRad = Math.PI / 180
function ramp(colorScale, n = 512) { const canvas = DOM.canvas(n, 1); const context = canvas.getContext("2d"); canvas.style.margin = "0 -14px"; canvas.style.width = "calc(100% + 28px)"; canvas.style.height = "40px"; canvas.style.imageRendering = "pixelated"; const originalDomain = colorScale.domain(); const domainTransform = d3.scaleLinear().domain([0,1]).range([originalDomain[0], originalDomain[originalDomain.length-1]]); for (let i = 0; i < n; ++i) { context.fillStyle = colorScale(domainTransform(i / (n - 1))); context.fillRect(i, 0, 1, 1); } return canvas; }
import {slider, number, radio, color} from "@jashkenas/inputs"
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
L = require('leaflet@1.2.0')
d3 = require('d3@5')