29:null 2a:["$","title",null,{"children":"04. Geographical Data Visualization | autarkjs | Observable"}] 2f:T4fe,

Checking for WebGPU support

navigator is the browser's built-in object describing the browser itself and what it can do: navigator.language, navigator.geolocation, navigator.userAgent, and so on. The WebGPU API hangs off it as navigator.gpu. When that property is missing, the browser does not implement WebGPU at all, and there is nothing autk-map can do about it. navigator.gpu.requestAdapter() asks the browser for an adapter: a handle to one physical GPU (or a software fallback) as the operating system exposes it. The call is asynchronous, which is why it is awaited, and it can resolve to null even when the API exists, typically because hardware acceleration is turned off or no compatible GPU was found. The adapter is not yet something you draw with; the next step, adapter.requestDevice(), returns a device, the object that allocates buffers, compiles shaders and submits work. autk-map does that step for you inside map.init(). So the cell checks the only two things that can fail before the library is even loaded: the API is there, and it can reach a GPU.

30:T803,

2. Layers

A layer is a GeoJSON collection plus a type that tells the renderer how to draw it.

map.loadCollection(layerId, { collection, type, property, loadConfig })

layerId is a unique string. Every later update (style, thematic data, picking, removal) addresses the layer by this id.
collection is the FeatureCollection.
type is optional for plain vector data and is inferred from the geometry. Physical types are never inferred; you ask for them.
property is required for rasters and optional otherwise (Section 5).
loadConfig holds geometry options that are applied while the mesh is built: polylinesWidth and buildingsZeroHeight.

Type	Geometry	Notes
`surface`, `parks`, `water`	polygons	physical layers that build the base map
`roads`	lines	physical; width follows the OSM `highway` tag
`buildings`	polygons	physical; extruded in 3D
`points`, `polylines`, `polygons`	matching geometry	generic layers for your own data; inferred when `type` is omitted
`raster`	grid	needs `property` (Section 8)

Stacking. Physical layers always stack in the order surface, parks, water, roads, buildings, no matter when you load them. Generic layers go on top of the physical ones, in the order you loaded them. Framing. The first layer you load defines the origin and the initial camera framing, so load the layer that covers your study area first.

31:T42d,

3. Connecting OSM Layers

Autark also supports OSM querying natively. Given the name of a place, it fetches the OpenStreetMap data for it and builds the base layers of a city map as defined by the user (ground, parks, water, streets, buildings).

Under the hood, Autark queries the Overpass API to fetch the raw OpenStreetMap data and converts it into its feature-centric model: every building, street or park becomes a feature in a FeatureCollection, exactly like the ones we loaded from files. That is what makes the two sources interchangeable. The map does not care whether a collection was queried from OSM or read from a separate file, as demonstrated up to this point; both are loaded with the same loadCollection() call.

The Overpass API needs no preparation but is shared with everyone and rejects queries when busy. The alternative is a .osm.pbf extract, read entirely in the browser with no limits. We use the extract; the cells below show both.

32:T4e1,rasterMap = { const db = new AutkDb(); await db.init(); const mntNeighsURL = await FileAttachment("mnt_neighs.geojson").url(); const noiseCSVURL = await FileAttachment("mnt_noise.csv").url(); const noiseGeoJSON = await FileAttachment("noise.geojson").url(); await db.loadGeojson({ geojsonFileUrl: mntNeighsURL, outputTableName: "neighborhood" }); await db.loadCsv({ csvFileUrl: noiseCSVURL, outputTableName: "noise", geometryColumns: true }); await db.buildHeatmap({ tableJoinName: "noise", outputTableName: "heatmap", near: { distance: 700 }, grid: { rows: 100, columns: 15 }, groupBy: [{ column: "*", aggregateFn: "count" }] }); const map = new AutkMap(rasterMapCanvas.querySelector("canvas")); await map.init(); for (const layer of db.getTablesMetadata()) { const { name, type } = layer; const collection = await db.getLayer(name); const params = type === "raster" ? { collection, type, property: "band_1" } : { collection, type }; map.loadCollection(name, params); } map.updateColorMap('heatmap', { colorMap: { domainSpec: { type: ColorMapDomainStrategy.PERCENTILE, params: [5, 99] }, }, }); map.draw(); }33:T566,spatialJoinMap = { const db = new AutkDb(); await db.init(); const loweManhattanPBFURL = await loweManhattanPBF.url(); const noiseCSVURL = await FileAttachment('mnt_noise.csv').url(); await db.loadOsm({ pbfFileUrl: loweManhattanPBFURL, queryArea: { geocodeArea: "New York", areas: ["Battery Park City", "Financial District"] }, autoLoadLayers: { layers: ["surface", "parks", "water", "roads", "buildings"] } }); await db.loadCsv({ csvFileUrl: noiseCSVURL, outputTableName: "noise", geometryColumns: true }); await db.spatialQuery({ tableRootName: "table_osm_buildings", tableJoinName: "noise", near: { distance: 1000 }, groupBy: [{ column: "key", aggregateFn: "count" }] }); await db.removeLayer("noise"); const canvas = spatialJoinMapCanvas.querySelector('canvas'); const map = new AutkMap(canvas); await map.init(); for (const layer of db.getLayersMetadata()) { const {name, type} = layer; const collection = await db.getLayer(name); map.loadCollection(name, {collection, type }); } const buildings = await db.getLayer("table_osm_buildings"); map.updateThematic("table_osm_buildings", { collection: buildings, property: "properties.sjoin.count.noise" }); map.updateRenderInfo("table_osm_buildings", { isColorMap: true }); map.draw(); }34:[{"id":"04f4d00fd3b52cbe6a610cc8090e3baf830cb51c6dabb542c5cae1265fe4b515fcaecd0bb63a0c8a6bb95aabbe259a52e520285f96f6b7ccfad0edf293a86ba6","href":"https://static.observableusercontent.com/files/04f4d00fd3b52cbe6a610cc8090e3baf830cb51c6dabb542c5cae1265fe4b515fcaecd0bb63a0c8a6bb95aabbe259a52e520285f96f6b7ccfad0edf293a86ba6","name":"mnt_neighs_proj.geojson","type":"application/geo+json","lastModified":1790185324391,"size":389338},{"id":"a3d6a7a884ce298477bb656d48ad87631719cab9b3ed5c6a5bae43121aeefe4bb03f458d3f23f96a424010476d9779cc45ce1a671d6fbb7b227c8100b885953a","href":"https://static.observableusercontent.com/files/a3d6a7a884ce298477bb656d48ad87631719cab9b3ed5c6a5bae43121aeefe4bb03f458d3f23f96a424010476d9779cc45ce1a671d6fbb7b227c8100b885953a","name":"mnt_noise_proj.geojson","type":"application/geo+json","lastModified":1790189065706,"size":295838},{"id":"a00e6614c930b3b1f8b0f137bc2ec6cfff76198bebaeae8d8bee6866f63be377e5c89de6cbf1a8c989a15ff3c7d2f6a0c4fc2bf8091edd3dbeec04eda0d37167","href":"https://static.observableusercontent.com/files/a00e6614c930b3b1f8b0f137bc2ec6cfff76198bebaeae8d8bee6866f63be377e5c89de6cbf1a8c989a15ff3c7d2f6a0c4fc2bf8091edd3dbeec04eda0d37167","name":"mnt_roads.geojson","type":"application/geo+json","lastModified":1790190194033,"size":5238710},{"id":"d4ca0843f454872bcceef0a3c86bea032112e55141b255f39138d12d6601228d5c50f272d7b532942628b612bcec6e10783beb1eb2c5836a7d8681896de2e5ba","href":"https://static.observableusercontent.com/files/d4ca0843f454872bcceef0a3c86bea032112e55141b255f39138d12d6601228d5c50f272d7b532942628b612bcec6e10783beb1eb2c5836a7d8681896de2e5ba","name":"lower_mnt.osm.pbf","type":"application/octet-stream","lastModified":1790195217624,"size":6329026},{"id":"397d993dad34d8f3bb5a01df3ab9a8eef2097d5e5bcecc9bd6061cba10c8388efaed5aaf65a24a51019a53049e51ec6eb354254ab4a00fab6e1401727ca01c80","href":"https://static.observableusercontent.com/files/397d993dad34d8f3bb5a01df3ab9a8eef2097d5e5bcecc9bd6061cba10c8388efaed5aaf65a24a51019a53049e51ec6eb354254ab4a00fab6e1401727ca01c80","name":"mnt_roads_categorized_proj.geojson","type":"application/geo+json","lastModified":1790196207397,"size":6083570},{"id":"1f29aba820b148867c6287111ca0bf3f4bdde12b1c7ed311e1ba1f8ffc8028f50a717d3597fcf190ce877eda55f3564b3c2ae7eebab7a4cc09ac7cfa546b3afa","href":"https://static.observableusercontent.com/files/1f29aba820b148867c6287111ca0bf3f4bdde12b1c7ed311e1ba1f8ffc8028f50a717d3597fcf190ce877eda55f3564b3c2ae7eebab7a4cc09ac7cfa546b3afa","name":"mnt_neighs.geojson","type":"application/geo+json","lastModified":1790273174818,"size":1534111},{"id":"4a2f8a90ecf560cf21ab180de7fdc68a6dababc7568ba42dbeabd1d3b77f8903b85703874d4e237b3a9f4a107b06bf58cf60475b429dcb5968c068d60c4f604e","href":"https://static.observableusercontent.com/files/4a2f8a90ecf560cf21ab180de7fdc68a6dababc7568ba42dbeabd1d3b77f8903b85703874d4e237b3a9f4a107b06bf58cf60475b429dcb5968c068d60c4f604e","name":"noise.geojson","type":"application/geo+json","lastModified":1790273467190,"size":1858521},{"id":"f164fdaa29fc60605cc11d36a4fd49dac59ec86082a8bded5a715fbf8b5e2fe4f26d9761afbadfb54b8319f82c339518fbb3d2ee6c447b86f4322adf5dae2eeb","href":"https://static.observableusercontent.com/files/f164fdaa29fc60605cc11d36a4fd49dac59ec86082a8bded5a715fbf8b5e2fe4f26d9761afbadfb54b8319f82c339518fbb3d2ee6c447b86f4322adf5dae2eeb","name":"mnt_noise.csv","type":"text/csv","lastModified":1790274310502,"size":150623}] 2d:{"id":"f853b4281f0439bd","slug":"04-geographical-data-visualization","title":"04. Geographical Data Visualization","thumbnail":"d7b71084b0c008c5ed8d0f24dd34e73208e4483dcd5f5edf24ecdcd9290bf2a0","access_level":"public","create_time":"$D2026-09-22T14:06:04.932Z","update_time":"$D2026-09-24T21:32:51.628Z","view_time":null,"first_public_time":"$D2026-09-26T13:36:26.541Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"da0708b4e2e72fbf","login":"autarkjs","name":"autarkjs","avatar_url":"https://avatars-next.observableusercontent.com/3e39bfb8c362b4cd667de182cfadb92766615a4805b8e6bf35cf1aca1f963943","tier":"pro_2024"},"version":1659,"publish_version":1659,"role":null,"authored":false,"authors":[{"type":"individual","id":"156ac92bacf96157","login":"jlrulff","name":"João Rulff","avatar_url":"https://avatars-next.observableusercontent.com/61e7386e80ca9c8fb33f146e596f13dd102aa53e27e69ad57c759d63f733195a","tier":null}],"members":[{"type":"team","id":"da0708b4e2e72fbf","login":"autarkjs","name":"autarkjs","avatar_url":"https://avatars-next.observableusercontent.com/3e39bfb8c362b4cd667de182cfadb92766615a4805b8e6bf35cf1aca1f963943","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"993a74142b1b1344","slug":"urban-computing-with-autark","title":"Urban Analytics with Autark","owner":{"id":"da0708b4e2e72fbf","login":"autarkjs","name":"autarkjs"}},"type":"notebook","body":{"title":"04. Geographical Data Visualization","cells":[{"id":289,"value":"

04. Geographical Data Visualization

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"## About\n\n

\n This notebook was produced for the Urban Data Analytics with Autark tutorial, presented at SIBGRAPI 2026 by:\n

\n\n- João Lucas Rulff da Costa (FGV, [jlrulff@gmail.com](mailto:jlrulff@gmail.com))\n- Lucas Alexandre (UFF, [lucasalexandre@id.uff.br](mailto:lucasalexandre@id.uff.br))\n- Talisson Souza (UFF, [talissonsouza@id.uff.br](mailto:talissonsouza@id.uff.br))\n- Gustavo Moreira (UIC, [gmorei3@uic.edu](mailto:gmorei3@uic.edu))\n- Daniel Oliveira (UFF, [danielcmo@ic.uff.br](mailto:danielcmo@ic.uff.br))\n- Harish Doraiswamy (MSR, [harish.doraiswamy@microsoft.com](mailto:harish.doraiswamy@microsoft.com))\n- Fabio Miranda (UIC, [fabiom@uic.edu](mailto:fabiom@uic.edu))\n- Claudio Silva (NYU, [csilva@nyu.edu](mailto:csilva@nyu.edu))\n- Marcos Lage (UFF, [mlage@ic.uff.br](mailto:mlage@ic.uff.br))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"

\n\nautk-map is the rendering module of Autark. It draws 2D and 3D urban layers with WebGPU directly from GeoJSON, with no tile server and no backend. In this hour we go from an empty canvas to an interactive 3D map, and along the way we cover everything the module offers: layers, styling, thematic data, picking, filtering, and camera animation.\n\n

\n\nThe notebook is self-contained. When you later combine it with autk-db, autk-compute and autk-plot, every call you learn here stays the same; only the origin of the GeoJSON changes.\n\n

\n\nYou need a browser with WebGPU: a recent Chrome, Edge or Safari. The next cell checks it.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"## Table of contents\n\n\n\n

Introduction\n
1. WebGPU Check
2. Data Loading
\n
Lifecycle of a map
Layers
Connecting OSM Layers
Creating Raster Layers
Binding Thematic Data
Map Interactions
Styling

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"webgpuCheck = {\n if (!navigator.gpu) return md`**WebGPU is not available in this browser.** Switch to a recent Chrome, Edge or Safari.`;\n\n const adapter = await navigator.gpu.requestAdapter();\n\n return adapter\n ? md`WebGPU is available. You are good to go.`\n : md`**The browser exposes WebGPU but returned no adapter.** Check that hardware acceleration is enabled.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"

\nAll files are attached locally to this notebook. We use FileAttachment to read them.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"neighborhoods = FileAttachment(\"mnt_neighs_proj.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"noiseData = FileAttachment(\"mnt_noise_proj.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"roadsData = FileAttachment(\"mnt_roads_categorized_proj.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"loweManhattanPBF = FileAttachment(\"lower_mnt.osm.pbf\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"

\n\n

1. The lifecycle of a map

\n\nEvery autk-map program has the same five steps.\n\n

Put a <canvas> on the page.
new AutkMap(canvas) creates the map controller: renderer, camera, layer manager, events, and a small built-in UI.
await map.init() acquires the WebGPU device and sizes everything to the canvas.
map.loadCollection(id, { collection }) turns a GeoJSON FeatureCollection into a GPU layer. Call it once per layer.
map.draw() starts the render loop.

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"firstMapCanvas = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"firstMap = {\n\n const map = new AutkMap(firstMapCanvas.querySelector(\"canvas\"));\n await map.init();\n\n map.loadCollection(\"neighborhoods\", { collection: neighborhoods });\n\n map.draw();\n\n return map;\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"

\n\n \n \n \n \n \n \n \n \n \n \n

Input	Effect
Drag	Pan
Shift + drag	Rotate and tilt
Mouse wheel or pinch	Zoom around the pointer
Double-click	Pick a feature, once picking is enabled on a layer (Section 6)
`s`	Cycle through the built-in base styles
`r`	Reset the camera

\n\n The button in the top-left corner opens the built-in layer menu. Each layer has three toggles: visibility, thematic colouring, and picking. Everything the menu does is also available from code, which is what the rest of the notebook is about.\n\n Because the map object is the value of its cell, any later cell can reach it by name and call methods on it. That is what the whole notebook does from here on.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"firstMap.layerManager.layers.map((layer) => ({\n id: layer.layerInfo.id,\n type: layer.layerInfo.typeLayer,\n zIndex: layer.layerInfo.zIndex,\n opacity: layer.layerRenderInfo.opacity\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"$30","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"layersMapCanvas = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"layeredMap = {\n\n const map = new AutkMap(layersMapCanvas.querySelector(\"canvas\"));\n await map.init();\n\n map.loadCollection(\"neighborhoods\", { collection: neighborhoods });\n map.loadCollection(\"roads\", { collection: roadsData })\n map.loadCollection(\"noise\", { collection: noiseData });\n\n\n map.draw();\n\n return map;\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"OSMMapCanvas = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"OSMLayeredMap = {\n\n const db = new AutkDb();\n await db.init();\n\n // loading PBF URL\n const pbfFileUrl = await loweManhattanPBF.url();\n\n await db.loadOsm({\n pbfFileUrl,\n queryArea: {\n geocodeArea: \"New York\",\n areas: [\"Financial District\"]\n },\n autoLoadLayers: {\n layers: [\"surface\", \"parks\", \"water\", \"roads\", \"buildings\"]\n }\n })\n\n const map = new AutkMap(OSMMapCanvas.querySelector(\"canvas\"));\n await map.init();\n\n for (const layer of db.getLayersMetadata()) {\n const { name, type } = layer;\n const collection = await db.getLayer(name);\n map.loadCollection(name, { collection, type });\n }\n\n map.draw();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"

4. Raster Layers

\n\n

\n\nRaster layers represent gridded data such as temperature, density, or any other cell-based surface. In practice, autk-map renders a raster layer from a FeatureCollection whose cell values are stored in feature properties, together with a property path telling the renderer which band or attribute to read.\n\n

\n\nRaster layers need a property path that tells the renderer which numeric value to use in each cell. The example below builds a heatmap raster from Manhattan noise events with autk-db and renders the result in autk-map. GeoTIFF files can also be loaded with autk-db. For now, autk-map renders raster collections returned by autk-db, including heatmaps created with buildHeatmap().\n\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"rasterMapCanvas = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"

5. Thematic Data

\n\n

\n\nThematic data rendering maps a feature attribute to color. The attribute does not have to live on the feature itself: autk-map treats any value reachable through a property path on the FeatureCollection as thematic input. That value can be an intrinsic attribute of the geometry, but it can also be urban data that has been projected onto the feature.\n\n

\n\nThe usual thematic data binding workflow in autk-map is:\n\n

Load the layer with loadCollection()
Configure the color map with updateColorMap()
Point to the source property with updateThematic()
Enable thematic displray with isColorMap in updateRenderInfo()

\n\n\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"

Categorical Attributes

\n\n

\n\nCategorical palettes assign one color per class. Use them for class labels such as road types. In practice, it helps to first fold the raw values into a small, ordered set of groups so the palette domain stays stable.\n\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"thematicDataMapCanvas = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"thematicDataMap = {\n\n const canvas = thematicDataMapCanvas.querySelector('canvas');\n\n const map = new AutkMap(canvas);\n await map.init();\n\n const collection = await FileAttachment('mnt_roads_categorized_proj.geojson').json();\n map.loadCollection('roads', { collection });\n\n map.updateColorMap(\"roads\", {\n colorMap: {\n interpolator: ColorMapInterpolator.CAT_OBSERVABLE10,\n domainSpec: {\n type: ColorMapDomainStrategy.USER,\n params: [\"primary\", \"secondary\", \"other\"]\n }\n }\n });\n\n map.updateThematic(\"roads\", {\n collection,\n property: \"properties.compute.highwayGroup\"\n });\n map.updateRenderInfo(\"roads\", { isColorMap: true });\n\n map.draw();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"

Diverging attributes

\n\n

\n\nDiverging palettes suit signed or centered quantities, or any attribute where a meaningful midpoint separates two regimes. The PERCENTILE domain trims outliers so most of the distribution maps to a clear range of colors.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"divergingDataMapCanvas = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"divergingMap = {\n\n const canvas = divergingDataMapCanvas.querySelector('canvas');\n\n const map = new AutkMap(canvas);\n await map.init();\n\n const collection = await FileAttachment('mnt_neighs_proj.geojson').json();\n map.loadCollection('neighborhoods', { collection });\n\n map.updateColorMap(\"neighborhoods\", {\n colorMap: {\n interpolator: ColorMapInterpolator.DIV_RED_BLUE,\n domainSpec: { type: ColorMapDomainStrategy.PERCENTILE }\n }\n });\n\n map.updateThematic(\"neighborhoods\", {\n collection,\n property: \"properties.shape_area\"\n });\n map.updateRenderInfo(\"neighborhoods\", { isColorMap: true });\n\n map.draw();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"

Spatial Joins

\n\n

\n\nSpatial joins attach an aggregate from a second table to each feature of a base layer. A common use is counting point events (for example, noise complaints) inside a buffer around each polygon or line.\n\n

\n\nThe example below joins the Manhattan noise event table to OSM buildings in the Battery Park City / Financial District area, counting events within 1000 m of each building. The result is stored as a new property path properties.sjoin.count.noise that autk-map can read directly.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"spatialJoinMapCanvas = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"

Interactions

\n\nautk-map exposes three complementary interaction mechanisms. They share the same render-info flags and the same event bus, so they can be combined in any order:\n\nPicking — pointer-driven selection that emits events through map.events.on().\nProgrammatic highlight and skip — direct control over which components stand out or are hidden, useful for cross-view coordination.\nLayer visibility — show, hide, or fully remove an entire layer.\nAll examples below use projected Mercator data already prepared for the docs site, so each section focuses on a single interaction concern.\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"autk = await import(\"https://esm.sh/@urban-toolkit/autk@?bundle\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"AutkMap = autk.map.AutkMap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"AutkDb = autk.db.AutkDb","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"ColorMapDomainStrategy = autk.core.ColorMapDomainStrategy","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"ColorMapInterpolator = autk.core.ColorMapInterpolator","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2","titling":"auto"}} 2e:"$2d:body"