getTopography = { const Mapbox_Access_Token = 'pk.eyJ1Ijoic2x1dHNrZTIyIiwiYSI6ImNqeGw1Y3BibDAybG4zeHFyaXl3OXVwZXUifQ.fZ_5Raq5z-DUpo2AK-bQHA' // ------------- Check if an image is in the cache (trustworthy?) ---------------------- function is_cached(src) { var image = new Image(); image.src = src; if (image.complete){ return 'True' } else { return 'False' } } // -------------------------------------------------------------------------------- var tiles = {} function loadImage(src) { return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = "*" img.addEventListener("load", () => resolve(img)); img.addEventListener("error", err => reject(err)); img.src = src; }); }; async function getTopography(latArg, lngArg, zoomArg, filldom) { // ---------------- Add to Number.prototype ------------------------------------- if (typeof(Number.prototype.toRad) === "undefined") { Number.prototype.toRad = function() { return this * Math.PI / 180; } } // -------------------------------------------------------------------------------- // ------------ define dom nodes for reference ------------------------------------ const latInput = document.getElementById('latInput') const lngInput = document.getElementById('lngInput') const zoomInput = document.getElementById('zoomInput') const coordsOuput = document.getElementById('tilecoords') const urlOutput = document.getElementById('tileaddress') const tileImage = document.getElementById('tileImage') const cachedOutput = document.getElementById('cachedstatus') const projectedpointOutput = document.getElementById('projectedpoint') const pixelPositionOnTileOutput = document.getElementById('pointontile') const tilecanvasWorkspace = document.getElementById('tilecanvas') const rgbvalueatpixel = document.getElementById('rgbvalueatpixel') const pixelsample = document.getElementById('pixelsample') const coord15 = document.getElementById('coord15') const tileImageZoom15 = document.getElementById('tileImageZoom15') const specs15 = document.getElementById('specs15') const tileCanvasZoom15 = document.getElementById('tileCanvasZoom15') const N15 = document.getElementById('N15') const S15 = document.getElementById('S15') const E15 = document.getElementById('E15') const W15 = document.getElementById('W15') const finalslope = document.getElementById('finalslope') const finalaspect = document.getElementById('finalaspect') const finalelevation = document.getElementById('finalelevation') var imageOutput var tilecanvas if (filldom === 'workspace'){ imageOutput = tileImage tilecanvas = tilecanvasWorkspace } if (filldom === 'final'){ imageOutput = tileImageZoom15 tilecanvas = tileCanvasZoom15 } // -------------------------------------------------------------------------------- // ----------- take in arguments from map call, or grab input elements ------------- const lat = latArg || Number(latInput.value) const lng = lngArg || Number(lngInput.value) const zoom = zoomArg || Number(zoomInput.value) // -------------------------------------------------------------------------------- // --------------- get X Y Z coords of tile ---------------------------------------- function getTileCoords(lat, lng, zoom){ var projected = refmap.project({lat, lng}, zoom) const coords = { X: Math.floor(projected.x / 256), Y: Math.floor(projected.y / 256), Z: zoom } return coords } function getTileCoordsFromProjectedPoint(projected){ return { X: Math.floor(projected.x / 256), Y: Math.floor(projected.y / 256), Z: zoom } } // -------------------------------------------------------------------------------- // ------------ Get x y of point's pixel position within the tile ------------------ function pixelPositionOnTile(projectedPoint) { return { x: Math.floor(projectedPoint.x) - Math.floor(projectedPoint.x / 256) * 256, y: Math.floor(projectedPoint.y) - Math.floor(projectedPoint.y / 256) * 256 } } // -------------------------------------------------------------------------------- // -------- get rgba values from imageData for given xy position on tile --------- function getRGBA(imgData, x, y) { var index = y * imgData.width + x var i = index * 4 var d = imgData.data return { R: d[i], G: d[i+1], B: d[i+2], A: d[i+3] } } // -------------------------------------------------------------------------------- // ----- check if image was previously loaded and saved in tiles object ------------ function tileInStorage(coords) { if ( tiles[`X${coords.X}Y${coords.Y}Z${coords.Z}`] ){ return 'True' } else { return 'False' } } // -------------------------------------------------------------------------------- // -------------- Calculate variables ----------------------------------------------- // const coords = getTileCoords(lat, lng, zoom) const projectedPoint = refmap.project({lat, lng}, zoom) const coords = getTileCoordsFromProjectedPoint(projectedPoint) const imageUrl = `https://api.mapbox.com/v4/mapbox.terrain-rgb/${coords.Z}/${coords.X}/${coords.Y}.pngraw?access_token=${Mapbox_Access_Token}` const formattedProjectPoint = {x: projectedPoint.x.toFixed(4), y: projectedPoint.y.toFixed(4)} const xyPositionOnTile = pixelPositionOnTile(projectedPoint) // -------------------------------------------------------------------------------- // -------------- Popuplate Information ----------------------------------------------- if (filldom === 'workspace'){ coordsOuput.innerHTML = `Tile coords: ${JSON.stringify(coords)}` urlOutput.innerHTML = `Tile url:

https://api.mapbox.com/v4/mapbox.terrain-rgb/${coords.Z}/${coords.X}/${coords.Y}.pngraw?access_token=$\{Mapbox_Access_Token}

` cachedOutput.innerHTML = `Tile previously saved: ${tileInStorage(coords)}` projectedpointOutput.innerHTML = `Projected Point Coordinate: (L.Map.project): ${JSON.stringify(formattedProjectPoint)}` pixelPositionOnTileOutput.innerHTML = `Pixel Position on Tile: ${JSON.stringify(xyPositionOnTile)}` } imageOutput.crossOrigin = "*" imageOutput.src = imageUrl // ----------------------------------------------------------------------------------- function onload2promise(obj){ return new Promise((resolve, reject) => { obj.onload = () => resolve(obj); obj.onerror = reject; }); } function saveTileData(){ var c = document.createElement('canvas') c.width = c.height = 256 var demCtx = c.getContext('2d') demCtx.drawImage(imageOutput, 0, 0) const imageData = demCtx.getImageData(0, 0, 256, 256) tiles[`X${coords.X}Y${coords.Y}Z${coords.Z}`] = imageData } // ------------ Get RGBA from project point coordinates --------------------------- async function getRGBAfromProjectedPoint(projectedPoint){ const coords = getTileCoordsFromProjectedPoint(projectedPoint) const xy = pixelPositionOnTile(projectedPoint) const preloadedTileData = tiles[`X${coords.X}Y${coords.Y}Z${coords.Z}`] // if image data already saved, just grab the rgba value from the pixel's position if ( preloadedTileData ){ return getRGBA(preloadedTileData, xy.x, xy.y) } // if not, get the image, get the rgba value, save the image as Uint16BitArray, // return rgba value in the meantime (will return rgba for every first time a tile is fetched) // every time after that, the image will have been stashed and we'll never get here: let rgba; await loadImage(imageUrl) .then( image => { var c = document.createElement('canvas') c.width = c.height = 256 var demCtx = c.getContext('2d') demCtx.drawImage(image, 0, 0) const imageData = demCtx.getImageData(0, 0, 256, 256) tiles[`X${coords.X}Y${coords.Y}Z${coords.Z}`] = imageData rgba = getRGBA(imageData, xy.x, xy.y) // console.log('size of 1 tile:', sizeof(imageData.data), 'bytes') // createImageBitmap(image, 0, 0, 256, 256) // .then( ibm => { // console.log('bitmap size', sizeof(ibm), ibm ) // var testCanvas = document.createElement('canvas') // var testContext = testCanvas.getContext('2d') // testContext.drawImage(ibm, 0, 0) // const testData = testContext.getImageData(0, 0, 256, 256) // console.log('size of ImageData', sizeof(testData)) // }) }) return rgba } // -------------------------------------------------------------------------------- // ------------ Get elevation from RGBA--------------------- --------------------- function rgba2elevation(RGBA){ const { R, G, B } = RGBA return -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1) } // -------------------------------------------------------------------------------- // ----- Alternative: Fetch image, turn into blob, assign to image --------------- // if ( !tiles[`X${coords.X}Y${coords.Y}Z${coords.Z}`] ){ // await fetch(imageUrl) // .then(response => response.blob()) // .then(image => { // const urlObject = URL.createObjectURL(image) // imageOutput.crossOrigin = "*" // imageOutput.src = urlObject // imageOutput.onload = function(){ // var c = document.createElement('canvas') // c.width = c.height = 256 // demCtx = c.getContext('2d') // demCtx.drawImage(imageOutput, 0, 0) // const imageData = demCtx.getImageData(0, 0, 256, 256) // tiles[`X${coords.X}Y${coords.Y}Z${coords.Z}`] = imageData // } // // imageOutput.onload = saveTileData // // error here: why? // // await onload2promise(imageOutput, saveTileData) // }) // .catch(error => { // console.log(error) // // write function to fetch image with URL with different zoom // }) // } // ----------------------------------------------------------------------------------- // ----- Paint image data to canvas and get rgb values at pixelPositionOnTile ------- var demCtx; imageOutput.onload = async function(){ var c = document.createElement('canvas') c.width = c.height = 256 demCtx = c.getContext('2d') demCtx.drawImage(imageOutput, 0, 0) const imageData = demCtx.getImageData(0, 0, 256, 256) const pixelRGB = getRGBA(imageData, xyPositionOnTile.x, xyPositionOnTile.y) if (filldom === 'workspace'){ rgbvalueatpixel.innerHTML = `RGB Value at Pixel: ${JSON.stringify(pixelRGB)}` pixelsample.style.backgroundColor = `rgba(${pixelRGB.R}, ${pixelRGB.G}, ${pixelRGB.B}, ${pixelRGB.A})` pixelsample.innerHTML = `

R: ${pixelRGB.R}
G: ${pixelRGB.G}
B: ${pixelRGB.B}

` } if (filldom === 'final'){ // ------ CALCULATE SLOPE AND ASPECT AND SHOW IN DOM -------------------- var projectedN = { ...projectedPoint, y: projectedPoint.y - 4 }, projectedS = { ...projectedPoint, y: projectedPoint.y + 4 }, projectedE = { ...projectedPoint, x: projectedPoint.x + 4 }, projectedW = { ...projectedPoint, x: projectedPoint.x - 4 } var Nrgba = await getRGBAfromProjectedPoint(projectedN), Srgba = await getRGBAfromProjectedPoint(projectedS), Ergba = await getRGBAfromProjectedPoint(projectedE), Wrgba = await getRGBAfromProjectedPoint(projectedW), coordrgba = await getRGBAfromProjectedPoint(projectedPoint) var eleN = rgba2elevation(Nrgba), eleS = rgba2elevation(Srgba), eleE = rgba2elevation(Ergba), eleW = rgba2elevation(Wrgba), coordsElevation = rgba2elevation(coordrgba) var N = refmap.unproject( projectedN, 15 ), S = refmap.unproject( projectedS, 15 ), E = refmap.unproject( projectedE, 15 ), W = refmap.unproject( projectedW, 15 ) var dx = refmap.distance(E, W), dy = refmap.distance(N, S) var dzdx = (eleE - eleW) / dx, dzdy = (eleN - eleS) / dy const slope = Math.atan( Math.sqrt( dzdx ** 2 + dzdy ** 2)) * (180 / Math.PI) const aspect = dx !== 0 ? ( Math.atan2( dzdy, dzdx ) * (180 / Math.PI) + 180 ) % 360 : ( 90 * (dy > 0 ? 1 : -1) + 180 ) % 360 coord15.innerHTML = `Lat: ${lat.toFixed(4)}
Lng: ${lng.toFixed(4)}` specs15.innerHTML = ` Lat: ${lat.toFixed(4)}, Lng: ${lng.toFixed(4)}

Tile Coords: ${JSON.stringify(coords)}

R: ${pixelRGB.R}
G: ${pixelRGB.G}
B: ${pixelRGB.B}
` N15.style.backgroundColor = `rgb(${Nrgba.R},${Nrgba.G},${Nrgba.B})` S15.style.backgroundColor = `rgb(${Srgba.R},${Srgba.G},${Srgba.B})` E15.style.backgroundColor = `rgb(${Ergba.R},${Ergba.G},${Ergba.B})` W15.style.backgroundColor = `rgb(${Wrgba.R},${Wrgba.G},${Wrgba.B})` N15.innerHTML = ` R: ${Nrgba.R}
G: ${Nrgba.G}
B: ${Nrgba.B}
` S15.innerHTML = ` R: ${Srgba.R}
G: ${Srgba.G}
B: ${Srgba.B}
` E15.innerHTML = ` R: ${Ergba.R}
G: ${Ergba.G}
B: ${Ergba.B}
` W15.innerHTML = ` R: ${Wrgba.R}
G: ${Wrgba.G}
B: ${Wrgba.B}
` finalelevation.innerHTML = `Elevation: ${coordsElevation.toFixed(1)} meters` finalslope.innerHTML = `Slope: ${slope.toFixed(1)}°` finalaspect.innerHTML = `Aspect: ${aspect.toFixed(1)}°` // ------------------------------------------------------------------------------- } // save data to tiles object if ( !tiles[`X${coords.X}Y${coords.Y}Z${coords.Z}`] ){ tiles[`X${coords.X}Y${coords.Y}Z${coords.Z}`] = imageData } } // ----------------------------------------------------------------------------------- // ------- Put a red dot on the canvas at the pixelPositionOnTile ------------------ var ctx = tilecanvas.getContext('2d') ctx.clearRect(0, 0, tilecanvas.width, tilecanvas.height); ctx.beginPath(); ctx.strokeStyle = "red"; ctx.fillStyle = "red"; ctx.arc(xyPositionOnTile.x, xyPositionOnTile.y, 5, 0, 2 * Math.PI); ctx.stroke(); ctx.fill() // ----------------------------------------------------------------------------------- } window.getTopography = getTopography return getTopography }