Project autk-mapCopy item path

Expand description

Autark: A portable UTK-based visualization framework

Autark is implemented in TypeScript for lightweight client-side execution with built-in access to OpenStreetMap geometry data for exploring spatial features directly in the browser. It consists of the following sub-projects:

• autk-db: A spatial database that handles physical and thematic urban datasets.
• autk-map: A 3D map visualization library.
• autk-plot: A D3.js/Vega-lite wrapper to build abstract visualizations.

The example/ directory is included with example codes that can be used for testing or demonstration purposes.

Requirements

You’ll need Node.js installed to build and run this project. You can install it via Conda Forge (Windows), Homebrew (macOS), apt-get (Debian/Ubuntu) or the official site.

To install Node.js:

# Windows
conda install -c conda-forge nodejs

# macOS
brew install node

# Debian/Ubuntu
sudo apt-get install nodejs
Copy

Installing, Running, and Building with Make

Installation

Install Make (for running predefined build and dev commands):

# Windows
conda install anaconda::make

# macOS
xcode-select --install

# Debian/Ubuntu
sudo apt-get install build-essential
Copy

Building and Running

To install required packages:

make install
Copy

To run the development server:

make dev
Copy

To clean build artifacts:

make clean
Copy

Publishing packages

Autark is available through npm packages. Publishing recently-made changes to npm can be done running the commands below.

First, ensure you are logged into your npm account:

npm login 
Copy

then, publish the desired module:

make publish LIB=autk-module 
Copy

autk-module can assume three values: autk-map, autk-db, autk-plot.

---

Interaction Controls

You can explore and modify the map using both keyboard and mouse:

Keyboard Shortcuts

Key	Action
s	Cycle through map styles (default, light, dark)

Mouse Actions

Action	Effect
Double Click	Select object in the currently active layer (if selectable)

---

Notes

• WebGPU is required to run this project. In Chrome or Edge (v113+), it's enabled by default. In Firefox, WebGPU is only available in Nightly builds and must be explicitly enabled::

  1. Download and install Firefox Nightly.
  2. Visit about:config.
  3. Set dom.webgpu.enabled to true.
  4. (Optional) You may also need to enable gfx.webgpu.enabled and gfx.webgpu.force-enabled.
  5. Restart Firefox.

Type Aliases§

"#FF5733"
Copy

{ r: 255, g: 87, b: 51, opacity: 1 }
Copy

[255, 87, 51, 1, 236, 12, 34, 0.8, ...]
Copy

Enumerations§

ColorMapInterpolator

Color map interpolators for thematic data visualization.

LayerType

The types of layer supported in autk-map.

MapEvent

Map events for interaction.

MouseStatus

Mouse status for interaction state.

ThematicAggregationLevel

Thematic aggregation levels for thematic data.

Classes§

AutkMap

The main autark map class.

AutkMapUi

Map UI class for managing the user interface elements of the map.

Camera

Camera class for managing the view parameters and transformations in a 3D space. It provides methods to manipulate the camera position, orientation, and projection.

ColorMap

ColorMap class provides methods to handle color mapping and interpolation. It allows retrieval of colors based on values and color map interpolators, as well as conversion between RGB and HEX color formats.

KeyEvents

KeyEvents class handles keyboard interactions with the map. It allows toggling layer properties and changing map styles using keyboard shortcuts.

Layer

Base class for map layers. This class provides the basic structure and functionality for all map layers.

LayerBbox

LayerManager

Manages the layers of the map.

MapEvents

Class to handle map events. It allows adding, removing, and emitting events for map interactions.

MapStyle

MouseEvents

MouseEvents class handles mouse interactions with the map. It allows for panning, zooming, and picking features on the map.

Pipeline

Abstract class representing a rendering pipeline. It provides methods for creating camera and color uniform bind groups, updating camera and color uniforms, and defining the structure for building and rendering the pipeline.

PipelineBuildingSSAO

PipelineBuildingSSAO is a rendering pipeline for drawing 3D buildings with SSAO (Screen Space Ambient Occlusion). It uses WebGPU to render the buildings in two passes: one for normal and color maps, and another for SSAO computation.

PipelineTriangleBorder

PipelineBorderFlat is a rendering pipeline for drawing flat borders of triangles in 2D space. It uses WebGPU to render lines based on the provided border data.

PipelineTriangleFlat

PipelineTriangleFlat is a rendering pipeline for drawing flat triangles in 2D space. It uses WebGPU to render triangles based on the provided mesh data.

PipelineTrianglePicking

PipelineTrianglePicking is a rendering pipeline for picking triangles in 2D space. It uses WebGPU to render triangles and allows for picking by encoding object IDs in vertex colors.

PipelineTriangleRaster

PipelineTriangleRaster is a rendering pipeline for drawing rasterized triangles. It uses WebGPU to render triangles based on the provided mesh data.

RasterLayer

Base class for map layers. This class provides the basic structure and functionality for all map layers.

Renderer

Triangles2DLayer

Triangles2DBorder class extends Triangles2DLayer to handle rendering of borders in 2D triangles layers. It manages the border positions and indices, and creates a specific rendering pipeline for borders.

Triangles3DLayer

Triangles3DLayer class extends Triangles2DLayer to handle rendering of 3D triangles layers. It manages the normals and creates a specific rendering pipeline for 3D triangles.

TriangulatorBuildings

Class for triangulating buildings from GeoJSON features. It provides methods to convert different geometry types into building meshes.

TriangulatorPoints

Class for triangulating points from GeoJSON features. It provides methods to convert different geometry types into point meshes.

TriangulatorPolygons

Class for triangulating polygons from GeoJSON features. It provides methods to convert different geometry types into polygon meshes.

TriangulatorPolylines

Class for triangulating polylines from GeoJSON features. It provides methods to convert different geometry types into polyline meshes.

TriangulatorRaster

Class for triangulating polylines from GeoJSON features. It provides methods to convert different geometry types into polyline meshes.

VectorLayer

Vector layer class extends Layer to handle vector data. It manages the positions, thematic data, indices, and components of the layer, as well as the rendering pipelines.

Interfaces§

ICameraData

Interface for camera data.

ILayerBorder

Interface for layer border information.

ILayerBorderComponent

Interface for layer border components.

ILayerComponent

Interface for layer components.

ILayerData

Interface for layer border information.

ILayerGeometry

Interface for layer geometry information.

ILayerInfo

Interface for layer information.

ILayerRenderInfo

Interface for layer render information.

ILayerThematic

Interface for layer thematic data.

IMapStyle

Interface for map styles.

IRasterData

Interface for raster data.