31:[] 2f:{"title":"First Attempt at Using Stac-Layer","cells":[{"id":0,"value":"# First Attempt at Using Stac-Layer","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"md `A quick attempt to start to learn about STAC (Spatial Temporal Asset Catalog), a standard for describing what earth observation data is available.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md `I started at https://stacindex.org/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md `Looked around there to see what stac software written in JavaScript existed: https://stacindex.org/ecosystem?language=JavaScript`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md `Found https://github.com/stac-utils/stac-layer which is a leaflet friendly NPM module.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"md `I tried to use https://observablehq.com/@observablehq/module-require-debugger to help figure out how to successfully call it in Observable. It seemed to give me an answer as shown below as it doesn't return an error.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"staclayer0 = import('https://unpkg.com/stac-layer@0.6.0/dist/stac-layer.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"staclayer2 = import('https://unpkg.com/stac-layer@0.6.0/dist/stac-layer.min.js?module')","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"md `However, I don't get much father than that as I couldn't import or call anything in the module.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"staclayer0.stacLayer","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"md `The README on https://github.com/stac-utils/stac-layer is sparse but the project itself is brand new, so that's to be expected. Looking forward to see this develop! It will be a nice way to quickly explore what's available in the Earth Observation space on Observable with STAC.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md `------------------------------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md `## However! Their response to an issue about this was lightning fast\n As seen here: https://github.com/stac-utils/stac-layer/issues/17`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md `As is relatively common, it was an issue with how the module was packaged or expected to be packaged by Observable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md `DanielJDufour was nice enough to provide a fix in the latest code, which we can import like below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"staclayer = require('stac-layer@next')","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"md `Now that this works, let's import leaflet and combine them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md `------------------------------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md `## Getting Leaflet.js ready`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"md `Also need to import the style sheet below otherwise your tiles get all misplaced.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"container = {\n const container = html`

`;\n yield container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"md `NOTE: If you zoom in, the resolution will improve. It might take a few seconds to load the finest level of resolution. You should be able to see the muddy water indicating flooding.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"map = {\n const map = L.map(container).setView([40.7299, -73.9923], 13);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n yield map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"md `## Combining Stac-Layer & Leaflet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md `### Getting our data, a stac compliant JSON`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"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())","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"md `### Putting it into a layer user staclayer`","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"layer = await staclayer(\n data,\n {\n displayOverview: true,\n displayPreview: false\n }\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"md `## Adding the layer to the map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"map.addLayer(layer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md `#### If we only go this far, the map still show New York City and no data, so we have to fit the map ot the layer bound. Because the stac JSON this information, it is very easy to call.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"map.fitBounds(layer.getBounds())","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"md `------------`","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"md `## Let's see what else that data source has!`","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"data_catalog = fetch(\"https://raw.githubusercontent.com/cholmes/pdd-stac/master/disasters/catalog.json\").then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"data_catalog2 = fetch(\"https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/catalog.json\").then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"data_catalog3 = fetch(\"https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/0831/catalog.json\").then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"md `As each of the links above, 3 through 7 goes to a JSON that describes a resource, we can swap through them and see the map change`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"data_catalogB_selection_otions = data_catalog3[\"links\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"md `Let's make a little function to transform them so it they play nicely with our checkbox input method.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"function transform_links_for_checklist(links){\n let transformed_array = [];\n for (let index = 3; index < links.length; ++index) {\n let temp_obj = {}\n temp_obj[\"value\"] = links[index][\"href\"]\n temp_obj[\"label\"] = links[index][\"title\"]\n transformed_array.push(temp_obj)\n }\n return transformed_array\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md `This will transform them...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"links_for_checklist = transform_links_for_checklist(data_catalogB_selection_otions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"viewof selected_link = checkbox({\n title: \"Select a JSON of stac data from the available in this catalog\",\n description: \"Please select your favorite colors\",\n options: links_for_checklist,\n value: [\"Houston-East-20170831-103f-100d-0f4f-RGB.json\"],\n submit: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"selected_link","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"data_catalog_selection = data_catalog3[\"links\"][5][\"href\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"md `This then calls the data which is put into the map below`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"data_catalog_B = fetch(\"https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/0831/\"+selected_link).then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"containerB = {\n const container = html`

`;\n yield container; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"mapB = {\n const map = L.map(containerB).setView([40.7299, -73.9923], 13);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n yield map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"layerB = await staclayer(\n data_catalog_B,\n {\n displayOverview: true,\n displayPreview: false\n }\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"mapB.addLayer(layerB)","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"mapB.fitBounds(layer.getBounds())","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}