Published
Edited
Apr 23, 2021
shpjs = require('shpjs@3.4.3/dist/shp.js')
roads = fetch("https://s3.amazonaws.com/geoblaze/osm_roads_clip2.zip")
.then(response => response.arrayBuffer())
.then(shpjs)
viewGeoJSONLink = `http://geojson.io/#data=data:application/json,${encodeURIComponent(JSON.stringify(roads))}`;
turf = require('@turf/turf@5')
pixelSize = 0.005;
gridCells = {
const [ minX, minY, maxX, maxY ] = roadsBbox;
return turf.squareGrid([ minX-pixelSize, minY-pixelSize, maxX+pixelSize, maxY+pixelSize ], pixelSize, { units: 'degrees' });
}
viewGridCellsLink = `http://geojson.io/#data=data:application/json,${encodeURIComponent(JSON.stringify(gridCells))}`;
html`<a href="${viewGridCellsLink}" target="_blank">View Grid Cells in geojson.io</a>`
counts = gridCells.features.reduce((counts, gridCell) => {
intersections.forEach(intersection => {
const point = turf.point(intersection);
if(turf.booleanContains(gridCell, point)) {
const key = JSON.stringify(gridCell);
if (counts[key]) counts[key]++;
else counts[key] = 1;
}
});
return counts;
}, {});
cellsWithIntersections = Object.keys(counts).map(JSON.parse)
bboxCellsWithIntersections = turf.bbox(turf.featureCollection(gridCells.features))
metadata = {
const [minX, minY, maxX, maxY] = turf.bbox(gridCells);
const height = Math.round((maxY - minY) / pixelSize);
const width = Math.round((maxX - minX) / pixelSize);
return {
height,
xmin: minX,
xmax: maxX,
width,
ymin: minY,
ymax: maxY
}
}
newValues = {
const results = [new Array(metadata.height).fill(0).map(row => new Array(metadata.width).fill(0))];
cellsWithIntersections.forEach(cell => {
const [minX, minY, maxX, maxY] = turf.bbox(gridCells);
const [x, y] = turf.centroid(cell).geometry.coordinates;
const rowIndex = Math.round((maxY - y) / pixelSize);
const columnIndex = Math.round((x - minX) / pixelSize);
results[0][rowIndex][columnIndex] = counts[JSON.stringify(cell)];
});
return results;
};
parseGeoRaster = require("georaster@1.5.4")
newGeoRaster = {
const [xmin, ymin, xmax, ymax] = turf.bbox(gridCells);
const metadata = {
height: newValues[0].length,
noDataValue: null,
pixelHeight: pixelSize,
pixelWidth: pixelSize,
projection: 4326,
width: newValues[0][0].length,
xmin,
xmax,
ymin,
ymax
};
return parseGeoRaster(newValues, metadata)
}
newGeoRaster.toCanvas()
GeoTIFF = require("geotiff")
new_geotiff_as_binary_data = {
const values = newGeoRaster.values[0].reduce((results, row) => {
row.forEach(cell => results.push(cell));
return results;
});
const metadata = {
height: newGeoRaster.height,
ModelPixelScale: [pixelSize, pixelSize, 0],
ModelTiepoint: [0, 0, 0, newGeoRaster.xmin, newGeoRaster.ymax, 0],
width: newGeoRaster.width
};
return GeoTIFF.writeArrayBuffer(values, metadata);
}
dataurl = "data:image/tiff;base64," + btoa(String.fromCharCode(...new Uint8Array(new_geotiff_as_binary_data)))
html`<a target="_blank" href="https://app.geotiff.io?resolution=${metadata.height*metadata.width}&url=${encodeURIComponent(dataurl)}"><button style="height: 5rem; width: 50rem;">Analyze with GeoTIFF.io</button></a>`;
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
