The avatar for @justingosses
Justin Gosses
JavaScript | Python | Data Visualization | Web Development | Geology | Space | Analytics | IoT | Learn, Build Stuff, and Figure Things Out
Published
Edited
Nov 4, 2021
1 star
Geology
Exploring Microsoft Planetary Computer STAC Catalog
First Attempt at Using Stac-Layer
My Geology ExperienceHello Wellioviz - transform2020 hackathon notebook vCFirst wellioviz notebook with all functions from npm instead of local functionsWell Log in D3.js v5 notebook 2 with all functions in notebookHello WelliovizGeologic Well Logs w VegaListening to well logs with Tone.js & Wellio.jsSpearman Correlation Coefficient using <i>SpearmanRHO</i>Overly Simplified Stratigraphic ModelingWell Log in D3.js v5
Also listed in…
water related
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
staclayer0 = import('https://unpkg.com/stac-layer@0.6.0/dist/stac-layer.min.js')
Insert cell
staclayer2 = import('https://unpkg.com/stac-layer@0.6.0/dist/stac-layer.min.js?module')
Insert cell
Insert cell
staclayer0.stacLayer
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
staclayer = require('stac-layer@next')
Insert cell
Insert cell
Insert cell
Insert cell
L = require('leaflet@1.2.0')
Insert cell
Insert cell
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
Insert cell
container = {
const container = html`<div style="height:600px;">`;
yield container;
}
Insert cell
Insert cell
map = {
const map = L.map(container).setView([40.7299, -73.9923], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "&copy; <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
yield map;
}
Insert cell
Insert cell
Insert cell
data = fetch("https://raw.githubusercontent.com/cholmes/pdd-stac/beta2/disasters/hurricane-harvey/hurricane-harvey-0831/20170831_172754_101c/20170831_172754_101c.json").then(res => res.json())
Insert cell
md `### Putting it into a layer user staclayer`
Insert cell
layer = await staclayer(
data,
{
displayOverview: true,
displayPreview: false
}
);
Insert cell
Insert cell
map.addLayer(layer)
Insert cell
Insert cell
map.fitBounds(layer.getBounds())
Insert cell
md `------------`
Insert cell
md `## Let's see what else that data source has!`
Insert cell
data_catalog = fetch("https://raw.githubusercontent.com/cholmes/pdd-stac/master/disasters/catalog.json").then(res => res.json())
Insert cell
data_catalog2 = fetch("https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/catalog.json").then(res => res.json())
Insert cell
data_catalog3 = fetch("https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/0831/catalog.json").then(res => res.json())
Insert cell
Insert cell
data_catalogB_selection_otions = data_catalog3["links"]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
selected_link
Insert cell
import {checkbox} from "@jashkenas/inputs"
Insert cell
data_catalog_selection = data_catalog3["links"][5]["href"]
Insert cell
Insert cell
data_catalog_B = fetch("https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/0831/"+selected_link).then(res => res.json())
Insert cell
containerB = {
const container = html`<div style="height:600px;">`;
yield container;
}
Insert cell
mapB = {
const map = L.map(containerB).setView([40.7299, -73.9923], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "&copy; <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
yield map;
}
Insert cell
layerB = await staclayer(
data_catalog_B,
{
displayOverview: true,
displayPreview: false
}
);
Insert cell
mapB.addLayer(layerB)
Insert cell
mapB.fitBounds(layer.getBounds())
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