31:[] 2f:{"title":"Exploring Microsoft Planetary Computer STAC Catalog","cells":[{"id":0,"value":"# Exploring Microsoft Planetary Computer STAC Catalog","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"md `In this notebook, we'll explore the geospatial asssets available through Microsoft's \"planetary computer\" service as a STAC-spec catalog and then visualize quick previews using stac-layer. \n\nThe SpatioTemporal Asset Catalog (STAC) specification provides a common language to describe a range of geospatial information. \n\nYou can navigate these resources via a normal webpage or via this stac catalog JSON:https://planetarycomputer.microsoft.com/api/stac/v1/.\n\nThis notebook was created as an experiment by the author to better understand the structure of STAC catalog JSONs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"planetarycomputer_stac_resources = fetch(\"https://planetarycomputer.microsoft.com/api/stac/v1\").then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md `### This is a table of the 'links' key in the top level of the JSON at https://planetarycomputer.microsoft.com/api/stac/v1/.\nIf the selected \"child\" link selected has a \"describedby\" key, an iframe with the contents will appear below the table.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof microsoft_PC_selection_url = Inputs.table(planetarycomputer_stac_resources[\"links\"], {required: false,multiple:false,value:first_child_of_top_level_planetarycomputer})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"{\n const mapURL = url_to_selected_item_description\n const width = \"100%\";\n const height = 600;\n return html ``\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"md `If you'd like to see the value for any of the key besides \"describedby\", you can select it from this table and the iframe above will update:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof selection_level_2 = Inputs.table(data_catalog_selected[\"links\"], {required: false,multiple:false,value:findDescribedBy(data_catalog_selected[\"links\"])})","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md `## If the selected sub-catalog has items, they will be available for selection in the table below. \n\nWhen you select an item, it will update the map view below the table.\n\nIf the table has no rows and just says \"No Results\" then the map will not update.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"viewof selection_level_3 = Inputs.table(data_bulk[\"features\"], {required: false,multiple:false,value:data_bulk[\"features\"][0],columns:[\"id\",\"type\",\"more available..\"]}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"\ncontainer = {\n const container = html`

`;\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"md `NOTE: The projection is sometimes incorrect? NEED TO FIX THIS!! Help wanted`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md `---------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md `----------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md `### Utility Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"function findDescribedBy(object_of_catalog_rels){\n for (let index = 0; index < object_of_catalog_rels.length; ++index) {\n if(object_of_catalog_rels[index].rel == \"describedby\"){\n return object_of_catalog_rels[index]\n }\n }\n for (let index = 0; index < object_of_catalog_rels.length; ++index) {\n if(object_of_catalog_rels[index].rel == \"items\"){\n return object_of_catalog_rels[index]\n }\n }\n return Error\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"function find_self_href(stac_object){\n for (let index = 0; index < stac_object.length; ++index) {\n if (stac_object[index][\"rel\"] == \"self\"){return stac_object[index][\"href\"]}\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"function findFirstChild(object_of_catalog_rels){\n for (let index = 0; index < object_of_catalog_rels.length; ++index) {\n if(object_of_catalog_rels[index].rel == \"child\"){\n return object_of_catalog_rels[index]\n }\n }\n for (let index = 0; index < object_of_catalog_rels.length; ++index) {\n if(object_of_catalog_rels[index].rel == \"items\"){\n return object_of_catalog_rels[index]\n }\n }\n return Error\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"md `----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md `### Function Calls that process out different parts of the JSON`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"planetarycomputer_stac_resources","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"first_child_of_top_level_planetarycomputer = findFirstChild(planetarycomputer_stac_resources[\"links\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"md `Getting the stac-spec JSON of just the catalog selected and not the whole Microsoft Planetary Computer stac-spec `","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"data_catalog_selected = fetch(microsoft_PC_selection_url[\"href\"]).then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"md `Getting the URL to the description of the selected sub-catalog to be used for the iframe into the webpage the desribes that sub-catalog's resources.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"url_to_selected_item_description = selection_level_2[\"href\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"md `Getting the first child item of the selected sub-catalog. We need to do this programmatically and not hard coded as the first child item can appear in slightly different places between catalogs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"first_child_rel = findFirstChild(data_catalog_selected[\"links\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md `This gets the JSON that forms the table of all the resources within the selected sub-catalog.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"data_bulk = fetch(first_child_rel[\"href\"]).then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md `-----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"md `### Map Library Imports, Map Functions, and Map Building`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md `Import stac-layer library to be used with leaflet. \n\nNote, all the JSON parsing of the STAC-spec JSON is done without any stac-specific tooling.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"staclayer = require('stac-layer')","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"md `Importing Leaflet.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md `Importing a Leaflet CSS stylesheet. If we don't do this the tiles will be misordered.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"md `We create the map. Here I'm using some arbitrary starting location. When we add data with stac-layer, we'll also make a call to limit the view to the bounds of the stac-layer layer.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"MAP_obj = {\n const map_c = 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_c);\n yield map_c;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"md `This is some weirdness to deal with the fact that different sub-catalogs have different depths. Might clean this up in future.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"data_of_3_possible = function(){\n if(view_level == \"top\"){return microsoft_PC_selection_url}\n if(view_level == \"second\"){return selection_level_3}\n else{return selection_level_3}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"data = data_of_3_possible()","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"viewof view_level = Inputs.radio([\"top\", \"second\", \"third\"], {label: \"shows bounds of what level of catalog\",value:\"third\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md `This is where we actually call stac-layer, add in our JSON of data, and set display.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"layer = await staclayer(\n data,\n {\n displayOverview: true,\n displayPreview: false\n }\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"md `Adding the stac-layer layer to the leaflet.js map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"MAP_obj.addLayer(layer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"md `Setting the bounds of the leaflet.js map to be the bounds of the stac-layer layer.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"MAP_obj.fitBounds(layer.getBounds())","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"md `----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md `---------------`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}