2f:T641,plotHref = { // create pH plot let canvas = document.getElementById("pHmap"); let soilpH = await geotiff.fromUrl("https://s3.eu-central-1.wasabisys.com/africa-soil/layers30m/sol_ph_h2o_m_30m_0..20cm_2001..2017_africa_epsg4326_v0.1.tif"); let image = await soilpH.getImage(); let bounds = [pixelFromLatLng(image, topLeft), pixelFromLatLng(image, bottomRight)]; const rasters = await image.readRasters({ window: [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]], }); let [data] = rasters; let { width, height } = rasters; let filteredData = data.filter(x => x != 255); let plot = new plotty.plot({ canvas: canvas, data: data, width: width, height: height, domain: [Math.min(...filteredData), Math.max(...filteredData)], noDataValue: 255, colorScale: 'viridis' }); plot.render(); yield canvas.toDataURL(); // create liming plot let canvas2 = document.getElementById("limeMap") // lime requirement calculation let limeData = data.map(x => (x==255) ? 255 : Math.max(0, 53 - x) * 2); let filteredLimeData = limeData.filter(x => x != 255); let plot2 = new plotty.plot({ canvas: canvas2, data: limeData, width: width, height: height, domain: [Math.min(...filteredLimeData), Math.max(...filteredLimeData)], noDataValue: 255, colorScale: 'viridis' }); plot2.render(); //yield canvas2.toDataURL(); // convert from 0-255 scale and from hectares to 30m^2 pixel size mutable totalLimeRequired = (900/10000) * filteredLimeData.reduce((acc, x) => acc + x, 0) / 10; }30:Tb74,{ // Set the scene size. const WIDTH = pageWidth; const HEIGHT = WIDTH / 1.6; // Create a WebGL renderer var threeCanvas = document.getElementById("threeCanvas"); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: threeCanvas, }); renderer.setClearColor(0xd3d3d3); renderer.shadowMap.enabled = true; yield renderer; // Create scene const scene = new THREE.Scene(); // Start the renderer. renderer.setSize(WIDTH, HEIGHT); const rawTiff = await geotiff.fromUrl("https://s3.eu-central-1.wasabisys.com/africa-soil/layers30m/dtm_elevation_aw3d30.nasadem_m_30m_s0..0cm_2017_africa_proj.laea_v0.1.tif"); const tifImage = await rawTiff.getImage(); let proj4string = "+proj=laea +lat_0=5 +lon_0=20 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"; // Swap lat/lon -> lon/lat due to difference in projection let start = proj4("EPSG:4326", proj4string, [topLeft[1], topLeft[0]]); let end = proj4("EPSG:4326", proj4string, [bottomRight[1], bottomRight[0]]); // Swap lon/lat -> lat/lon back for pixel coords let bounds = [pixelFromLatLng(tifImage, [start[1], start[0]]), pixelFromLatLng(tifImage, [end[1], end[0]])]; const rasters = await tifImage.readRasters({ window: bounds[0].concat(bounds[1]), }); let [data] = rasters; let { width, height } = rasters; // Our initial plane geometry const geometry = new THREE.PlaneGeometry( width, height, width - 1, height - 1 ); // Fill z values of the geometry let min = Math.min(...data); data.forEach((x, i) => { geometry.getAttribute('position').setZ(i, x == -32767 ? 0 : 0.1 * (x - min)); }); const texture = new THREE.TextureLoader().load(plotHref); const material = new THREE.MeshLambertMaterial({ wireframe: false, side: THREE.DoubleSide, map: texture, }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; scene.add(terrain); // setup lighting const light = new THREE.DirectionalLight(0xFFFFFF, 1); light.position.set(0, 200, 0); light.target.position.set(0, 0, 0); scene.add(light); scene.add(light.target); // Create camera const VIEW_ANGLE = 45; const ASPECT = WIDTH / HEIGHT; const NEAR = 0.1; const FAR = 10000; const camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.set(0, 200, 150); // Add the camera to the scene. scene.add(camera); // Add orientation grid var grid = new THREE.GridHelper(1000, 10); scene.add(grid); const axesHelper = new THREE.AxesHelper(100); //scene.add(axesHelper); // Add controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.autoRotate = true; controls.autoRotateSpeed = 1.0; function render() { requestAnimationFrame(render); controls.update(); renderer.render(scene, camera); } render(); }31:[] 2d:{"title":"iSDAsoil: agricultural lime calculator","cells":[{"id":0,"value":"md`# iSDAsoil: agricultural lime calculator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"map = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n \n if (L.leafletShades != undefined) setupLeafletShades(container);\n else setTimeout(() => setupLeafletShades(container), 500);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"container = html`\n

pH, predicted mean at 0-20cm depth

\n ${legend({\n color: d3.scaleSequential([4.7, 5.8], d3.interpolateViridis),\n title: \"pH\",\n width: 450\n })}\n

Lime requirement

\n ${legend({\n color: d3.scaleSequential([0, 1.3], d3.interpolateViridis),\n title: \"t/Ha\",\n width: 450\n })}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"html`

Total lime required: ${totalLimeRequired.toFixed(1)} tonnes

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"html`

View terrain

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`# Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"mutable topLeft = [-1.7622, 29.7138]","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"mutable bottomRight = [-1.7897, 29.7419]","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"pageWidth = width // redefining to avoid namespace clash","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"mutable totalLimeRequired = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"L = require(\"leaflet\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"leafletShades = await require(\"leaflet-shades/dist/leaflet-shades\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"geotiff = require(\"geotiff\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"plotty = require(\"plotty/dist/plotty.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"function setupLeafletShades(container) {\n let map = L.map(container, {\n editable: true,\n scrollWheelZoom: false,\n });\n let osmLayer = L.tileLayer(\n 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', \n {\n attribution: '© OpenStreetMap contributors'\n }\n ).addTo(map);\n \n map.setView([-1.77595, 29.72785], 14);\n \n let rect = L.rectangle([[-1.7622, 29.7138], [-1.7897, 29.7419]]).addTo(map);\n rect.enableEdit()\n \n let shades = L.leafletShades({bounds: rect.getBounds()});\n shades.addTo(map);\n \n shades.on('shades:bounds-changed', function(event) {\n let northWest = event.bounds.getNorthWest();\n let southEast = event.bounds.getSouthEast();\n mutable topLeft = [northWest.lat, northWest.lng];\n mutable bottomRight = [southEast.lat, southEast.lng];\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"function pixelFromLatLng(image, [lat, lng]) {\n // from http://geoexamples.com/d3-raster-tools-docs/intr/geotransform.html\n let GT = geoTransform(image);\n // N.B. swap lat/lng from coordinates to pixel X/Y\n let Xpixel = (lng - GT[0]) / GT[1];\n let Ypixel = (lat - GT[3]) / GT[5];\n return [Math.floor(Xpixel), Math.floor(Ypixel)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"function geoTransform(image) {\n // equation from http://geoexamples.com/d3-raster-tools-docs/intr/reading-raster-data.html\n let tiepoint = image.getTiePoints()[0];\n let pixelScale = image.getFileDirectory().ModelPixelScale;\n return [tiepoint.x, pixelScale[0], 0, tiepoint.y, 0, -1*pixelScale[1]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"THREE = {\n const THREE = window.THREE = await require(\"three/build/three.min.js\");\n await require(\"three/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"proj4 = require('proj4')","pinned":true,"hidden":false,"mode":"ojs"},{"id":991,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":995,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}