31:[] 2f:{"title":"Client-Side Geospatial Functions","cells":[{"id":0,"value":"md`\n\n# Client-Side Geospatial Functions\n\nThis example illustrates using the [Turf.js](https://turfjs.org) geospatial library to perform client-side geospatial operations.\n\nAir quality point data is loaded as a GeoJSON feature collection using A Flo.w RDF reactive query. The query results are transformed form points to polygons using the Turf.buffer() function. The polygons are displayed using a 3D extruded fill layer.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"map1 = html`\n\n\n\n \n \n \n\n \n \n fill-extrusion-color: @no2 ? from-palette('OrRd', @no2, 0, 100) : gray;\n fill-extrusion-height: @no2 * 20;\n \n\n \n

\n \n \n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"// Set map pitch\ncontext.maps.getMap('map1').then(map => map.mapboxMap.setPitch(60))","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"// Use Turf.buffer to calculate polygons from points\ncontext.state.compute('polygons', state =>\n turf.buffer(state.queries.airquality.results, 300, { units: 'metres' })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"// Register query to retrieve airquality point data\ncontext.state.registerQuery('queries.airquality', state => ({\n datasetId: 'airquality',\n format: 'geojson'\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Appendix `","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"apiKey = 'b6b77cc4-904a-46d1-aa0f-3bf3848ce4c7'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {\n initializeFlow,\n datasetTable,\n tileSourceTable,\n datasetSource,\n datasetAttributes\n} from '@emuanalytics/flow-helper-library'","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"context = {\n const context = await initializeFlow(apiKey, '1.1.7');\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}