autk-map

autk-map is a geospatial data renderer powered by WebGPU. It can handle GeoJSON, semantic OpenStreetMap layer types, and can display thematic values without a tile server.

Key capabilities:

• Render 2D and 3D geospatial layers directly from GeoJSON in the browser.
• Support OpenStreetMap layers such as surface, parks, water, roads, and buildings.
• Display thematic data using configurable color maps.
• Handle interactive exploration through picking, highlighting, and filtering features.
• Integrate directly with autk-db, autk-compute, and autk-plot.

Package installation

To install autk-map, you must install its NPM package.

npm install @urban-toolkit/autk-map

You can also install the full toolkit:

npm install @urban-toolkit/autk

Initialization

The entry point of autk-map is the AutkMap class. To create a map, you must pass to the constructor a HTML canvas as paramenter. After instantiating the map, you must await init(), load one or more layers, and finally call draw().

Coordinate system

autk-map expects data in projected coordinates. Any projected CRS may be used. For example, the default autk-db workspace uses EPSG:3395, also known as World Mercator.

WebGPU required

autk-map requires a browser with WebGPU support. We recommend using recent versions of Chrome, Edge, or Safari. See the browser support table in the Introduction.

Core concepts

Autark is built over some core concepts, that guides data data loading, rendering and interactions. Next you can find a brief description of each concept and a reference to their detailed description in this guide.

• Layer ids — each layer is identified by an unique string id. This id must be used when the user wants to update rendering properties such as the layer's thematic data, rendering state, etc. See Layers data for details.
• Layer types — each layer has a type that can be either a physical type or a generic type. Physical types such as surface, parks, water, roads, and buildings are used to build the map context, while generic types such as points, polylines, polygons, and raster support custom datasets. See Layers data.
• Render state — each layer has render state controlling properties such as opacity, visibility, picking, and whether thematic coloring is active. These properties can be updated dynamically without reloading the layer. See Styling.
• Thematic data — thematic data rendering maps numeric or categorical feature attributes to colors. In practice, you configure a color map, point to a property path, and enable thematic display for the layer. See Thematic data.
• Interactions — interactions let users explore layers through picking, highlighting, filtering, and visibility control without changing the underlying data. See Interactions.
• Terrain data — terrain mode replaces the flat ground plane with a heightfield built from an elevation raster, draping the loaded layers over real topography. See Terrain data.