30:T1226,{ const container = d3.select(DOM.element('div')); container .style("position", "relative") .attr("width", 512) .attr("height", 612); var node = container.node(); const canvas = container .append('canvas') //Canvas for the map .attr("width", 512) .attr("height", 512) .style("position", "relative") .style("z-index", 1) .style("top", 0) .style("left", 0) .node(); var plot = new plotty.plot({ //Use plotty to drawr pixels on the canvas canvas: canvas, data: elevValues, width: 512, height: 512, domain: [elevRange[0], elevRange[1]], colorScale: "yignbu" }); plot.render(); const svg = container .append('svg') //Overlay an svg on the map for labels and for defining a slice .attr("width", 512) .attr("height", 512) .style("position", "absolute") .style("z-index", 3) .style("top", 0) .style("left", 0); /*svg .append('image') //Add state/city labels to the map .attr("width", 512) .attr("height", 512) .attr("xlink:href", urlLabels);*/ const svg2 = container .append('svg') //This svg is for displaying the profile of values .attr("width", 1000) .attr("height", 100) .style("position", "relative") .style("z-index", 3) .style("top", 0) .style("left", 0); var sliceOnMap = [0, 0, 0, 0]; //[x1,y1,x2,y2] var profValues = []; var locX = []; var locY = []; svg.on("click", function() { // Draw a slice on the map, profile below the map var coords = d3.mouse(this); sliceOnMap[0] = sliceOnMap[2]; sliceOnMap[1] = sliceOnMap[3]; sliceOnMap[2] = parseInt(coords[0]); sliceOnMap[3] = parseInt(coords[1]); //console.log(sliceOnMap); //node.value = sliceOnMap; //node.dispatchEvent(new CustomEvent("input")); d3.selectAll('line').remove(); d3.selectAll('rect').remove(); svg .append('line') //Draw a line on the map based on the last two clicked locations .style("stroke", "red") .style("stroke-width", 3) .attr('x1', sliceOnMap[0]) .attr('x2', sliceOnMap[2]) .attr('y1', sliceOnMap[1]) .attr('y2', sliceOnMap[3]); d3.selectAll('circle').remove(); var temp = 0; var slope = 0; var counter = 0; var l = 0; slope = (sliceOnMap[3] - sliceOnMap[1]) / (sliceOnMap[2] - sliceOnMap[0]); //Compute the slope of the line if (Math.abs(slope) <= 1) { l = 0; //If the slope is < 1, step along x and draw a purple dot for every x along the line if (sliceOnMap[2] < sliceOnMap[0]) { l = 2; } for (var r = sliceOnMap[l]; r <= sliceOnMap[2 - l]; r++) { temp = sliceOnMap[l + 1] + counter * slope; profValues[counter] = elevValues[r + parseInt(temp) * 512]; locX[counter] = r; locY[counter] = parseInt(temp); counter++; svg2 .append('circle') .attr('cx', counter) .attr('cy', scale(elevValues[r + parseInt(temp) * 512])) .attr('r', 2) .style('fill', 'purple'); } } else { //If the slope is > 1, step along y and draw a purple dot for every y along the line l = 1; if (sliceOnMap[3] < sliceOnMap[1]) { l = 3; } for (var r = sliceOnMap[l]; r <= sliceOnMap[4 - l]; r++) { temp = sliceOnMap[l - 1] + counter / slope; profValues[counter] = elevValues[parseInt(temp) + r * 512]; locY[counter] = r; locX[counter] = parseInt(temp); counter++; svg2 .append('circle') .attr('cx', counter) .attr('cy', scale(elevValues[parseInt(temp) + r * 512])) .attr('r', 2) .style('fill', 'purple'); } } }); svg2.on("mouseover", function() { //On mouseover, add a thin red rectangle cursor and print the value of the pixel at that location var coords2 = d3.mouse(this); d3.selectAll('rect').remove(); d3.selectAll('text').remove(); svg2 .append('rect') .attr("width", 2) .attr("height", 100) .attr("x", coords2[0]) .attr("y", 0) .style("fill", "red"); svg2 .append('text') .attr('x', coords2[0]) .attr('y', 20) .text(profValues[parseInt(coords2[0])] + "m"); svg .append('rect') //Add a rectangle cursor to mark the position on the profile .attr('x', locX[parseInt(coords2[0])] - 5) .attr('y', locY[parseInt(coords2[0])] - 5) .attr('width', 10) .attr('height', 10) .style('fill', 'red') .style("position", "absolute") .style("z-index", 5); }); return node; }31:T61e,viewof tileCoords = { const coords = { x: 6, y: 12, z: 5 }; const pan = html``; pan.up.onclick = () => move(0, 0, -1); pan.left.onclick = () => move(0, -1, 0); pan.right.onclick = () => move(0, 1, 0); pan.down.onclick = () => move(0, 0, 1); pan.zoomIn.onclick = () => move(1, 0, 0); pan.zoomOut.onclick = () => move(-1, 0, 0); function move(dz, dx, dy) { coords.x += dx; coords.y += dy; if (dz > 0 && coords.z < 14) { coords.z += dz; coords.x *= 2; coords.y *= 2; } else if (dz < 0 && coords.z > 4) { coords.z += dz; coords.x = Math.floor(coords.x / 2); coords.y = Math.floor(coords.y / 2); } pan.dispatchEvent(new CustomEvent("input")); } pan.value = coords; return pan; }32:T73b,html``33:[] 2e:{"title":"Map to profile","cells":[{"id":0,"value":"md`# Map to profile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"md `The nice thing about geotiff maps are that the data values at each pixel are stored in the file and can be easily extracted thanks to the handy [geotiff.js library](https://geotiffjs.github.io/). This means we can do fun things like plot a profile of the values from a slice drawn on the map!\n\nSelect two points on this elevation map and see the profile along the line appear below the map. Position your mouse over the profile to see elevation values while a synchronized cursor follows along on the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2277,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2115,"value":"rampLinear(d3.interpolateYlGnBu,elevRangeReverse, 512)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2402,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2433,"value":"md`These cool CSS navigation buttons are borrowed from [Jeshurun's notebook](https://observablehq.com/@jjhembd/vector-tile-rendering)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"md`Elevation data from [Mapzen terrain tiles](https://www.mapzen.com/blog/long-term-support-mapzen-maps/), labels from [Stamen](http://maps.stamen.com/):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"urlElev=\"https://s3.amazonaws.com/elevation-tiles-prod/geotiff/\"+tileCoords.z+\"/\"+tileCoords.x+\"/\"+tileCoords.y+\".tif\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2060,"value":"elevValues = readGeotiff2(urlElev)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2080,"value":"elevRange = findRange(elevValues, \"includezeros\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2397,"value":"elevRangeReverse = [elevRange[1], elevRange[0]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"urlLabels = \"https://aroycorsanywhere.herokuapp.com/http://c.tile.stamen.com/toner-labels/\" +\n tileCoords.z +\n \"/\" +\n tileCoords.x +\n \"/\" +\n tileCoords.y +\n \"@2x.png\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"scale = d3.scaleLinear()\n .domain([elevRange[0], elevRange[1]]) // unit: km\n .range([100, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"md`Imports:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2109,"value":"import {rampLinear} from \"@ananya-roy/labeled-color-bar\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2058,"value":"import {readGeotiff2} from \"@ananya-roy/usgs-3dep-maps-with-adjustable-colors\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2071,"value":"import {findRange} from \"@ananya-roy/usgs-3dep-maps-with-adjustable-colors\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"geotiff = require(\"geotiff\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2055,"value":"plotty = require('plotty@0.3.1/dist/plotty.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2404,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}