2d:null 2e:["$","title",null,{"children":"Example H3 Index to Local I,J Coordinates with H3.js. | Rusty Conover | Observable"}] 33:Ta0c,map = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.6}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container); let osmLayer = L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' } ).addTo(map); let hexesLayer = L.geoJson(hexes, { weight: 1, pointToLayer: function(feature, latlng) { const l2 = String(feature.properties.name); // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute' console.error(latlng); return new L.CircleMarker(latlng, { radius: 1 }) .bindTooltip(l2, { permanent: true, opacity: 0.7 }) .openTooltip(); }, style: feature => { // Determine the color of the hexagon from the coverage. const p = ((feature.properties.coverage - 273.15) * 9) / 5 + 32; return { color: d3.interpolateSpectral(1 - p / 120), stroke: 0, opacity: strokeOpacity, fillOpacity }; } }).addTo(map); map.fitBounds(hexesLayer.getBounds()); var legend = L.control({ position: 'bottomright' }); legend.onAdd = function(map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], labels = []; div.innerHTML += "

Apparent Temperature:

"; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); }34:[{"id":"ef41fb4f57501c8d25b048fa039bcdef4994c28bddbb9f6e3ffad57077fb448ebb02a1eef9b81504dab48b360bc86f93cf6aed1d1faa4c6272cc8dae44d9c18d","href":"https://static.observableusercontent.com/files/ef41fb4f57501c8d25b048fa039bcdef4994c28bddbb9f6e3ffad57077fb448ebb02a1eef9b81504dab48b360bc86f93cf6aed1d1faa4c6272cc8dae44d9c18d","name":"apparent.temp.csv","type":"text/csv","lastModified":1587912603174.796,"size":6417320}] 31:{"id":"b18e09610838f5ae","slug":"example-h3-index-to-local-i-j-coordinates-with-h3-js","title":"Example H3 Index to Local I,J Coordinates with H3.js.","thumbnail":"9714b912ab41f4e819790c8196cc01af35ed5cce73b180364d157c70b450b354","access_level":"public","create_time":"$D2020-04-26T14:50:03.174Z","update_time":"$D2020-04-26T15:32:09.985Z","view_time":null,"first_public_time":"$D2020-04-26T15:33:05.851Z","has_unpublished_edits":null,"fork":{"id":"bf3394bd9a01a328","slug":"2020-04-22-apparent-temperature-visualized-with-h3-leaflet","title":"2020-04-22 Apparent Temperature visualized with H3, Leaflet.js and D3.","owner":{"id":"7086dbb1b7698f76","login":"rustyconover","name":"Rusty Conover"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7086dbb1b7698f76","login":"rustyconover","name":"Rusty Conover","avatar_url":"https://avatars-next.observableusercontent.com/019e8b78c476a383690d3ab8df8e09fc99d70a5c22a53b885784dcbcc294535c","tier":"starter_2024"},"version":310,"publish_version":310,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf2241b0768bf813","login":"rustyconover","name":"Rusty Conover","avatar_url":"https://avatars-next.observableusercontent.com/019e8b78c476a383690d3ab8df8e09fc99d70a5c22a53b885784dcbcc294535c","tier":null}],"members":[{"type":"individual","id":"cf2241b0768bf813","login":"rustyconover","name":"Rusty Conover","avatar_url":"https://avatars-next.observableusercontent.com/019e8b78c476a383690d3ab8df8e09fc99d70a5c22a53b885784dcbcc294535c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Example H3 Index to Local I,J Coordinates with H3.js.","cells":[{"id":0,"value":"md`# Example H3 Index to Local I,J Coordinates with H3.js.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`Overlay a map of apparent temperature with local I,J coordinate values for each hexagon. Hexagons that can't be reached from the origin point are noted.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"viewof resolution = slider({\n min: 0,\n max: 3,\n value: 1,\n step: 1,\n description: \"H3 Index Resolution\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"viewof desired_frame = slider({\n min: 1,\n max: 43,\n value: 1,\n step: 1,\n description: \"Forecast frame interval\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof fillOpacity = slider({\n min: 0.0,\n max: 1,\n value: 0.77,\n description: \"Fill opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof strokeOpacity = slider({\n min: 0.0,\n max: 1,\n description: \"Stroke opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"d3 = require(\"d3-array@1\", \"d3-color@1\", \"d3-scale-chromatic@^1.4.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"filtered = forecast_cells.filter(\n v => v[0] == desired_frame && v[1] == resolution\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"md`Pick an Origin H3 index value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"origin = filtered[0][2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"hexes = {\n let counter = 0;\n let hexGrid = [];\n for (const [frame, level, hex_id, coverage] of filtered) {\n // get the coordinates of the outline of the hexagon.\n hexGrid.push({\n type: \"Feature\",\n properties: {\n coverage: parseInt(coverage, 10),\n name: \"hello\"\n },\n geometry: {\n type: \"Polygon\",\n coordinates: [h3.h3ToGeoBoundary(hex_id, true)]\n }\n });\n // Get the center point of the hexagon so a point can be created.\n const center = h3.h3ToGeo(hex_id);\n let coords;\n try {\n coords = h3.experimentalH3ToLocalIj(origin, hex_id);\n coords = `${coords.i},${coords.j}`;\n } catch (e) {\n coords = \"Error\";\n }\n hexGrid.push({\n type: \"Feature\",\n properties: {\n coverage: parseInt(coverage, 10),\n name: coords\n },\n geometry: {\n type: \"Point\",\n coordinates: [center[1], center[0]]\n }\n });\n }\n yield {\n type: \"FeatureCollection\",\n features: hexGrid\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"forecast_cells = (await FileAttachment(\"apparent.temp.csv\").text())\n .split(/\\n/)\n .filter(v => v != '')\n .map(v => v.split(/,/))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"h3 = require('h3-js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 32:"$31:body"