2b:null 2c:["$","title",null,{"children":"Slope and Aspect in Leaflet | Seth Lutske | Observable"}] 31:Tb6e,TopoLayer = { var mapboxAccessToken = 'pk.eyJ1Ijoic2x1dHNrZTIyIiwiYSI6ImNqeGw1Y3BibDAybG4zeHFyaXl3OXVwZXUifQ.fZ_5Raq5z-DUpo2AK-bQHA' var uniqueId = ( function(){ var lastId = 0 return function(){ return ++lastId } } )() var TopoLayer = L.GridLayer.extend({ // add worker initialization to beforeAdd Method beforeAdd: function (map) { map._addZoomLimit(this); // object to hold canvas contexts as they are created and updated this._contexts = {} // array to recieve worker objects when they get created this._workers = [] // grab topotype from options const { topotype } = this.options // create workers for (let i = 0; i < 16; i++){ var number = i < 9 ? `0${i+1}` : i + 1 this._workers[i] = new Worker(workers[topotype], {name: `Worker ${topotype} ${number}`}) this._workers[i].onmessage = e => this.updateTile(e, this) } }, onRemove: function (map) { // terminate all workers when layer is removed for (let i = 0; i < 16; i++){ this._workers[i].terminate() } // original leaflet code: this._removeAllTiles(); L.DomUtil.remove(this._container); map._removeZoomLimit(this); this._container = null; this._tileZoom = undefined; }, // createTile method required - creates a new tile of the gridlayer createTile: function(coords){ var tile = L.DomUtil.create('canvas', 'leaflet-tile') var size = this.getTileSize() tile.width = size.x tile.height = size.y var ctx = tile.getContext('2d') var demCtx var id = uniqueId() this._contexts[id] = ctx // define a new image element and its attributes var demImg = new Image() var { x, y, z } = coords demImg.crossOrigin = "*" demImg.onload = function(){ var c = document.createElement('canvas') c.width = c.height = 256 demCtx = c.getContext('2d') demCtx.drawImage(demImg, 0, 0) redraw() } demImg.src = `https://api.mapbox.com/v4/mapbox.terrain-rgb/${z}/${x}/${y}.pngraw?access_token=${mapboxAccessToken}` const redraw = () => { var data = { id: id, raster: demCtx.getImageData(0, 0, 256, 256) } var workerIndex = (x + y) % this._workers.length this._workers[workerIndex].postMessage(data) } return tile }, updateTile: function(e, instance){ var ctx = instance._contexts[e.data.id] var imgData = ctx.createImageData(256, 256) var shades = e.data.shades imgData.data.set(shades) ctx.putImageData(imgData, 0, 0) } }) return TopoLayer }32:T4b3,md`These maps are based on the [terrain](https://www.arcgis.com/home/item.html?id=58a541efc59545e6b7137f961d7de883) dataset from esri. The left utilizes the Slope_Degrees raster function to give slope values in degrees from 0-90, and paint the image according to these values. The higher the slope value, the whiter the pixel. The right utilizes the Slope_Degrees_Map function, which paints flashier colors. They offer a [variety of raster functions](https://elevation.arcgis.com/arcgis/rest/services/WorldElevation/Terrain/ImageServer) on their terrain layer. You'll notice some lag in the map. For every zoom or pan event, a request is made for the portion of the terrain raster image that the map's bounds contain. Calculations are made on the fly to produce a colorized image of slope values, and then the image is sent back to the browser. All this takes time. But Esri offers [countless map layers](https://www.arcgis.com/home/search.html?t=content&q=tags%3A%22topography%22) that can be imported into a Leaflet map. You can potentially also create your own custom layers and import them into leaflet, but that requires a strong working knowledge of ArcGIS. `33:T2827,{ var NO_ANIMATION = { animate: false, reset: true, disableViewprereset: true }; L.Sync = function () {}; /* * Helper function to compute the offset easily. * * The arguments are relative positions with respect to reference and target maps of * the point to sync. If you provide ratioRef=[0, 1], ratioTarget=[1, 0] will sync the * bottom left corner of the reference map with the top right corner of the target map. * The values can be less than 0 or greater than 1. It will sync points out of the map. */ L.Sync.offsetHelper = function (ratioRef, ratioTarget) { var or = L.Util.isArray(ratioRef) ? ratioRef : [0.5, 0.5]; var ot = L.Util.isArray(ratioTarget) ? ratioTarget : [0.5, 0.5]; return function (center, zoom, refMap, targetMap) { var rs = refMap.getSize(); var ts = targetMap.getSize(); var pt = refMap.project(center, zoom) .subtract([(0.5 - or[0]) * rs.x, (0.5 - or[1]) * rs.y]) .add([(0.5 - ot[0]) * ts.x, (0.5 - ot[1]) * ts.y]); return refMap.unproject(pt, zoom); }; }; L.Map.include({ sync: function (map, options) { this._initSync(); options = L.extend({ noInitialSync: false, syncCursor: false, syncCursorMarkerOptions: { radius: 10, fillOpacity: 0.3, color: '#da291c', fillColor: '#fff' }, offsetFn: function (center, zoom, refMap, targetMap) { // no transformation at all return center; } }, options); // prevent double-syncing the map: if (this._syncMaps.indexOf(map) === -1) { this._syncMaps.push(map); this._syncOffsetFns[L.Util.stamp(map)] = options.offsetFn; } if (!options.noInitialSync) { map.setView( options.offsetFn(this.getCenter(), this.getZoom(), this, map), this.getZoom(), NO_ANIMATION); } if (options.syncCursor) { if (typeof map.cursor === 'undefined') { map.cursor = L.circleMarker([0, 0], options.syncCursorMarkerOptions).addTo(map); } this._cursors.push(map.cursor); this.on('mousemove', this._cursorSyncMove, this); this.on('mouseout', this._cursorSyncOut, this); } // on these events, we should reset the view on every synced map // dragstart is due to inertia this.on('resize zoomend', this._selfSetView); this.on('moveend', this._syncOnMoveend); this.on('dragend', this._syncOnDragend); return this; }, // unsync maps from each other unsync: function (map) { var self = this; if (this._cursors) { this._cursors.forEach(function (cursor, indx, _cursors) { if (cursor === map.cursor) { _cursors.splice(indx, 1); } }); } // TODO: hide cursor in stead of moving to 0, 0 if (map.cursor) { map.cursor.setLatLng([0, 0]); } if (this._syncMaps) { this._syncMaps.forEach(function (synced, id) { if (map === synced) { delete self._syncOffsetFns[L.Util.stamp(map)]; self._syncMaps.splice(id, 1); } }); } if (!this._syncMaps || this._syncMaps.length == 0) { // no more synced maps, so these events are not needed. this.off('resize zoomend', this._selfSetView); this.off('moveend', this._syncOnMoveend); this.off('dragend', this._syncOnDragend); } return this; }, // Checks if the map is synced with anything or a specifyc map isSynced: function (otherMap) { var has = (this.hasOwnProperty('_syncMaps') && Object.keys(this._syncMaps).length > 0); if (has && otherMap) { // Look for this specific map has = false; this._syncMaps.forEach(function (synced) { if (otherMap == synced) { has = true; } }); } return has; }, // Callbacks for events... _cursorSyncMove: function (e) { this._cursors.forEach(function (cursor) { cursor.setLatLng(e.latlng); }); }, _cursorSyncOut: function (e) { this._cursors.forEach(function (cursor) { // TODO: hide cursor in stead of moving to 0, 0 cursor.setLatLng([0, 0]); }); }, _selfSetView: function (e) { // reset the map, and let setView synchronize the others. this.setView(this.getCenter(), this.getZoom(), NO_ANIMATION); }, _syncOnMoveend: function (e) { if (this._syncDragend) { // This is 'the moveend' after the dragend. // Without inertia, it will be right after, // but when inertia is on, we need this to detect that. this._syncDragend = false; // before calling setView! this._selfSetView(e); this._syncMaps.forEach(function (toSync) { toSync.fire('moveend'); }); } }, _syncOnDragend: function (e) { // It is ugly to have state, but we need it in case of inertia. this._syncDragend = true; }, // overload methods on originalMap to replay interactions on _syncMaps; _initSync: function () { if (this._syncMaps) { return; } var originalMap = this; this._syncMaps = []; this._cursors = []; this._syncOffsetFns = {}; L.extend(originalMap, { setView: function (center, zoom, options, sync) { // Use this sandwich to disable and enable viewprereset // around setView call function sandwich (obj, fn) { var viewpreresets = []; var doit = options && options.disableViewprereset && obj && obj._events; if (doit) { // The event viewpreresets does an invalidateAll, // that reloads all the tiles. // That causes an annoying flicker. viewpreresets = obj._events.viewprereset; obj._events.viewprereset = []; } var ret = fn(obj); if (doit) { // restore viewpreresets event to its previous values obj._events.viewprereset = viewpreresets; } return ret; } // Looks better if the other maps 'follow' the active one, // so call this before _syncMaps var ret = sandwich(this, function (obj) { return L.Map.prototype.setView.call(obj, center, zoom, options); }); if (!sync) { originalMap._syncMaps.forEach(function (toSync) { sandwich(toSync, function (obj) { return toSync.setView( originalMap._syncOffsetFns[L.Util.stamp(toSync)](center, zoom, originalMap, toSync), zoom, options, true); }); }); } return ret; }, panBy: function (offset, options, sync) { if (!sync) { originalMap._syncMaps.forEach(function (toSync) { toSync.panBy(offset, options, true); }); } return L.Map.prototype.panBy.call(this, offset, options); }, _onResize: function (event, sync) { if (!sync) { originalMap._syncMaps.forEach(function (toSync) { toSync._onResize(event, true); }); } return L.Map.prototype._onResize.call(this, event); }, _stop: function (sync) { L.Map.prototype._stop.call(this); if (!sync) { originalMap._syncMaps.forEach(function (toSync) { toSync._stop(true); }); } } }); originalMap.dragging._draggable._updatePosition = function () { L.Draggable.prototype._updatePosition.call(this); var self = this; originalMap._syncMaps.forEach(function (toSync) { L.DomUtil.setPosition(toSync.dragging._draggable._element, self._newPos); toSync.eachLayer(function (layer) { if (layer._google !== undefined) { var offsetFn = originalMap._syncOffsetFns[L.Util.stamp(toSync)]; var center = offsetFn(originalMap.getCenter(), originalMap.getZoom(), originalMap, toSync); layer._google.setCenter(center); } }); toSync.fire('move'); }); }; } }); return "Leaflet.Sync" }34:T8df,{ var map1 = undefined var map2 = undefined if (!map1){ map1 = L.map(document.getElementById('map1'),{attributionControl: false}).setView({lat: 37.782724061372214, lng: -122.51212898818851}, 16.5) } if(!map2){ map2 = L.map(document.getElementById('map2'), {zoomControl: false}).setView({lat: 37.782724061372214, lng: -122.51212898818851}, 16.5) } let globalToken const authservice = 'https://www.arcgis.com/sharing/rest/oauth2/token' const client_id = 'r7Q4aCEr4j8qKbwN' const client_secret = 'a56716463cc742aba686ab9429ed87bb' async function getEsriToken(){ const url = `${authservice}?client_id=${client_id}&client_secret=${client_secret}&grant_type=client_credentials&expiration=${7200}` let access_token await fetch(url, { method: 'POST', }) .then(res => { return res.json() }) .then(res => { access_token = res.access_token globalToken = res.access_token }) .catch(err => console.error(err)) return access_token } async function createEsriLayer(layerType, options){ let token = await getEsriToken() var esriLayer = EsriLeaflet[layerType]({ ...options, token }) esriLayer.addTo(map1) return esriLayer } var EsriSlopeDegreesLayer (async () => { EsriSlopeDegreesLayer = await createEsriLayer('imageMapLayer', { url: 'https://elevation.arcgis.com/arcgis/rest/services/WorldElevation/Terrain/ImageServer', opacity: 1, renderingRule: {rasterFunction: "Slope_Degrees"} }) EsriSlopeDegreesLayer.addTo(map1) })() var EsriSlopeDegreesMapLayer (async () => { EsriSlopeDegreesMapLayer = await createEsriLayer('imageMapLayer', { url: 'https://elevation.arcgis.com/arcgis/rest/services/WorldElevation/Terrain/ImageServer', opacity: 1, renderingRule: {rasterFunction: "Slope_Degrees_Map"} }) EsriSlopeDegreesMapLayer.addTo(map2) })() map1.sync(map2, {offsetFn: L.Sync.offsetHelper([1, 1], [0, 1])}); map2.sync(map1, {offsetFn: L.Sync.offsetHelper([0, 1], [1, 1])}); return "Slope_Degrees and Slope_Degrees_Map functions applied to Esri Terrain Layer" }35:T8217,workers = { const worker4elevationtext = new Blob([` onmessage = function (e) { self.dems = {} if (e.data.raster) { const { data } = e.data.raster self.dems[e.data.id] = raster2dem(data) self.shades = shading(self.dems[e.data.id]) } postMessage({ id: e.data.id, shades: self.shades }) } function raster2dem (data){ const dem = new Int16Array(256 * 256) var x, y, i, j function height (R, G, B) { return -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1) } for (x = 0; x < 256; x++) { for (y = 0; y < 256; y++){ i = x + y * 256 j = i * 4 dem[i] = height( data[j], data[j + 1], data[j + 2] ) } } return dem } function shading(dem){ var px = new Uint8ClampedArray( 256 * 256 * 4 ) for (let i = 0; i < dem.length; i++){ var hex = \`#\${hypsotint(dem[i])}\` px[4*i + 0] = hexToR(hex) px[4*i + 1] = hexToG(hex) px[4*i + 2] = hexToB(hex) px[4*i + 3] = 255 } return px } function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)} function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)} function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)} function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h} var colors = ['#164A5B', '#75CFEC', '#FCFFA0', '#008000', '#855723', '#006400', '#493829', 'white'] var breakpoints = [ -850, 0, 300, 800, 1500, 2400, 8700 ] var gradients = (() => { var collection = [] for (let i = 0; i < breakpoints.length - 1; i++){ var rainbow = new Rainbow() rainbow.setNumberRange( breakpoints[i], breakpoints[i + 1] ) rainbow._numberRange = [ breakpoints[i], breakpoints[i + 1] ] // discontinuous use of colors between negative and position values if (i === 0){ rainbow.setSpectrum( colors[i], colors[i + 1] ) rainbow._spectrum = [ colors[i], colors[i + 1] ] } else { rainbow.setSpectrum( colors[i + 1], colors[i + 2] ) rainbow._spectrum = [ colors[i + 1], colors[i + 2] ] } collection.push(rainbow) } return collection })() function hypsotint(elevation){ for (let i = 0; i < breakpoints.length - 1; i++){ if (breakpoints[i] < elevation && elevation <= breakpoints[i + 1]){ return gradients[i].colorAt(elevation) } } return '000000' } function Rainbow() { "use strict"; var gradients = null; var minNum = 0; var maxNum = 100; var colours = ['ff0000', 'ffff00', '00ff00', '0000ff']; setColours(colours); function setColours (spectrum) { if (spectrum.length < 2) { throw new Error('Rainbow must have two or more colours.'); } else { var increment = (maxNum - minNum)/(spectrum.length - 1); var firstGradient = new ColourGradient(); firstGradient.setGradient(spectrum[0], spectrum[1]); firstGradient.setNumberRange(minNum, minNum + increment); gradients = [ firstGradient ]; for (var i = 1; i < spectrum.length - 1; i++) { var colourGradient = new ColourGradient(); colourGradient.setGradient(spectrum[i], spectrum[i + 1]); colourGradient.setNumberRange(minNum + increment * i, minNum + increment * (i + 1)); gradients[i] = colourGradient; } colours = spectrum; } } this.setSpectrum = function () { setColours(arguments); return this; } this.setSpectrumByArray = function (array) { setColours(array); return this; } this.colourAt = function (number) { if (isNaN(number)) { throw new TypeError(number + ' is not a number'); } else if (gradients.length === 1) { return gradients[0].colourAt(number); } else { var segment = (maxNum - minNum)/(gradients.length); var index = Math.min(Math.floor((Math.max(number, minNum) - minNum)/segment), gradients.length - 1); return gradients[index].colourAt(number); } } this.colorAt = this.colourAt; this.setNumberRange = function (minNumber, maxNumber) { if (maxNumber > minNumber) { minNum = minNumber; maxNum = maxNumber; setColours(colours); } else { throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')'); } return this; } } function ColourGradient() { "use strict"; var startColour = 'ff0000'; var endColour = '0000ff'; var minNum = 0; var maxNum = 100; this.setGradient = function (colourStart, colourEnd) { startColour = getHexColour(colourStart); endColour = getHexColour(colourEnd); } this.setNumberRange = function (minNumber, maxNumber) { if (maxNumber > minNumber) { minNum = minNumber; maxNum = maxNumber; } else { throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')'); } } this.colourAt = function (number) { return calcHex(number, startColour.substring(0,2), endColour.substring(0,2)) + calcHex(number, startColour.substring(2,4), endColour.substring(2,4)) + calcHex(number, startColour.substring(4,6), endColour.substring(4,6)); } function calcHex(number, channelStart_Base16, channelEnd_Base16) { var num = number; if (num < minNum) { num = minNum; } if (num > maxNum) { num = maxNum; } var numRange = maxNum - minNum; var cStart_Base10 = parseInt(channelStart_Base16, 16); var cEnd_Base10 = parseInt(channelEnd_Base16, 16); var cPerUnit = (cEnd_Base10 - cStart_Base10)/numRange; var c_Base10 = Math.round(cPerUnit * (num - minNum) + cStart_Base10); return formatHex(c_Base10.toString(16)); } function formatHex(hex) { if (hex.length === 1) { return '0' + hex; } else { return hex; } } function isHexColour(string) { var regex = /^#?[0-9a-fA-F]{6}$/i; return regex.test(string); } function getHexColour(string) { if (isHexColour(string)) { return string.substring(string.length - 6, string.length); } else { var name = string.toLowerCase(); if (colourNames.hasOwnProperty(name)) { return colourNames[name]; } throw new Error(string + ' is not a valid colour.'); } } // Extended list of CSS colornames s taken from // http://www.w3.org/TR/css3-color/#svg-color var colourNames = { aliceblue: "F0F8FF", antiquewhite: "FAEBD7", aqua: "00FFFF", aquamarine: "7FFFD4", azure: "F0FFFF", beige: "F5F5DC", bisque: "FFE4C4", black: "000000", blanchedalmond: "FFEBCD", blue: "0000FF", blueviolet: "8A2BE2", brown: "A52A2A", burlywood: "DEB887", cadetblue: "5F9EA0", chartreuse: "7FFF00", chocolate: "D2691E", coral: "FF7F50", cornflowerblue: "6495ED", cornsilk: "FFF8DC", crimson: "DC143C", cyan: "00FFFF", darkblue: "00008B", darkcyan: "008B8B", darkgoldenrod: "B8860B", darkgray: "A9A9A9", darkgreen: "006400", darkgrey: "A9A9A9", darkkhaki: "BDB76B", darkmagenta: "8B008B", darkolivegreen: "556B2F", darkorange: "FF8C00", darkorchid: "9932CC", darkred: "8B0000", darksalmon: "E9967A", darkseagreen: "8FBC8F", darkslateblue: "483D8B", darkslategray: "2F4F4F", darkslategrey: "2F4F4F", darkturquoise: "00CED1", darkviolet: "9400D3", deeppink: "FF1493", deepskyblue: "00BFFF", dimgray: "696969", dimgrey: "696969", dodgerblue: "1E90FF", firebrick: "B22222", floralwhite: "FFFAF0", forestgreen: "228B22", fuchsia: "FF00FF", gainsboro: "DCDCDC", ghostwhite: "F8F8FF", gold: "FFD700", goldenrod: "DAA520", gray: "808080", green: "008000", greenyellow: "ADFF2F", grey: "808080", honeydew: "F0FFF0", hotpink: "FF69B4", indianred: "CD5C5C", indigo: "4B0082", ivory: "FFFFF0", khaki: "F0E68C", lavender: "E6E6FA", lavenderblush: "FFF0F5", lawngreen: "7CFC00", lemonchiffon: "FFFACD", lightblue: "ADD8E6", lightcoral: "F08080", lightcyan: "E0FFFF", lightgoldenrodyellow: "FAFAD2", lightgray: "D3D3D3", lightgreen: "90EE90", lightgrey: "D3D3D3", lightpink: "FFB6C1", lightsalmon: "FFA07A", lightseagreen: "20B2AA", lightskyblue: "87CEFA", lightslategray: "778899", lightslategrey: "778899", lightsteelblue: "B0C4DE", lightyellow: "FFFFE0", lime: "00FF00", limegreen: "32CD32", linen: "FAF0E6", magenta: "FF00FF", maroon: "800000", mediumaquamarine: "66CDAA", mediumblue: "0000CD", mediumorchid: "BA55D3", mediumpurple: "9370DB", mediumseagreen: "3CB371", mediumslateblue: "7B68EE", mediumspringgreen: "00FA9A", mediumturquoise: "48D1CC", mediumvioletred: "C71585", midnightblue: "191970", mintcream: "F5FFFA", mistyrose: "FFE4E1", moccasin: "FFE4B5", navajowhite: "FFDEAD", navy: "000080", oldlace: "FDF5E6", olive: "808000", olivedrab: "6B8E23", orange: "FFA500", orangered: "FF4500", orchid: "DA70D6", palegoldenrod: "EEE8AA", palegreen: "98FB98", paleturquoise: "AFEEEE", palevioletred: "DB7093", papayawhip: "FFEFD5", peachpuff: "FFDAB9", peru: "CD853F", pink: "FFC0CB", plum: "DDA0DD", powderblue: "B0E0E6", purple: "800080", red: "FF0000", rosybrown: "BC8F8F", royalblue: "4169E1", saddlebrown: "8B4513", salmon: "FA8072", sandybrown: "F4A460", seagreen: "2E8B57", seashell: "FFF5EE", sienna: "A0522D", silver: "C0C0C0", skyblue: "87CEEB", slateblue: "6A5ACD", slategray: "708090", slategrey: "708090", snow: "FFFAFA", springgreen: "00FF7F", steelblue: "4682B4", tan: "D2B48C", teal: "008080", thistle: "D8BFD8", tomato: "FF6347", turquoise: "40E0D0", violet: "EE82EE", wheat: "F5DEB3", white: "FFFFFF", whitesmoke: "F5F5F5", yellow: "FFFF00", yellowgreen: "9ACD32" } } `], {type: "text/javascript"}) const worker4elevation = URL.createObjectURL(worker4elevationtext); const worker4slopetext = new Blob([` self.dems = {} onmessage = function (e) { self.slopeshades = {} if (e.data === 'clear') { self.slopeshades = {} return } if (e.data.raster) { const { data } = e.data.raster self.slopeshades[e.data.id] = raster2slopes(data) self.shades = shading(self.slopeshades[e.data.id]) } postMessage({ id: e.data.id, message: 'from worker', ele: self.slopeshades[e.data.id], shades: self.shades }) } function raster2dem (data){ const dem = new Int16Array(256 * 256) var x, y, i, j function height (R, G, B) { return -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1) } for (x = 0; x < 256; x++) { for (y = 0; y < 256; y++){ i = x + y * 256 j = i * 4 dem[i] = height( data[j], data[j + 1], data[j + 2] ) } } return dem } function raster2slopes(raster){ const dem = raster2dem(raster) const slopes = new Float32Array( 256 * 256 ) var x, y, dx, dy, i, j for (x = 1; x < 255; x++){ for (y = 1; y < 255; y++){ i = y * 256 + x dx = ((dem[i - 255] + 2 * dem[i + 1] + dem[i + 257]) - (dem[i - 257] + 2 * dem[i - 1] + dem[i + 255])) / 8; dy = ((dem[i + 255] + 2 * dem[i + 256] + dem[i + 257]) - (dem[i - 257] + 2 * dem[i - 256] + dem[i - 255])) / 8; slopes[i] = Math.atan( Math.sqrt( dx * dx + dy * dy ) ) } } /** Shameless Hack: * When calculating slope, we can't get values * that are on the edge of a tile, as we can't * get their neighbors. Their neighbors are on * a different tile. Rather than trying to coordinate * data between tiles, this loop takes the pixel * 2 pixels deep from each edge and copies it to * the edge pixel. The hack is 1px wide and barely * visible */ for (x = 0; x < 256; x++){ for (y = 0; y < 256; y++){ i = y * 256 + x if (x === 0){ j = y * 256 + x + 1 slopes[i] = slopes[j] } if (x === 255){ j = y * 256 + x - 1 slopes[i] = slopes[j] } if (y === 0){ j = (y + 1) * 256 + x slopes[i] = slopes[j] } if (y === 255){ j = (y - 1) * 256 + x slopes[i] = slopes[j] } } } return slopes } function shading(slopes){ var px = new Uint8ClampedArray( 256 * 256 * 4 ) for (let i = 0; i < slopes.length; i++){ var color = slopes[i] * 255 / (Math.PI / 2) px[4*i + 0] = color px[4*i + 1] = color px[4*i + 2] = color px[4*i + 3] = 255 } return px } `], {type: "text/javascript"}) const worker4slope = URL.createObjectURL(worker4slopetext); const worker4aspecttext = new Blob([` self.slopeaspects = {} onmessage = function (e) { if (e.data.raster) { const { data } = e.data.raster self.slopeaspects[e.data.id] = raster2slopeaspect(data) self.shades = shading(self.slopeaspects[e.data.id].slopes, self.slopeaspects[e.data.id].aspects) } postMessage({ id: e.data.id, message: 'from worker', ele: self.slopeaspects[e.data.id], shades: self.shades }) } function raster2dem(data){ const dem = new Int16Array(256 * 256) var x, y, i, j function height (R, G, B) { return -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1) } for (x = 0; x < 256; x++) { for (y = 0; y < 256; y++){ i = x + y * 256 j = i * 4 dem[i] = height( data[j], data[j + 1], data[j + 2] ) } } return dem } function raster2slopeaspect(raster){ const dem = raster2dem(raster) const aspects = new Float32Array( 256 * 256 ) const slopes = new Float32Array( 256 * 256 ) var x, y, dx, dy, i for (x = 1; x < 255; x++){ for (y = 1; y < 255; y++){ i = y * 256 + x dx = ((dem[i - 255] + 2 * dem[i + 1] + dem[i + 257]) - (dem[i - 257] + 2 * dem[i - 1] + dem[i + 255])) / 8; dy = ((dem[i + 255] + 2 * dem[i + 256] + dem[i + 257]) - (dem[i - 257] + 2 * dem[i - 256] + dem[i - 255])) / 8; aspects[i] = dx !== 0 ? 90 - Math.atan2( dy, -dx ) * (180 / Math.PI) : 90 - 90 * (dy > 0 ? 1 : -1) slopes[i] = Math.atan( Math.sqrt( dx * dx + dy * dy ) ) * 180 / Math.PI } } /** Shameless Hack: * When calculating slope, we can't get values * that are on the edge of a tile, as we can't * get their neighbors. Their neighbors are on * a different tile. Rather than trying to coordinate * data between tiles, this loop takes the pixel * 2 pixels deep from each edge and copies it to * the edge pixel. The hack is 1px wide and barely * visible */ for (x = 0; x < 256; x++){ for (y = 0; y < 256; y++){ i = y * 256 + x if (x === 0){ j = y * 256 + x + 1 aspects[i] = aspects[j] slopes[i] = slopes[j] } if (x === 255){ j = y * 256 + x - 1 aspects[i] = aspects[j] slopes[i] = slopes[j] } if (y === 0){ j = (y + 1) * 256 + x aspects[i] = aspects[j] slopes[i] = slopes[j] } if (y === 255){ j = (y - 1) * 256 + x aspects[i] = aspects[j] slopes[i] = slopes[j] } } } return {slopes, aspects} } function shading(slopes, aspects){ var px = new Uint8ClampedArray( 256 * 256 * 4 ) for (let i = 0; i < aspects.length; i++){ var rgb = hypsotint(slopes[i], aspects[i]) px[4*i + 0] = rgb.R px[4*i + 1] = rgb.G px[4*i + 2] = rgb.B px[4*i + 3] = 255 } return px } var colorsrgb = [ { R: 154, G: 251, B: 012 }, { R: 000, G: 173, B: 067 }, { R: 000, G: 104, B: 192 }, { R: 108, G: 000, B: 163 }, { R: 202, G: 000, B: 156 }, { R: 255, G: 085, B: 104 }, { R: 255, G: 171, B: 071 }, { R: 244, G: 250, B: 000 }, { R: 154, G: 251, B: 012 }, ] var breakpoints = [ 0, 22.5, 67.5, 112.5, 157.5, 202.5, 247.5, 292.5, 337.5, 360] function hypsotint(slope, aspect){ let correctedAspect = aspect < 0 ? 360 + aspect % 360 : aspect > 360 ? aspect % 360 : aspect for (let i = 0; i < breakpoints.length - 1; i++){ if (breakpoints[i] < correctedAspect && correctedAspect <= breakpoints[i + 1]){ return colorsrgb[i] } } return { R: 154, G: 251, B: 012 } } `], {type: "text/javascript"}) const worker4aspect = URL.createObjectURL(worker4aspecttext); const worker4slopeaspecttext = new Blob([` onmessage = function (e) { self.slopeaspects = {} if (e.data.raster) { const { data } = e.data.raster self.slopeaspects[e.data.id] = raster2slopeaspect(data) self.shades = shading(self.slopeaspects[e.data.id].slopes, self.slopeaspects[e.data.id].aspects) } postMessage({ id: e.data.id, shades: self.shades }) } function raster2dem(data){ const dem = new Int16Array(256 * 256) var x, y, i, j // from https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#decode-data function height (R, G, B) { return -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1) } for (x = 0; x < 256; x++) { for (y = 0; y < 256; y++){ i = x + y * 256 j = i * 4 dem[i] = height( data[j], data[j + 1], data[j + 2] ) } } return dem } function raster2slopeaspect(raster){ const dem = raster2dem(raster) const aspects = new Float32Array( 256 * 256 ) const slopes = new Float32Array( 256 * 256 ) var x, y, dx, dy, i for (x = 1; x < 255; x++){ for (y = 1; y < 255; y++){ i = y * 256 + x dx = ((dem[i - 255] + 2 * dem[i + 1] + dem[i + 257]) - (dem[i - 257] + 2 * dem[i - 1] + dem[i + 255])) / 8; dy = ((dem[i + 255] + 2 * dem[i + 256] + dem[i + 257]) - (dem[i - 257] + 2 * dem[i - 256] + dem[i - 255])) / 8; aspects[i] = dx !== 0 ? 90 - Math.atan2( dy, -dx ) * (180 / Math.PI) : 90 - 90 * (dy > 0 ? 1 : -1) slopes[i] = Math.atan( Math.sqrt( dx * dx + dy * dy ) ) * 180 / Math.PI } } /** Shameless Hack: * When calculating slope, we can't get values * that are on the edge of a tile, as we can't * get their neighbors. Their neighbors are on * a different tile. Rather than trying to coordinate * data between tiles, this loop takes the pixel * 2 pixels deep from each edge and copies it to * the edge pixel. The hack is 1px wide and barely * visible */ for (x = 0; x < 256; x++){ for (y = 0; y < 256; y++){ i = y * 256 + x if (x === 0){ j = y * 256 + x + 1 aspects[i] = aspects[j] slopes[i] = slopes[j] } if (x === 255){ j = y * 256 + x - 1 aspects[i] = aspects[j] slopes[i] = slopes[j] } if (y === 0){ j = (y + 1) * 256 + x aspects[i] = aspects[j] slopes[i] = slopes[j] } if (y === 255){ j = (y - 1) * 256 + x aspects[i] = aspects[j] slopes[i] = slopes[j] } } } return {slopes, aspects} } function shading(slopes, aspects){ var px = new Uint8ClampedArray( 256 * 256 * 4 ) for (let i = 0; i < aspects.length; i++){ var hex = hypsotint(slopes[i], aspects[i]) px[4*i + 0] = hexToR(hex) px[4*i + 1] = hexToG(hex) px[4*i + 2] = hexToB(hex) px[4*i + 3] = 255 } return px } function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)} function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)} function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)} function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h} var colors = [ '#9afb0c', '#00ad43', '#0068c0', '#6c00a3', '#ca009c', '#ff5568', '#ffab47', '#f4fa00', '#9afb0c'] var breakpoints = [ 0, 22.5, 67.5, 112.5, 157.5, 202.5, 247.5, 292.5, 337.5, 360] var gradients = colors.map( color => { let rainbow = new Rainbow() rainbow.setNumberRange(0, 70) rainbow.setSpectrum('#808080', color) return rainbow }) function hypsotint(slope, aspect){ let correctedAspect = aspect < 0 ? 360 + aspect % 360 : aspect > 360 ? aspect % 360 : aspect for (let i = 0; i < breakpoints.length - 1; i++){ if (breakpoints[i] < correctedAspect && correctedAspect <= breakpoints[i + 1]){ if (slope < 70){ return gradients[i].colorAt(slope) } return colors[i] } } return '#00ad43' } function Rainbow() { "use strict"; var gradients = null; var minNum = 0; var maxNum = 100; var colours = ['ff0000', 'ffff00', '00ff00', '0000ff']; setColours(colours); function setColours (spectrum) { if (spectrum.length < 2) { throw new Error('Rainbow must have two or more colours.'); } else { var increment = (maxNum - minNum)/(spectrum.length - 1); var firstGradient = new ColourGradient(); firstGradient.setGradient(spectrum[0], spectrum[1]); firstGradient.setNumberRange(minNum, minNum + increment); gradients = [ firstGradient ]; for (var i = 1; i < spectrum.length - 1; i++) { var colourGradient = new ColourGradient(); colourGradient.setGradient(spectrum[i], spectrum[i + 1]); colourGradient.setNumberRange(minNum + increment * i, minNum + increment * (i + 1)); gradients[i] = colourGradient; } colours = spectrum; } } this.setSpectrum = function () { setColours(arguments); return this; } this.setSpectrumByArray = function (array) { setColours(array); return this; } this.colourAt = function (number) { if (isNaN(number)) { throw new TypeError(number + ' is not a number'); } else if (gradients.length === 1) { return gradients[0].colourAt(number); } else { var segment = (maxNum - minNum)/(gradients.length); var index = Math.min(Math.floor((Math.max(number, minNum) - minNum)/segment), gradients.length - 1); return gradients[index].colourAt(number); } } this.colorAt = this.colourAt; this.setNumberRange = function (minNumber, maxNumber) { if (maxNumber > minNumber) { minNum = minNumber; maxNum = maxNumber; setColours(colours); } else { throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')'); } return this; } } function ColourGradient() { "use strict"; var startColour = 'ff0000'; var endColour = '0000ff'; var minNum = 0; var maxNum = 100; this.setGradient = function (colourStart, colourEnd) { startColour = getHexColour(colourStart); endColour = getHexColour(colourEnd); } this.setNumberRange = function (minNumber, maxNumber) { if (maxNumber > minNumber) { minNum = minNumber; maxNum = maxNumber; } else { throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')'); } } this.colourAt = function (number) { return calcHex(number, startColour.substring(0,2), endColour.substring(0,2)) + calcHex(number, startColour.substring(2,4), endColour.substring(2,4)) + calcHex(number, startColour.substring(4,6), endColour.substring(4,6)); } function calcHex(number, channelStart_Base16, channelEnd_Base16) { var num = number; if (num < minNum) { num = minNum; } if (num > maxNum) { num = maxNum; } var numRange = maxNum - minNum; var cStart_Base10 = parseInt(channelStart_Base16, 16); var cEnd_Base10 = parseInt(channelEnd_Base16, 16); var cPerUnit = (cEnd_Base10 - cStart_Base10)/numRange; var c_Base10 = Math.round(cPerUnit * (num - minNum) + cStart_Base10); return formatHex(c_Base10.toString(16)); } function formatHex(hex) { if (hex.length === 1) { return '0' + hex; } else { return hex; } } function isHexColour(string) { var regex = /^#?[0-9a-fA-F]{6}$/i; return regex.test(string); } function getHexColour(string) { if (isHexColour(string)) { return string.substring(string.length - 6, string.length); } else { var name = string.toLowerCase(); if (colourNames.hasOwnProperty(name)) { return colourNames[name]; } throw new Error(string + ' is not a valid colour.'); } } // Extended list of CSS colornames s taken from // http://www.w3.org/TR/css3-color/#svg-color var colourNames = { aliceblue: "F0F8FF", antiquewhite: "FAEBD7", aqua: "00FFFF", aquamarine: "7FFFD4", azure: "F0FFFF", beige: "F5F5DC", bisque: "FFE4C4", black: "000000", blanchedalmond: "FFEBCD", blue: "0000FF", blueviolet: "8A2BE2", brown: "A52A2A", burlywood: "DEB887", cadetblue: "5F9EA0", chartreuse: "7FFF00", chocolate: "D2691E", coral: "FF7F50", cornflowerblue: "6495ED", cornsilk: "FFF8DC", crimson: "DC143C", cyan: "00FFFF", darkblue: "00008B", darkcyan: "008B8B", darkgoldenrod: "B8860B", darkgray: "A9A9A9", darkgreen: "006400", darkgrey: "A9A9A9", darkkhaki: "BDB76B", darkmagenta: "8B008B", darkolivegreen: "556B2F", darkorange: "FF8C00", darkorchid: "9932CC", darkred: "8B0000", darksalmon: "E9967A", darkseagreen: "8FBC8F", darkslateblue: "483D8B", darkslategray: "2F4F4F", darkslategrey: "2F4F4F", darkturquoise: "00CED1", darkviolet: "9400D3", deeppink: "FF1493", deepskyblue: "00BFFF", dimgray: "696969", dimgrey: "696969", dodgerblue: "1E90FF", firebrick: "B22222", floralwhite: "FFFAF0", forestgreen: "228B22", fuchsia: "FF00FF", gainsboro: "DCDCDC", ghostwhite: "F8F8FF", gold: "FFD700", goldenrod: "DAA520", gray: "808080", green: "008000", greenyellow: "ADFF2F", grey: "808080", honeydew: "F0FFF0", hotpink: "FF69B4", indianred: "CD5C5C", indigo: "4B0082", ivory: "FFFFF0", khaki: "F0E68C", lavender: "E6E6FA", lavenderblush: "FFF0F5", lawngreen: "7CFC00", lemonchiffon: "FFFACD", lightblue: "ADD8E6", lightcoral: "F08080", lightcyan: "E0FFFF", lightgoldenrodyellow: "FAFAD2", lightgray: "D3D3D3", lightgreen: "90EE90", lightgrey: "D3D3D3", lightpink: "FFB6C1", lightsalmon: "FFA07A", lightseagreen: "20B2AA", lightskyblue: "87CEFA", lightslategray: "778899", lightslategrey: "778899", lightsteelblue: "B0C4DE", lightyellow: "FFFFE0", lime: "00FF00", limegreen: "32CD32", linen: "FAF0E6", magenta: "FF00FF", maroon: "800000", mediumaquamarine: "66CDAA", mediumblue: "0000CD", mediumorchid: "BA55D3", mediumpurple: "9370DB", mediumseagreen: "3CB371", mediumslateblue: "7B68EE", mediumspringgreen: "00FA9A", mediumturquoise: "48D1CC", mediumvioletred: "C71585", midnightblue: "191970", mintcream: "F5FFFA", mistyrose: "FFE4E1", moccasin: "FFE4B5", navajowhite: "FFDEAD", navy: "000080", oldlace: "FDF5E6", olive: "808000", olivedrab: "6B8E23", orange: "FFA500", orangered: "FF4500", orchid: "DA70D6", palegoldenrod: "EEE8AA", palegreen: "98FB98", paleturquoise: "AFEEEE", palevioletred: "DB7093", papayawhip: "FFEFD5", peachpuff: "FFDAB9", peru: "CD853F", pink: "FFC0CB", plum: "DDA0DD", powderblue: "B0E0E6", purple: "800080", red: "FF0000", rosybrown: "BC8F8F", royalblue: "4169E1", saddlebrown: "8B4513", salmon: "FA8072", sandybrown: "F4A460", seagreen: "2E8B57", seashell: "FFF5EE", sienna: "A0522D", silver: "C0C0C0", skyblue: "87CEEB", slateblue: "6A5ACD", slategray: "708090", slategrey: "708090", snow: "FFFAFA", springgreen: "00FF7F", steelblue: "4682B4", tan: "D2B48C", teal: "008080", thistle: "D8BFD8", tomato: "FF6347", turquoise: "40E0D0", violet: "EE82EE", wheat: "F5DEB3", white: "FFFFFF", whitesmoke: "F5F5F5", yellow: "FFFF00", yellowgreen: "9ACD32" } } `], {type: "text/javascript"}) const worker4slopeaspect = URL.createObjectURL(worker4slopeaspecttext); const workers = { elevation: worker4elevation, slope: worker4slope, aspect: worker4aspect, slopeaspect: worker4slopeaspect } return workers }36:[] 2f:{"id":"b7c72704b74b140f","slug":"slope-and-aspect-in-leaflet","title":"Slope and Aspect in Leaflet","thumbnail":"e198c070489bfd661682925198705a4fcbba24490c93d682e95d2ed882232803","access_level":"public","create_time":"$D2020-05-12T15:22:40.796Z","update_time":"$D2020-10-19T17:54:54.510Z","view_time":null,"first_public_time":"$D2020-05-13T01:26:20.511Z","fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"e2585cdca261ab5e","login":"slutske22","name":"Seth Lutske","avatar_url":"https://avatars-next.observableusercontent.com/940b7490fa472faafb71f8cdaac26c287d7d2d7ff18c0501e01788756090c541","tier":"starter_2024"},"version":1125,"publish_version":1125,"role":null,"authored":false,"authors":[{"type":"individual","id":"4461d9138c16adbb","login":"slutske22","name":"Seth Lutske","avatar_url":"https://avatars-next.observableusercontent.com/940b7490fa472faafb71f8cdaac26c287d7d2d7ff18c0501e01788756090c541","tier":null}],"members":[{"type":"individual","id":"4461d9138c16adbb","login":"slutske22","name":"Seth Lutske","avatar_url":"https://avatars-next.observableusercontent.com/940b7490fa472faafb71f8cdaac26c287d7d2d7ff18c0501e01788756090c541","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Slope and Aspect in Leaflet","cells":[{"id":73,"value":"md` # Slope and Aspect in Leaflet #`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"html`\n\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"md`### ***Part 2: Visualizing Topography*** ###\n*This notebook demonstrates how to generate customizable visualizations for elevation, slope, and aspect using Mapbox RGB Terrain tiles. The methods here expand on concepts from **[Part 1: Slope and Aspect as a function of LatLng](https://observablehq.com/@slutske22/slope-as-a-function-of-latlng-in-leaflet)**.*\n#### ⏰ 8 minute read ####\n---------\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"md`## Introduction ##\n\nSometimes we want to visualize topographic values like elevation, slope, or aspect across an entire map extent. This is typically done by transforming data values into colors that make sense to the eye. We can transform Mapbox RGB Terrain pixels into topographic values, and map those values back to colors gradients. For example, the following map paints colors according to elevation values:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"html`\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":947,"value":"md`What you see is not a pre-made tileset - its a derivative of the Mapbox RGB Terrain layer. The method used to create this map is heavily is inspired by (if not totally ripped off from) the example in [this article](https://digital-geography.com/news-from-vladimir-agafonkin-creator-of-leaflet/), which touches on leaflet creator Vladimir Agafonkin's method for visualizing hillshades. This is what mapbox's [current implementation of hillshade](https://blog.mapbox.com/realistic-terrain-with-custom-styling-ce1fe98518ab) is based on. \n\n-------\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":915,"value":"md`\n## TopoLayer: GridLayer Extended\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"md`The example in that article uses \\`L.tilelayer.canvas()\\`, an old vestige of Leaflet 0.7. The maps here make use of [\\`L.GridLayer\\`](https://leafletjs.com/reference-1.6.0.html#gridlayer), the more modern implementation. Within the \\`createTile\\` method, we request the Mapbox RGB tile image for that \\`{X}/{Y}/{Z}\\` tile coordinate. We copy the pixel data to a canvas with \\`CanvasRenderingContext2D.drawImage\\`, pull out the RGB pixel data in the form of a \\`Uint8ClampedArray\\` with \\`CanvasRenderingContext2D.getImageData\\`, and send it to a web worker. Each tile has its own web worker to process the calculations, which then sends a new \\`Uint8ClampedArray\\` back to the main thread, posts it to a canvas, and voila! We have some very nice visuals. Here's the full \\`TopoLayer\\` code:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":738,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":968,"value":"md`You can create a new layer with your desired topography type like this:\n\n\\`\\`\\`javascript\nconst elevationLayer = new TopoLayer({ topotype: 'elevation' })\n\\`\\`\\`\n\nBased on the \\`topotype\\` you use, the \\`TopoLayer\\` will generate the right type of worker to process the DEM data and paint new colors to the tiles. Check out some gradients for slope and aspect:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":588,"value":"html`\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":989,"value":"md`Or my personal favorite, a hybrid of slope and aspect (which attempts to mimic Esri's [Aspect-Slope Raster Function](https://www.esri.com/arcgis-blog/products/imagery/imagery/new-aspect-slope-raster-function-now-available/)):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":991,"value":"html`\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":829,"value":"md`The maps above have quick performance. As they only need to load and process map tiles in 256 * 256 chunks, they pan and zoom smoothly. But as you can see, the visualizations get a bit binary at higher zoom levels (zoom > 15). This is because we are calculating slope and aspect using each pixel's direct neighbors. At higher zoom levels, there may be little or no difference in elevation between pixels, giving a value of 0 for most pixels, only registering a non-zero value on the border between two swaths of pixels that all share the same elevation value. At lower zoom levels, slope values are exaggerated as pixels' neighbors get farther and farther apart, and the map starts to \"white-out\". So despite its speed, this method has tangible drawbacks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"md`You can find the code for the workers in the \\`workers\\` cell in the Appendix at the bottom of this notebook. You can also find them in an easier to read format [here](https://github.com/slutske22/react-leaflet-custom-components/tree/master/public/scripts). Look into the \\`hypsotint\\` functions to see more about customizing colors.\n\n------\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"md `\n## The Esri Option`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"md `While I leaned away from using Esri for calculating point data in part 1 of this article, they offer some great out-of-the-box visualization layers through [esri-leaflet](https://esri.github.io/esri-leaflet/). Their [terrain layer](https://www.arcgis.com/home/item.html?id=58a541efc59545e6b7137f961d7de883) has server-side functions to calculate [slope](https://www.arcgis.com/home/item.html?id=af25a795273440deb449b336543602be) and [aspect](https://www.arcgis.com/home/item.html?id=9c426279db0e42559e947321b34bf1cd), as well as filters to visualize them nicely. The following maps are both visualizations of slope, with different color schemes:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"html`\n\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1051,"value":"md`Esri-Leaflet's API to bring ArcGIS maps into Leaflet is relatively simple. Once you have an [auth token](https://developers.arcgis.com/labs/rest/get-an-access-token/), you can use my condensed layer function to add any type of [esri-leaflet layer](https://esri.github.io/esri-leaflet/tutorials/introduction-to-layer-types.html) to the map:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1054,"value":"md`\n\\`\\`\\`javascript\nasync function createEsriLayer(, options){\n let token = await getEsriToken()\n var esriLayer = L.esri[layerType]({\n ...options,\n token\n })\n return esriLayer\n}\n\nvar EsriLayer;\n(async () => {\n EsriLayer = await createEsriLayer(, {\n url: '',\n opacity: 1,\n renderingRule: {rasterFunction: ''} // optional\n })\n EsriLayer.addTo(map)\n})()\n\n// Authenticated EsriLayer now available in global scope\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1076,"value":"md`Similarly, you can create custom layers in [Mapbox Studio](https://www.mapbox.com/mapbox-studio/), a photoshopesque map styling suite, and import them into leaflet.\n\n------\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"md`## Conclusion ##\n\nThere are many ways to import or create visualizations for topographic data in Leaflet. Mapbox and Esri both offer plenty of out-of-the-box solutions, but if you want to create your own, now you know how. If you're a React junkie like me, you may want to use these layers in a react application. You can find [react-leaflet](https://react-leaflet.js.org/) versions of these layers in my [react-leaflet custom components library](https://github.com/slutske22/react-leaflet-custom-components).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1110,"value":"html`\n\n

Seth Lutske

San Diego, California

\n\n${fab`github`}\n${fab`linkedin`}\n${fab`facebook`}\n${fa`envelope`}\n\n

\n\n\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":389,"value":"md`

\n\n--- \n\n## Appendix\n\n*Cells used to implement this notebook lie below. Click the left margin to toggle them open.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"L = require('leaflet')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"EsriLeaflet = require('esri-leaflet')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":869,"value":"md`---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":872,"value":"bannermap = {\n\n const mapOptions = {\n zoomControl: false,\n attributionControl: false,\n center: {lat: 21.20981924121263, lng: -157.22701785165114},\n zoom: 15,\n maxZoom: 15\n }\n\n const Mapbox_Access_Token = 'pk.eyJ1Ijoic2x1dHNrZTIyIiwiYSI6ImNqeGw1Y3BibDAybG4zeHFyaXl3OXVwZXUifQ.fZ_5Raq5z-DUpo2AK-bQHA'\n\n const map = L.map(document.getElementById('bannermap'),mapOptions)\n\n const RGBTerrain = L.tileLayer(`https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=${Mapbox_Access_Token}`)\n RGBTerrain.addTo(map)\n\n map.on('click', () => {console.log(map.getCenter(), map.getZoom())} )\n\n const aspectlayer = new TopoLayer({ topotype: \"slope\" })\n aspectlayer.addTo(map)\n\n return map\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"elevationmap = {\n\n const map = L.map(document.getElementById('elevationmap'),{attributionControl: false}).setView({lat: 63.4519837886007, lng: -145.89843750000003}, 4)\n\n const aspectlayer = new TopoLayer({ topotype: \"elevation\" })\n aspectlayer.addTo(map)\n \n map.on('click', e => console.log(e.latlng, map.getZoom() ))\n \n return map\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":996,"value":"slopeaspectmap = {\n \n const mapOptions = {\n attributionControl: false,\n zoomDelta: 0.5,\n zoomSnap: 0.5\n }\n\n const map = L.map(document.getElementById('slopeaspectmap'),mapOptions).setView({lat: 42.94000935681922, lng: -121.96540832519533}, 11)\n\n const aspectlayer = new TopoLayer({ topotype: \"slopeaspect\" })\n aspectlayer.addTo(map)\n \n map.on('click', e => console.log(e.latlng, map.getZoom() ))\n \n return map\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"{\n\n const map4 = L.map(document.getElementById('map4'),{attributionControl: false}).setView({lat: 38.66493409144752, lng: -122.71994590759279}, 14)\n const map5 = L.map(document.getElementById('map5'),{zoomControl: false})\n \n map4.sync(map5, {offsetFn: L.Sync.offsetHelper([1, 1], [0, 1])});\n map5.sync(map4, {offsetFn: L.Sync.offsetHelper([0, 1], [1, 1])});\n \n const slopelayer = new TopoLayer({ topotype: \"slope\" })\n slopelayer.addTo(map4)\n\n const aspectlayer = new TopoLayer({ topotype: \"aspect\" })\n aspectlayer.addTo(map5)\n \n map4.on('click', e => console.log(e.latlng, map4.getZoom()))\n \n return \"Slope and Aspect Maps: Mapbox Method\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":743,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1089,"value":"md`------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1092,"value":"import { style as faStyle, fa } from \"@airbornemint/fontawesome\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1095,"value":"faStyle({regular: true, solid: true, brands: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1097,"value":"function faCommon(kind) {\n return function(s) {\n return ``;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1101,"value":"far = faCommon(\"r\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"fas = faCommon(\"s\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1106,"value":"fab = faCommon(\"b\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"