Published
Edited
Oct 27, 2021
1 fork
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
geoblaze = require('geoblaze@0.3.2')
Insert cell
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
Insert cell
L = require('leaflet@1.2.0')
Insert cell
lodash = require("lodash")
Insert cell
chroma = require("https://unpkg.com/chroma-js")
Insert cell
### Loading spatial data

Loading raster spatial data (geotif) from github repository using `georaster`. This raster has information about air pollution (pm<2.5) for brazilian's Amazon region.

* `georaster_july` has mean value for July 2020's;
* `georastertimeSeries` has mean values for July, August, September and October;
Insert cell
georaster_july = geoblaze.load("https://felipesbarros.github.io/geoblaze_test/pm25_Jul.tif")
Insert cell
georastertimeSeries = geoblaze.load("https://felipesbarros.github.io/geoblaze_test/pm25_timeseries.tif")
Insert cell
### Inspecting loaded data

Once loaded, we can present the rasters using `toCanvas()` function.

Remember that `georaster_july` has only one band and `georastertimeSeries` has four bands, which explains the differences in contrast between each figure.
Insert cell
georaster_july.toCanvas({width: georaster_july.width, height: georaster_july.height})
Insert cell
georastertimeSeries.toCanvas({width: georastertimeSeries.width, height: georastertimeSeries.height})
Insert cell
### Sowing data on leaflet

So far, so good. But, how can we go further?
Just presenting the raster is fine, but our challenge is much bigger: plot in a dinamic webmap, retrieve statistics from raster band according to other spatial objects... So, let's go!

First I will retrieve from [nominatim (OSM)]() Acre's boundering as `geojson`.
Insert cell
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
Insert cell
acre = {
let response = await fetch('https://nominatim.openstreetmap.org/search.php?state=Acre&country=Brazil&polygon_geojson=1&format=json');
let json = await response.json();
return json[0].geojson
}
Insert cell
### Using georaster with leaflet
Now lets build our webmap:
Insert cell
amazonMap = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let acreLayer = L.geoJson(acre, {
weight: 2,
color: '#432'
}).addTo(map);
map.fitBounds(acreLayer.getBounds());

var july_layer = new GeoRasterLayer({
georaster: georaster_july,
opacity: .7
});
july_layer.addTo(map);

map.on('click', function(evt) {
var latlng = map.mouseEventToLatLng(evt.originalEvent);
alert(geoblaze.identify(georaster_july, [latlng.lng, latlng.lat]));
});
}

Insert cell
### Extracting pm<2.5 values for Acre
Insert cell
AC_means = geoblaze.mean(georastertimeSeries, acre)
Insert cell
### Ploting result with plotly
Insert cell
x = lodash.range(7, 10 + 1).map(month => `${2020}-${month}`)
Insert cell
{
var trace = {
type: "scatter",
mode: "lines",
name: 'y',
x: x,
y: AC_means,
line: {color: '#FF0000'}
}
var data = [trace];
var layout = {
title: 'Mean Monthly Air Polution (pm<2.5) for Acre state',
width: width
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more