2e:null 2f:["$","title",null,{"children":"Institution Locations (Geohash) | Simon Lang | Observable"}] 34:T5c4,map = { // create map container let mapContainer = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield mapContainer; // create leaflet map with attributions let map = L.map(mapContainer).setView([34.1, -118.25], 10); let osmLayer = L.tileLayer( // 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png') 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { detectRetina: false, maxZoom: 18, minZoom: 2, noWrap: false, subdomains: 'abc' }).addTo(map); // add heatmap layer let mapHeatLayer = heatLayer(points, { minOpacity: 0.5, maxZoom: 18, max: 1.0, radius: 8, blur: 5, gradient: null }).addTo(map); // add markers let markers = markerCluster({}); let markersLayer = L.geoJson(institutions, { onEachFeature: function (feature, layer) { const properties = feature.properties; const html = `` layer.bindPopup(html); layer.bindTooltip(`${properties.name}`, {sticky: true}); } }); markers.addLayer(markersLayer); map.addLayer(markers); map.fitBounds(markers.getBounds()); // add fullscreen toggle fullScreen({ position: 'topright', title: 'full screen', titleCancel: 'exit full screen', forceSeparateButton: true, }).addTo(map); map.on('enterFullscreen', function(){ console.log('entered fullscreen'); }); }35:[] 32:{"id":"50765f8575f8870a","slug":"institution-locations-geohash","title":"Institution Locations (Geohash)","thumbnail":"d589c316f9e80887f0aa677a01afcd35f60f3be680e8466ca128dce6e13201ab","access_level":"public","create_time":"$D2018-10-02T01:58:26.528Z","update_time":"$D2018-10-08T06:14:59.379Z","view_time":null,"first_public_time":"$D2018-10-05T06:46:50.790Z","has_unpublished_edits":null,"fork":{"id":"fbd075a745b0a607","slug":"charter-schools-in-los-angeles-county","title":"Charter schools in Los Angeles County","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"stars":4,"starred":false,"owner":{"type":"team","id":"b6a8ceeae900fd7a","login":"simon-lang","name":"Simon Lang","avatar_url":"https://avatars-next.observableusercontent.com/36acc5148d0ec9c21119ee2dcc58073f3ae56f419fd7dad0ee558499c01cb1f7","tier":"starter_2024"},"version":319,"publish_version":319,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee7446ff51d4d7d2","login":"simon-lang","name":"Simon Lang","avatar_url":"https://avatars-next.observableusercontent.com/36acc5148d0ec9c21119ee2dcc58073f3ae56f419fd7dad0ee558499c01cb1f7","tier":null}],"members":[{"type":"individual","id":"ee7446ff51d4d7d2","login":"simon-lang","name":"Simon Lang","avatar_url":"https://avatars-next.observableusercontent.com/36acc5148d0ec9c21119ee2dcc58073f3ae56f419fd7dad0ee558499c01cb1f7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Institution Locations (Geohash)","cells":[{"id":0,"value":"md`# Institution Locations (Geohash)\n\nLeafletJS map with a heatmap and clustered markers example.\n\nThere are a few issues with this:\n\n- geohash precision is 3. using precision 2 is nowhere near high enough resolution. But increasing it to 4 would require geo constraints added to the query or we'd end up with two much data. [Figure out how to do this](https://www.elastic.co/guide/en/elasticsearch/reference/current/geo-queries.html).\n- When we get to that zoom level, the markers should reflect actual institutions, not geohash areas.\n- heatmap layer [third parameter (intensity)](https://github.com/Leaflet/Leaflet.heat#lheatlayerlatlngs-options) is scaled based on doc_count, but I think I actually want to change the radius.\n\nData Source: Lens.org all scholarly works published 2008-2018, excluding publication_type:unknown`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"response = d3.json('https://gist.githubusercontent.com/simon-lang/016e6ccc37c80a9df6b96136e20bcdce/raw/7d2d78e559aec92fdf6f6899611dbbf674cc1855/geohash-aggs.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"points = clusters.map(d => ([d.coords.lat, d.coords.lon, scale(d.size)]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"response_precision_2 = d3.json('https://gist.githubusercontent.com/simon-lang/341d12e1fdd52153473fac9316b442d2/raw/100f13385d034b7bcf22d3babab7831dce496870/geohash-aggs-precision-2.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"buckets = response.query_result.aggregations['large-grid'].buckets","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"clusters = buckets.map(d => ({coords: latlon_geohash.decode(d.key), size: d.doc_count, name: d.key}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"extent = d3.extent(clusters.map(d => d.size))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"scale = d3.scaleSqrt().domain(extent).range([0, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"institutions = ({\n \"type\": \"FeatureCollection\",\n \"features\": clusters.map(cluster => ({\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [cluster.coords.lon, cluster.coords.lat] \n },\n \"properties\": {\n \"name\": cluster.name\n }\n }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"request = ({ \n \"scholarly_search\":{\n \"size\":0,\n \"query\":{ \n \"bool\":{\n \"must_not\":[ \n { \n \"terms\":{ \n \"publication_type\":[ \n \"unknown\"\n ]\n }\n }\n ],\n \"filter\":[ \n\t\t\t\t{\"range\":{\"year_published\":{\"gte\":\"2008\",\"lte\":\"2018\"}}}\n ]\n }\n },\n \"lens\":{ \n \"regexEnabled\":false\n },\n \"aggs\":{\n \"large-grid\" : {\n \"geohash_grid\" : {\n \"field\" : \"author.affiliation.grid.address.location\",\n \"precision\" : 2\n }\n }\n }\n },\n \"view\":\"scholar\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"popUpCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"latlon_geohash = require('https://bundle.run/latlon-geohash@1.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"leafletCSS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"markerClusterCSS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"fullScreen = L, require('leaflet.fullscreen@1.4.5').catch(() => L.control.fullscreen)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"fullScreenCSS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"