The avatar for @felipesbarros
felipesbarros
Geographer commited with free software and GIS development; In constant learning process with #R and #python; Contributing to @Model-R project
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

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.
Learn more