45:["$","title",null,{"children":"San Francisco trees from Datasette | Tom MacWright | Observable"}] 4d:[] 49:{"id":"f9d504a0bd8aff3c","slug":"san-francisco-trees-from-datasette","title":"San Francisco trees from Datasette","thumbnail":"9a9e50a19bacec42d5afc8345d3b08c03a65d80d55dccadec1a8b078635e0fda","access_level":"public","create_time":"$D2018-01-31T20:23:16.923Z","update_time":"$D2018-01-31T20:37:17.794Z","view_time":null,"first_public_time":"$D2018-01-31T20:38:17.845Z","has_unpublished_edits":null,"fork":{"id":"a93d2d70bf44f486","slug":"san-francisco-trees-from-datasette","title":"San Francisco trees from Datasette","owner":{"id":"3b974c2db4452cfc","login":"simonw","name":"Simon Willison"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024","bio":"hi!","followed_by_you":false,"follows_you":false},"version":126,"publish_version":126,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"bio":"hi!","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"San Francisco trees from Datasette","cells":[{"id":0,"value":"md`# San Francisco trees from Datasette\n\nStarting point: https://beta.observablehq.com/@tmcw/leaflet\n\nMy attempt at recreating https://sf-tree-search.now.sh/ using Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"L = {\n const L = window.L = await require('leaflet@1.2.0');\n await require('leaflet.markercluster');\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`Load CSS\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"url = `https://san-francisco.datasettes.com/sf-trees-ebc2ad9.json?sql=select+Latitude%2C+Longitude%2C+qSpecies.value+as+qSpecies%2C%0D%0A++qAddress%0D%0Afrom+Street_Tree_List+%0D%0A++join+qSpecies+on+Street_Tree_List.qSpecies+%3D+qSpecies.id%0D%0Awhere+Street_Tree_List.rowid+in+%28select+rowid+from+%5BStreet_Tree_List_fts%5D+where+%5BStreet_Tree_List_fts%5D+match+%3Asearch%29&search=${searchQuery}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"trees = {\n let response = await fetch(url);\n let json = await response.json();\n return json.rows;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"searchQuery = Generators.observe(notify => {\n function submitted(event) { notify(searchForm.text.value); event.preventDefault(); }\n searchForm.addEventListener(\"submit\", submitted);\n notify(searchForm.text.value);\n return () => searchForm.removeEventListener(\"submit\", submitted);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"trees[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"searchForm = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"mapContainer = {\n let container = DOM.element('div', {\n style: `width:${width}px;height:${width/1.6}px`\n });\n yield container;\n let map = container.map = L.map(container).setView([37.7881014522033, -122.420267712778], 13);\n let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {\n attribution: 'Wikimedia maps beta | © OpenStreetMap contributors'\n }).addTo(map);\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"{\n let {map} = mapContainer;\n let currentLayer = this;\n if (!map) return;\n if (!currentLayer) {\n currentLayer = L.markerClusterGroup({\n chunkedLoading: true,\n maxClusterRadius: 50\n });\n map.addLayer(currentLayer);\n }\n let markerList = [];\n trees.forEach(tree => {\n if (tree[0] && tree[1]) {\n let title = tree[2] + ' - ' + tree[3];\n let marker = L.marker(L.latLng(tree[0], tree[1]), {\n title: title\n });\n marker.bindPopup(title);\n markerList.push(marker);\n }\n });\n currentLayer.clearLayers();\n currentLayer.addLayers(markerList);\n map.fitBounds(currentLayer.getBounds());\n return currentLayer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"'Text under map'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null