Styling
Styling in autk-map happens at two levels. First, MapStyle defines the semantic base colors used by the renderer for physical and generic layers. Second, per-layer render settings such as opacity, visibility, and thematic display are applied with updateRenderInfo() and updateColorMap().
In practice, that means you usually:
- choose or customize a base map style;
- load one or more layers;
- override the render state of individual layers when needed;
- optionally configure a color map for thematic rendering.
| Part | Description |
|---|---|
MapStyle | Per-map semantic color system (accessed via map.style) for surface, parks, water, roads, buildings, and generic vector types. |
updateRenderInfo() | Per-layer render state such as opacity, isSkip, isPick, and isColorMap. |
updateColorMap() | Palette and domain configuration used when thematic rendering is enabled. |
Base map styles
MapStyle controls the default semantic colors used by the renderer. Each AutkMap owns its own MapStyle instance, exposed through map.style, so multiple maps can use different visual treatments. Built-in presets provide quick visual baselines for the same data. The example below loads a basic lower-Manhattan OSM scene and applies the google preset through the map's style instance after initialization.
Built-in presets currently include:
defaultlightgoogleappleosm
For full control, use map.style.setCustomStyle() with a complete semantic color object. See MapStyle.
Opacity and layer render state
Per-layer styling is controlled with updateRenderInfo(). This is the main entry point when you want to emphasize one layer, mute another one, temporarily hide a layer, or toggle thematic display.
The example below uses the same OSM scene and lowers only the building opacity so the rest of the base map stays unchanged.
| Render flag | Description |
|---|---|
opacity | Layer opacity from 0 to 1. |
isSkip | Hides the full layer without removing it. |
isPick | Enables or disables picking for that layer. |
isColorMap | Turns thematic coloring on or off for the layer. |
Color-map configuration
Thematic rendering separates the data values from the palette. updateThematic() defines which property path supplies the values, while updateColorMap() defines how those values are mapped to color.
The example below follows the same neighborhood-based thematic setup used elsewhere in the docs, but focuses on the palette configuration itself.
Sequential palettes are typically used for one-directional numeric values such as counts, density, or intensity. Diverging palettes are better when the values should be read around a midpoint or contrasted across two directions.
For the full thematic workflow, continue to Thematic data.
Layer controls in the hamburger menu
The currently selected isPick layer and the thematic-data display can also be activated from the hamburger menu in the map UI.