31:Te5d,{ const container = d3.select(DOM.element('div')); const svg = container.append('svg') //This svg overlay is used to add a red dot and text label to a clicked loaction .attr("width", 500) .attr("height", 40) //.style("position", "absolute") //.style("z-index",2) .style("top", 0) .style("left",0); const group1=svg.append('g'); group1.append('rect') .attr("width", 40) .attr("height", 40) .attr("x", 0) .attr("y",0) .attr("fill", "white"); group1.append('image') .attr("width", 40) .attr("height", 40) .attr("x", 0) .attr("y",0) .attr("xlink:href", "https://image.flaticon.com/icons/svg/1665/1665578.svg") .on("click", function() { if (z<5){ mutable z++; mutable x = Math.min((x*2), (Math.pow(2,mutable z) -1)); mutable y = Math.min((y*2), (Math.pow(2,mutable z) -1)); }}) .append("title") .text("zoom-in"); const group2=svg.append('g'); group2.append('rect') .attr("width", 40) .attr("height", 40) .attr("x", 40+5) .attr("y",0) .attr("fill", "white"); group2.append('image') .attr("width", 40) .attr("height", 40) .attr("x", 40+5) .attr("y",0) .attr("xlink:href", "https://image.flaticon.com/icons/svg/1665/1665612.svg") .on("click", function() { if (z>0){ mutable z--; mutable x = parseInt(x/2); mutable y = parseInt(y/2); }}) .append("title") .text("zoom-out"); const group3=svg.append('g'); group3.append('rect') .attr("width", 40) .attr("height", 40) .attr("x", 80+20) .attr("y",0) .attr("fill", "white"); group3.append('image') .attr("width", 40) .attr("height", 40) .attr("x", 80+20) .attr("y",0) .attr("xlink:href", "https://image.flaticon.com/icons/svg/32/32542.svg") .on("click", function() { if (x>0){ mutable x--; }}) .append("title") .text("left"); const group4=svg.append('g'); group4.append('rect') .attr("width", 40) .attr("height", 40) .attr("x", 120+25) .attr("y",0) .attr("fill", "white"); group4.append('image') .attr("width", 40) .attr("height", 40) .attr("x", 120+25) .attr("y",0) .attr("xlink:href", "https://image.flaticon.com/icons/svg/32/32213.svg") .on("click", function() { if (x<(Math.pow(2,z) -1)){ mutable x++; }}) .append("title") .text("right"); const group5=svg.append('g'); group5.append('rect') .attr("width", 40) .attr("height", 40) .attr("x", 160+45) .attr("y",0) .attr("fill", "white"); group5.append('image') .attr("width", 40) .attr("height", 40) .attr("x", 160+45) .attr("y",0) .attr("xlink:href", "https://image.flaticon.com/icons/svg/36/36586.svg") .on("click", function() { if (y>0){ mutable y--; }}) .append("title") .text("up"); const group6=svg.append('g'); group6.append('rect') .attr("width", 40) .attr("height", 40) .attr("x", 200+50) .attr("y",0) .attr("fill", "white"); group6.append('image') .attr("width", 40) .attr("height", 40) .attr("x", 200+50) .attr("y",0) .attr("xlink:href", "https://image.flaticon.com/icons/svg/36/36669.svg") .on("click", function() { if (y<(Math.pow(2,z) -1)){ mutable y++; }}) .append("title") .text("down"); return container.node(); }32:T4b4,function rampBedrock(color, n = 512) { const canvas = DOM.canvas(n, 35); const context = canvas.getContext("2d"); context.fillStyle = "black"; context.font = "18px Open Sans"; context.textAlign = "end" context.fillText(parseInt(bedrockRange[1]/30.48),512,30); context.textAlign = "start" context.fillText((bedrockRange[0]/30.48).toPrecision(1),0,30); context.textAlign = "center" context.fillText((Math.pow(Math.E, (Math.log(bedrockRange[0])+(Math.log(bedrockRange[1])-Math.log(bedrockRange[0]))*0.25))/30.48).toPrecision(1),128,30); context.textAlign = "center" context.fillText(parseInt(Math.pow(Math.E, (Math.log(bedrockRange[0])+(Math.log(bedrockRange[1])-Math.log(bedrockRange[0]))*0.5))/30.48),256,30); context.textAlign = "center" context.fillText(parseInt(Math.pow(Math.E, (Math.log(bedrockRange[0])+(Math.log(bedrockRange[1])-Math.log(bedrockRange[0]))*0.75))/30.48),384,30); //canvas.style.margin = "0 -14px"; //canvas.style.width = "calc(50%)"; //canvas.style.height = "40px"; canvas.style.imageRendering = "pixelated"; for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 15); } return canvas; }33:T15ec,function drawTiles() { const container = d3.select(DOM.element('div')); container.style("position", "relative"); const canvas = container .append('canvas') //The canvas is used to draw the pixels .attr("width", n) .attr("height", m) .style("position", "relative") .style("z-index", 1) .style("top", 0) .style("left", 0) .node(); const svg = container .append('svg') //This svg overlay is used to add a red dot and text label to a clicked loaction .attr("width", n) .attr("height", m) .style("position", "absolute") .style("z-index", 2) .style("top", 0) .style("left", 0); const group = svg .append('g') .style("position", "absolute") .style("z-index", 3); group .append('rect') .attr("width", 150) .attr("height", 30) .attr("x", 0) .attr("y", m - 30) .attr("fill", "#E2E2E5") .style("position", "absolute") .style("z-index", 3); group .append("text") .attr("x", 5) .attr("y", m - 10) .attr("fill", "black") .style("position", "absolute") .style("z-index", 3) .text("Zoom:" + z + ", X:" + x + ", Y:" + y); /*svg.append('image') //Labels for state/city .attr("width", n) .attr("height", m) .attr("xlink:href",urlLabels);*/ //Draw on the canvas const ctx = canvas.getContext('2d'); const imageDataElev = ctx.createImageData(n, m); //Define pixels for elevation data const imageDataBedrockElev = ctx.createImageData(n, m); //Define pixels for bedrock elevation const imageDataBedrock = ctx.createImageData(n, m); //Define pixels for depth to bedrock var k; for (let i = 0; i < imageDataElev.data.length; i += 4) { k = i / 4; // Modify pixel data. //The color of each pixel is coded based on a color bar and the depth value at that pixel. See the 'color' cell. imageDataElev.data[i + 0] = d3.rgb(colorElev[k]).r; // R value imageDataElev.data[i + 1] = d3.rgb(colorElev[k]).g; // G value imageDataElev.data[i + 2] = d3.rgb(colorElev[k]).b; // B value imageDataElev.data[i + 3] = 255; // A value } for (let i = 0; i < imageDataBedrockElev.data.length; i += 4) { k = i / 4; // Modify pixel data. //The color of each pixel is coded based on a color bar and the depth value at that pixel. See the 'color' cell. imageDataBedrockElev.data[i + 0] = d3.rgb(colorBedrockElev[k]).r; // R value imageDataBedrockElev.data[i + 1] = d3.rgb(colorBedrockElev[k]).g; // G value imageDataBedrockElev.data[i + 2] = d3.rgb(colorBedrockElev[k]).b; // B value imageDataBedrockElev.data[i + 3] = 255; // A value } for (let i = 0; i < imageDataBedrock.data.length; i += 4) { k = i / 4; // Modify pixel data. //The color of each pixel is coded based on a color bar and the depth value at that pixel. See the 'color' cell. imageDataBedrock.data[i + 0] = d3.rgb(colorBedrock[k]).r; // R value imageDataBedrock.data[i + 1] = d3.rgb(colorBedrock[k]).g; // G value imageDataBedrock.data[i + 2] = d3.rgb(colorBedrock[k]).b; // B value imageDataBedrock.data[i + 3] = 255; // A value } //Depending on which option is selected, draw elevation/bedrock depth pixels on the canvas if (surface == "Surface Elevation Above Sea Level") { ctx.putImageData(imageDataElev, 0, 0); } if (surface == "Bedrock Elevation Above Sea Level") { ctx.putImageData(imageDataBedrockElev, 0, 0); } if (surface == "Absolute Depth To Bedrock") { ctx.putImageData(imageDataBedrock, 0, 0); } //Add a red dot and text label on click svg.on("click", function() { var d; var coords = d3.mouse(this); // Retrieve location of click in pixels d3.selectAll('rect').remove(); //Delete any existing selection or labels d3.selectAll('text').remove(); //Delete any existing selection or labels svg .append('rect') //Add a 10x10 pixel red marker at the clicked location .attr("width", 10) .attr("height", 10) .attr("x", coords[0] - 5) .attr("y", coords[1] - 5) .style("fill", "red"); //Now add a text label to display depth, lon, lat var textX = coords[0] + 6; //By default the label is positioned to the right of the marker var textY = coords[1] + 5; if (coords[0] > n - 45) { //Move label to the left if marker is near the right edge textX = coords[0] - 45; } if (coords[1] > m - 10) { //Move label up if marker is near bottom edge textY = coords[1] - 10; } if (coords[1] < 10) { //Move label dowm in marker is near the top edge textY = coords[1] + 10; } //Depending on which option is selected, print the value of elevation above sea level or depth to bedrock in feet if (surface == "Surface Elevation Above Sea Level") { d = elevValues[coords[0] + coords[1] * elevTileImage.getWidth()]; } if (surface == "Bedrock Elevation Above Sea Level") { d = bedrockElevValues[coords[0] + coords[1] * elevTileImage.getWidth()]; } if (surface == "Absolute Depth To Bedrock") { d = bedrockValues[coords[0] + coords[1] * bedrockTileImage.getWidth()] / 30.48; } svg .append('text') // Now add a text label at this location .attr("x", textX) .attr("y", textY) .attr("fill", "red") .attr("font-weight", "bold") .text(parseInt(d) + "ft"); //.text("d:"+d+", Lon:"+ (parseFloat(cornerPoints[0])+parseFloat(pixelWidth*coords[0])).toPrecision(4)+", Lat:"+ (parseFloat(cornerPoints[3])-parseFloat(pixelHeight*coords[1])).toPrecision(4)); }); return container.node(); }34:T47a,//code a pixel color based on depth value and the colorbar color={ var depthcolor=[]; var rangecheck, scale, r, g, b, rgb; for (let i = 0; i < bedrockValues.length; i ++) { r=0; g=0; b=0; for (var j=0; jzoom-in`; const button2 = html`