31:T7ec,# how DEM goes! ^{(Digital Elevation Model)} ## Add height data to river position data. #### DATA USED cropped to the Taranaki region >[New Zealand relief data.](https://data.linz.govt.nz/layer/51768-nz-8m-digital-elevation-model-2012/) [NZ river name lines pilot data.]( https://data.linz.govt.nz/layer/103632-nz-river-name-lines-pilot/)

Projection **NZGD2000** / New Zealand Transverse Mercator 2000.

NZGD2000 uses positive numbers instead of Latitude and Longitude to define positions. WGS84 Bounds: 166.3300, -47.4000, 178.6000, -34.0000 NZGD2000 Bounds: 983515.7211, 4728776.8709, 2117458.3527, 6223676.2306

**attribution:** Sourced from the [LINZ Data Service](https://data.linz.govt.nz/) and licensed for reuse under the [Creative Commons Attribution 4.0 International](https://data.linz.govt.nz/license/attribution-4-0-international/) licence. --- ### Test Image as Datasets to large to host on observable.

Click to view larger.

1124 x 1090 pixels ![image.png](${await FileAttachment("untitled (1).png").url()})

[What is GeoTIFF ](https://en.wikipedia.org/wiki/GeoTIFF) ^wikipedia [Why a TIFF image can look like an empty black and white image.](https://geozoneblog.wordpress.com/2016/09/01/black-and-white-tiff/) # thanks This notebook was originally written to wrangle DEM data for https://observablehq.com/d/c9c505c1afa60c61 https://talk.observablehq.com/t/tips-for-loading-geotiffs-without-thumbnail-layers/2635 https://observablehq.com/@d3/geotiff-contours?collection=@d3/d3-contour https://twitter.com/kevpluck/status/1437921685638762497 (inspirational) https://observablehq.com/@fil fixing the async issues. https://observablehq.com/@mootari https://observablehq.com/@aaronkyle --- 32:[{"id":"5146793fe92c9a94834ef814d0724299655fdfd503c6ae6952fe2ea16a390ca0fbf5abdf2dec07ad4a227a8a2ffc6c230268cfc4ca9fab887d55255e1d99ceb5","href":"https://static.observableusercontent.com/files/5146793fe92c9a94834ef814d0724299655fdfd503c6ae6952fe2ea16a390ca0fbf5abdf2dec07ad4a227a8a2ffc6c230268cfc4ca9fab887d55255e1d99ceb5","name":"IJ.tif","type":"image/x-sony-arw","lastModified":1634893765989.403,"size":5078641},{"id":"cc8ad7c02a7820ad0874cf5f6ff2675d0dddf86aacaf75aed314215eed76d12a9eea85027ff6c26b6340798f8b7b60dc6b960bb14494811a678690f9a9c9e1dc","href":"https://static.observableusercontent.com/files/cc8ad7c02a7820ad0874cf5f6ff2675d0dddf86aacaf75aed314215eed76d12a9eea85027ff6c26b6340798f8b7b60dc6b960bb14494811a678690f9a9c9e1dc","name":"untitled (1).png","type":"image/png","lastModified":1634893931254.414,"size":670495},{"id":"080429329c31ef8d2418291f8a2c03b7d8f545fbc8c89d0d44103a0eea3772cdddd1c94c91f931fa34c34c207f4bf96c04d3adae757a19c9a22a080ec1885f21","href":"https://static.observableusercontent.com/files/080429329c31ef8d2418291f8a2c03b7d8f545fbc8c89d0d44103a0eea3772cdddd1c94c91f931fa34c34c207f4bf96c04d3adae757a19c9a22a080ec1885f21","name":"image@4.png","type":"image/png","lastModified":1634893697187.72,"size":9751},{"id":"3e6374800ae2b6ecc48de37178ca3ab7179a039b2a2ca8681cc7a9fb8ea7ff742921710c4bcf46f75b67fe9ced167acca3802ac76a4e5a403a49260c9bd1f246","href":"https://static.observableusercontent.com/files/3e6374800ae2b6ecc48de37178ca3ab7179a039b2a2ca8681cc7a9fb8ea7ff742921710c4bcf46f75b67fe9ced167acca3802ac76a4e5a403a49260c9bd1f246","name":"nz-river-name-lines-pilot.shp","type":"application/octet-stream","lastModified":1634871642923.842,"size":9626920},{"id":"ffa15817315b500d6d03fe196fbf73479cfc7c0bf26be7cfb3510f45c10e824b58937268be3fe4d84b20cae056f11c278388f9b56796aaafdd306bf8493789ee","href":"https://static.observableusercontent.com/files/ffa15817315b500d6d03fe196fbf73479cfc7c0bf26be7cfb3510f45c10e824b58937268be3fe4d84b20cae056f11c278388f9b56796aaafdd306bf8493789ee","name":"nz-river-name-lines-pilot.dbf","type":"application/octet-stream","lastModified":1634871640836.359,"size":5037455}] 2f:{"title":"how DEM goes! (Digital Elevation Model)","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1509,"value":"toc(\"h1,h2,h3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"# LOAD A Taranaki TIFF:\n\nThis TIFF is a DEM geoTiff that is cross referenced with the rivers positions in [the .shp file,](https://observablehq.com/d/7fa7f66f3354c1c1#taranaki_rivers_shapefile_complete) from [nz river name lines pilot]( https://data.linz.govt.nz/layer/103632-nz-river-name-lines-pilot/) cropped to the Taranaki region.\n\nIt should be easy to change the shapefile to match your own Tiff dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"viewof file = Inputs.file({ accept: \".tif\" }) // default file is \"IJ.tif\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"teFile = file || FileAttachment(\"IJ.tif\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"Tiff = await teFile.arrayBuffer()","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"mt = GeoTIFF.fromArrayBuffer(Tiff)","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"mt.getImageCount() // how many image layers are in the TIFF","pinned":true,"hidden":false,"mode":"ojs"},{"id":2147,"value":"# Load the shape files for the rivers.\n\nThe default shape file is the rivers file","pinned":true,"hidden":false,"mode":"md"},{"id":833,"value":"taranaki_rivers_shapefile_complete = shapefile.read(\n await FileAttachment(\"nz-river-name-lines-pilot.shp\").stream(), // *.shp files contain the shape information (feature coordinates)\n await FileAttachment(\"nz-river-name-lines-pilot.dbf\").stream() // *.dbf gives the rivers an ID\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1480,"value":"---\n### Image handle loaded\n\n>mt[.getImage(*index*)](https://geotiffjs.github.io/geotiff.js/GeoTIFF.html#getImage)\n>>Get the n-th internal subfile of an image. By default, the first is returned.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"mt_image = mt.getImage()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1251,"value":"//mt_image.getGDALNoData()\nNoData = mt_image.getFileDirectory().GDAL_NODATA","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"tiff_bbox = mt_image.getBoundingBox()","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"pool = new GeoTIFF.Pool() // woot web workers","pinned":true,"hidden":false,"mode":"ojs"},{"id":1496,"value":"# get an elevation point from geoTiff DEM file\n\nI found [this alternative way](https://towardsdatascience.com/geotiff-coordinate-querying-with-javascript-5e6caaaf88cf) to find an elevation point. \nInstead of using the .readRasters() to read the whole file it uses the *window* feature of .readRasters() to a [subset to read data](https://geotiffjs.github.io/geotiff.js/index.html#:~:text=only%20interested%20in%20a-,specific%20region,-of%20the%20image). \n > [X, Y, X + 1, Y + 1] for a 1 pixel data point.\n\n>mt[.readRasters(window:{ [X, Y, X + 1, Y + 1] })](https://geotiffjs.github.io/geotiff.js/GeoTIFFImage.html#readRasters)\n\n>{[pool](https://geotiffjs.github.io/geotiff.js/module-pool-Pool.html)} lets GeoTiff use service workers to speed up the decoding.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1947,"value":"async function getPoints(mt_image) {\n const [x0, y0, x1, y1] = mt_image.getBoundingBox();\n const { 0: values, width, height } = await mt_image.readRasters({ pool });\n const X = d3.scaleLinear().domain([x0, x1]).range([0, width]);\n const Y = d3.scaleLinear().domain([y0, y1]).range([height, 0]);\n\n return (x, y) => values[Math.floor(X(x)) + width * Math.floor(Y(y))];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1952,"value":"getPoint = getPoints(mt_image)","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"# add elevation data to the rivers gps cords","pinned":false,"hidden":false,"mode":"md"},{"id":308,"value":"xyzCords = {\n const C = [];\n for (const d of taranaki_rivers_shapefile_complete.features) {\n let id = `r${d.properties.river_sect}`;\n let name = d.properties.name;\n let feature = d.properties.feat_type;\n\n let cord = await Promise.all(\n d.geometry.coordinates.map(async (c) => {\n let hi = [];\n if (\n c[0] >= tiff_bbox[0] &&\n c[0] <= tiff_bbox[2] &&\n c[1] >= tiff_bbox[1] &&\n c[1] <= tiff_bbox[3]\n ) {\n hi = getPoint(c[0], c[1]);\n // if (hi == mt_image.getFileDirectory().GDAL_NODATA) hi = 0\n } else {\n hi = NaN;\n }\n return [c[0], c[1], hi];\n })\n );\n // if (!(id === \"outside\")) C.push({ id, name, feature, cord }); // I need these dataum as some rivers cross tiles\n C.push({ id, name, feature, cord }); // I need these dataum as some rivers cross tiles\n }\n return C;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"viewof table = Inputs.table(xyzCords, {\n width: {\n id: 60,\n name: 100,\n feature: 50,\n cord: 800\n },\n sort: \"id\",\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"---\n\n# P5 to render the data\n\nVERY SLOW\n\n_{Maybe https://github.com/santilland/plotty would be faster?}\n\nUncomment the lines below to view image.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":2172,"value":"tiffBytes = await mt_image.readRasters({ pool })","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"p5((sketch) => {\n let w = tiffBytes.width;\n let h = tiffBytes.height;\n let t = tiffBytes[0];\n\n sketch.setup = function () {\n // sketch.createCanvas(w, h);\n // sketch.noLoop();\n // for (let p = 0; p < t.length; ++p) {\n // let c = colourScale(t[p]);\n // sketch.stroke(c);\n // let x = p % w;\n // let y = p / w;\n // sketch.point(x, y);\n // }\n };\n sketch.draw = function () {};\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"colourScale = d3.scaleLinear().domain(cRange).range(colours)","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"cRange = {\n let r = d3.extent(tiffBytes[0]);\n let range = r[1] - r[0];\n let cut = range / colours.length;\n\n return d3.range(r[0], r[1], cut);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"colours = batlowK.map((d) => d3.color(d).formatHex())","pinned":true,"hidden":false,"mode":"ojs"},{"id":729,"value":"import { batlowK } from \"@hellonearthis/fabio-crameri-scientific-colour-maps\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"import { p5 } from \"@tmcw/p5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"GeoTIFF = require(\"geotiff.js@1.0.1/dist/geotiff.bundle.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"shapefile = require(\"shapefile\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1519,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}