Last active
March 18, 2021 04:31
-
-
Save danwild/a8afcd7f7784bf3f591ab70a9c698dbd to your computer and use it in GitHub Desktop.
Demo of deck.gl rendering
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <title>DeckGL GeoJSON</title> | |
| <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script> | |
| <!-- optional if mapbox base map is needed --> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' /> | |
| <!-- optional for color scale --> | |
| <script src="https://unpkg.com/[email protected]/chroma.js"></script> | |
| <style> | |
| body { | |
| width: 100vw; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| .deck-tooltip { | |
| font-family: Helvetica, Arial, sans-serif; | |
| font-size: 16px; | |
| position: absolute; | |
| padding: 6px; | |
| margin: 8px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: #fff; | |
| max-width: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| const { DeckGL, GeoJsonLayer } = deck; | |
| // YOUR VARS | |
| const data = '<path to geojson>'; | |
| // optional - color scale | |
| const key = 'foo'; // property to use for color scale | |
| const domain = [0, 100]; | |
| const scale = chroma.scale('viridis').domain(domain); | |
| // define our geojson layer | |
| // https://deck.gl/docs/api-reference/layers/geojson-layer | |
| const geojsonLayer = new GeoJsonLayer({ | |
| id: 'my_layer', | |
| data, | |
| opacity: 0.9, | |
| stroked: false, | |
| filled: true, | |
| extruded: false, | |
| wireframe: false, | |
| fp64: true, | |
| getFillColor: f => colorScale(f.properties[key]), | |
| getLineColor: f => [255, 255, 255], | |
| pickable: true | |
| }); | |
| // define our deck, using our geojson layer | |
| // https://deck.gl/docs/api-reference/core/deck | |
| new DeckGL({ | |
| mapStyle: 'https://deck.gl/mapstyle/deck-dark.json', | |
| initialViewState: { | |
| latitude: -28, | |
| longitude: 142, | |
| zoom: 4, | |
| maxZoom: 16, | |
| pitch: 0 | |
| }, | |
| controller: true, | |
| layers: [geojsonLayer], | |
| getTooltip | |
| }); | |
| /* ---------------- OPTIONAL STUFF ---------------- */ | |
| /** | |
| * Get rgb value from cell value. | |
| */ | |
| function colorScale(x) { | |
| const color = scale(x).rgba(); | |
| color.pop(); | |
| return color; | |
| } | |
| /** | |
| * Custom tooltip. | |
| */ | |
| function getTooltip({object}) { | |
| return object && `${key}: ${object.properties[key]}`; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment