31:[] 2f:{"title":"clx. deck.gl GeoJsonLayer Example","cells":[{"id":222,"value":"md`# clx. deck.gl GeoJsonLayer Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# deck.gl GeoJsonLayer Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"tooltip = container.querySelector('#tooltip')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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\n });\n \n deckgl.setProps({layers: [geojsonLayer]});\n \n return geojsonLayer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":151,"value":"mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"deck = require('deck.gl@~5.3.0/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html `\n\n(Stylesheets)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}