autk-map

Standalone GeoJSON

This example demonstrates the simplest possible Autark workflow for loading and rendering a projected GeoJSON dataset directly in the browser.

Live Example

Objective

This example shows how to:

• create and initialize an AutkMap;
• load a projected GeoJSON dataset with fetch;
• add the dataset directly as a map layer;
• render the result immediately in the canvas.

It serves as the most basic standalone map example before introducing multiple datasets, joins, or linked analytical views.

Source Code

import { AutkMap } from 'autk-map';

async function main() {
    const canvas = document.querySelector('canvas')!;

    const map = new AutkMap(canvas);
    await map.init();

    const geojson = await fetch('/data/mnt_neighs_proj.geojson').then(r => r.json());

    map.loadGeoJsonLayer('neighborhoods', geojson);
    map.draw();
}

main();

Full Code

You can access the complete source file here:

• View full code