2b:null 2c:["$","title",null,{"children":"deck.gl GeoJsonLayer Example | Dylan | Observable"}] 31:[] 2f:{"id":"5e312f69a8f40e2a","slug":null,"title":"deck.gl GeoJsonLayer Example","thumbnail":"858eb82abc1eefbcb2241e9ef464757ab639106d1497d315012dc61019cfa961","access_level":"public","create_time":"$D2023-06-06T15:39:54.260Z","update_time":"$D2023-06-06T19:09:44.448Z","view_time":null,"first_public_time":"$D2023-06-06T15:39:54.260Z","has_unpublished_edits":null,"fork":{"id":"fb0e1293e94029be","slug":"deck-gl-geojsonlayer-example","title":"deck.gl GeoJsonLayer Example","owner":{"id":"2bdf2e6ab78b8e96","login":"mkandalf","name":"Nick Meyer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"02a75d28143bf487","login":"nofurtherinformation","name":"Dylan","avatar_url":"https://avatars-next.observableusercontent.com/a494170e1e25c8f92f54468c30fecf4bcf81095a7268e37af8e633e7fd8d22ba","tier":"starter_2024"},"version":253,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"54c23d6cacd69e20","login":"nofurtherinformation","name":"Dylan","avatar_url":"https://avatars-next.observableusercontent.com/a494170e1e25c8f92f54468c30fecf4bcf81095a7268e37af8e633e7fd8d22ba","tier":null}],"members":[{"type":"individual","id":"54c23d6cacd69e20","login":"nofurtherinformation","name":"Dylan","avatar_url":"https://avatars-next.observableusercontent.com/a494170e1e25c8f92f54468c30fecf4bcf81095a7268e37af8e633e7fd8d22ba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"deck.gl GeoJsonLayer Example","cells":[{"id":0,"value":"md`# deck.gl GeoJsonLayer Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"container = html `

\n ${legendEntries.map(({color, value}) => html`

${value}

`)}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"legendEntries = [\n {color: 'red', value: '0-10'},\n {color: 'yellow', value: '10-100'}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"tooltip = container.querySelector('#tooltip')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"colorScale = {\n const COLOR_SCALE = [\n // negative\n [65, 182, 196],\n [127, 205, 187],\n [199, 233, 180],\n [237, 248, 177],\n // positive\n [255, 255, 204],\n [255, 237, 160],\n [254, 217, 118],\n [254, 178, 76],\n [253, 141, 60],\n [252, 78, 42],\n [227, 26, 28],\n [189, 0, 38],\n [128, 0, 38]\n ];\n\n return x => {\n const i = Math.round(x * 7) + 4;\n if (x < 0) {\n return COLOR_SCALE[i] || COLOR_SCALE[0];\n }\n return COLOR_SCALE[i] || COLOR_SCALE[COLOR_SCALE.length - 1];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"lightSettings = {\n return {\n lightsPosition: [-125, 50.5, 5000, -122.8, 48.5, 8000],\n ambientRatio: 0.2,\n diffuseRatio: 0.5,\n specularRatio: 0.3,\n lightsStrength: [1.0, 0.0, 2.0, 0.0],\n numberOfLights: 2\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"deckgl = {\n return new deck.DeckGL({\n container,\n map: mapboxgl,\n mapboxAccessToken: '',\n mapStyle: 'https://free.tilehosting.com/styles/positron/style.json?key=U0iNgiZKlYdwvgs9UPm1',\n latitude: 49.254,\n longitude: -123.13,\n zoom: 11,\n maxZoom: 16,\n pitch: 45\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"{\n const geojsonLayer = new deck.GeoJsonLayer({\n data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json',\n opacity: 0.8,\n stroked: false,\n filled: true,\n extruded: true,\n wireframe: true,\n fp64: true,\n lightSettings,\n \n getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10,\n getFillColor: f => colorScale(f.properties.growth),\n getLineColor: f => [255, 255, 255],\n \n pickable: true,\n onHover: onHover\n });\n \n deckgl.setProps({layers: [geojsonLayer]});\n \n return geojsonLayer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"onHover = {\n return function(info) {\n const {x, y, object} = info;\n if (object) {\n tooltip.style.top = `${y}px`;\n tooltip.style.left = `${x}px`;\n tooltip.innerHTML = `\n

Average Property Value

${object.properties.valuePerSqm} / m²

Growth

${Math.round(object.properties.growth * 100)}%

\n `;\n } else { \n tooltip.innerHTML = '';\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"deck = require('deck.gl@~5.3.0/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"html `\n\n(Stylesheets)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"