2b:null 2c:["$","title",null,{"children":"Planet API | Frank Rowe | Observable"}] 31:T630, loader = html `

`32:[] 2f:{"id":"826485ec390e8daa","slug":"planet-api","title":"Planet API","thumbnail":"b0fd4c2e8abfbf4de0b996fd0fa4b8a4f024d7176f3bd1bbcb2b8d76564011c2","access_level":"public","create_time":"$D2018-10-22T15:47:47.574Z","update_time":"$D2019-01-17T15:59:45.385Z","view_time":null,"first_public_time":"$D2018-10-23T15:44:21.488Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"328b3efb9a5b2a58","login":"frankrowe","name":"Frank Rowe","avatar_url":"https://avatars-next.observableusercontent.com/1026a45b367430f93c73c655275a025b41480c2c614b8645e48982d8be0f378c","tier":"starter_2024"},"version":576,"publish_version":576,"role":null,"authored":false,"authors":[{"type":"individual","id":"92dc8186d4f17bf9","login":"frankrowe","name":"Frank Rowe","avatar_url":"https://avatars-next.observableusercontent.com/1026a45b367430f93c73c655275a025b41480c2c614b8645e48982d8be0f378c","tier":null}],"members":[{"type":"individual","id":"92dc8186d4f17bf9","login":"frankrowe","name":"Frank Rowe","avatar_url":"https://avatars-next.observableusercontent.com/1026a45b367430f93c73c655275a025b41480c2c614b8645e48982d8be0f378c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Planet API","cells":[{"id":0,"value":"md`# Planet API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"intro = md`This notebook allows browsing Planet imagery on a map, and can set some filters for satellite source, date, and cloud cover. It will auto search as the map is panned. Click on a footprint in the map to preview that imagery item. My api key only works in California, and is rate-limited, so please plug in [your own api key](https://www.planet.com/login/?mode=signup) below.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"api_key = '73f247aa94174b7e961ea9e87b789d86'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"md`Set filters:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"viewof item_type = {\n let item_types = await d3.json(`https://api.planet.com/data/v1/item-types/`, {\n headers: {\"authorization\": \"api-key \" + api_key}\n }).then(r => r.item_types);\n const options = item_types.map(i => ({value: i.id, label: i.display_name}));\n return selectpicker({\n description: \"Item Type\",\n options: options,\n value: 'REOrthoTile'\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"viewof start_date = {\n const last_month = new Date();\n last_month.setMonth(new Date().getMonth() - 1);\n return datepicker({\n value: last_month.toISOString().slice(0, 10),\n description: 'Start Date'\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"viewof end_date = datepicker({\n value: new Date().toISOString().slice(0, 10),\n description: 'End Date'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"viewof cloud_cover = slider({\n min: 0,\n max: 100,\n value: 20,\n precision: 1,\n submit: \"Set\",\n description: \"Cloud Cover\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"summary = md`Showing results from source __${item_type}__ between __${start_date}__ and __${end_date}__ with a cloud cover ≤ __${cloud_cover}%__.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"mapCanvas = map.getTargetElement()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"selected = {\n if (selected_item) {\n const item = items.features.filter(i => i.id === selected_item.id)[0];\n return md`### Previewing ${selected_item.id}\n - Acquired: ${item.properties.acquired}\n - Cloud Cover: ${item.properties.cloud_cover*100}%\n - Item Type: ${item.properties.item_type}\n - Provider: ${item.properties.provider}\n - Ground Sample Distance: ${item.properties.gsd}m\n - Sun Elevation: ${item.properties.sun_elevation}°\n - Sun Azimuth: ${item.properties.sun_azimuth}°\n `;\n }\n return md `Click on a footprint to preview the item.`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"map = {\n let styles = {\n 'Polygon': new ol.style.Style({\n stroke: new ol.style.Stroke({\n color: 'rgba(0, 0, 0, 0.5)',\n lineDash: [4],\n width: 1\n }),\n fill: new ol.style.Fill({\n color: 'rgba(0, 0, 0, 0.1)'\n })\n })\n };\n \n let search_layer = new ol.layer.Vector({\n source: vector_source,\n style: f => styles[f.getGeometry().getType()]\n });\n \n const map = new ol.Map({\n layers: [\n new ol.layer.Tile({\n source: new ol.source.OSM()\n }),\n search_layer,\n preview_layer\n ],\n target: html`

`,\n view: new ol.View({\n center: ol.proj.fromLonLat([-122.41, 37.5]),\n zoom: 10,\n minZoom: 8\n })\n });\n setTimeout(() => map.updateSize(), 1);\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"extent = Generators.observe(next => {\n next(viewToExtent(map));\n map.on('moveend', evt => {\n reset();\n next(viewToExtent(evt.map));\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"geometry_filter = ({\n type: 'GeometryFilter',\n field_name: 'geometry',\n config: {\n type: 'Polygon',\n coordinates: [\n [\n [extent[0], extent[1]],\n [extent[2], extent[1]],\n [extent[2], extent[3]],\n [extent[0], extent[3]],\n [extent[0], extent[1]]\n ]\n ]\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"date_range_filter = ({\n type: 'DateRangeFilter',\n field_name: 'acquired',\n config: {\n gte: new Date(start_date),\n lte: new Date(end_date)\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"cloud_cover_filter = ({\n type: 'RangeFilter',\n field_name: 'cloud_cover',\n config: {\n lte: cloud_cover / 100,\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"filters = ({\n type: 'AndFilter',\n config: [geometry_filter, date_range_filter, cloud_cover_filter]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"items = {\n map.getViewport().appendChild(loader);\n return d3.json(`https://api.planet.com/data/v1/quick-search?_page_size=50`, {\n headers: {\n 'Authorization': 'api-key ' + api_key,\n 'Content-Type': 'application/json'\n },\n method: 'POST',\n body: JSON.stringify({\n item_types: [item_type],\n filter: filters\n })\n }).then((res) => {\n map.getViewport().removeChild(loader);\n return res;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"{\n const format = new ol.format.GeoJSON();\n selection_interaction.on(\"select\", event => {\n const feature = selection_interaction.getFeatures().getArray()[0];\n const geojson = JSON.parse(format.writeFeature(feature, {\n dataProjection: 'EPSG:4326',\n featureProjection: 'EPSG:3857'\n }));\n mutable selected_item = geojson;\n })\n return md`Set Selected Item`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"{\n vector_source.addFeatures((new ol.format.GeoJSON()).readFeatures(items, {\n dataProjection: 'EPSG:4326',\n featureProjection: 'EPSG:3857'\n }));\n return md`Add Search Layer`\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"{\n if (selected_item) {\n let rasterSource = new ol.source.XYZ({\n url: `https://tiles{0-3}.planet.com/data/v1/${item_type}/${selected_item.id}/{z}/{x}/{y}.png?api_key=${api_key}`\n })\n preview_layer.setSource(rasterSource);\n map.addLayer(preview_layer);\n }\n return md`Add Preview Layer`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"mutable selected_item = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"function viewToExtent(map) {\n let e = map.getView().calculateExtent(map.getSize());\n let bottomLeft = ol.proj.toLonLat(ol.extent.getBottomLeft(e));\n let topRight = ol.proj.toLonLat(ol.extent.getTopRight(e));\n let extent = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];\n return extent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"function reset() {\n vector_source.clear();\n selection_interaction.getFeatures().clear();\n map.removeLayer(preview_layer);\n mutable selected_item = null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"selection_interaction = {\n let s = new ol.interaction.Select({\n style: new ol.style.Style({\n stroke: new ol.style.Stroke({\n color: 'rgba(255, 0, 0, 0.5)',\n width: 2\n }),\n fill: new ol.style.Fill({\n color: 'rgba(0, 0, 0, 0)'\n })\n })\n });\n map.addInteraction(s);\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"preview_layer = new ol.layer.Tile()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"vector_source = new ol.source.Vector()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(\n const ol = await require(\"https://openlayers.org/en/v5.2.0/build/ol.js\").catch(() => window.ol);\n if (!ol.css) ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"import {date as datepicker, number as numberpicker, select as selectpicker, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"