Map and Database Integration

Source Code

import { SpatialDb } from 'autk-db';
import { AutkMap, ColorMapInterpolator, LayerType, MapStyle } from 'autk-map';

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

    // Initialize database
    const db = new SpatialDb();
    await db.init();

    // Load road data from GeoJSON into the database
    await db.loadCustomLayer({
        geojsonFileUrl: '/data/mnt_roads.geojson',
        outputTableName: 'roads',
        coordinateFormat: 'EPSG:3395',
    });

    // Initialize map with light style
    const map = new AutkMap(canvas);
    MapStyle.setPredefinedStyle('light');
    await map.init();

    // Add all layers from the database to the map
    for (const layer of db.getLayerTables()) {
        const geojson = await db.getLayer(layer.name);
        map.loadGeoJsonLayer(layer.name, geojson, layer.type as LayerType);
    }

    // Apply thematic coloring by road type
    const roadsGeojson = await db.getLayer('roads');
    map.updateRenderInfoProperty('roads', 'colorMapInterpolator', ColorMapInterpolator.OBSERVABLE10);
    map.updateGeoJsonLayerThematic('roads', roadsGeojson, (feature) => {
        const highway = feature.properties?.highway;
        return ['primary', 'secondary'].includes(highway) ? highway : 'other';
    });

    map.draw();
}

main();