Airfree
Back to Developers

APIs

Maps Embed SDK

1 min read

Drop an interactive Airfree map into any web application with a few lines of JavaScript — custom styles, layers, and event hooks included.

The Maps Embed SDK renders an interactive Airfree map in the browser using the platform’s own vector tiles and styles. It draws exclusively from Airfree map graphs served same-origin — there is no third-party tile, font, or glyph dependency.

Install

npm install @airfree/maps-sdk

Create a map

Initialise the map against a container element. The SDK resolves tiles, fonts, and styles from the current origin, so the same code works on the public platform and inside an air-gapped deployment.

import { AirfreeMap } from '@airfree/maps-sdk';

const map = new AirfreeMap({
  container: 'map',
  style: 'airfree',      // the internal light style
  center: [138.6007, -34.9285], // Adelaide
  zoom: 12,
});

map.on('load', () => {
  map.addLayer({
    id: 'cadastre',
    type: 'fill',
    source: 'airfree',
    'source-layer': 'parcels',
    paint: { 'fill-color': '#1847D1', 'fill-opacity': 0.25 },
  });
});

Events and interaction

The SDK exposes the familiar map lifecycle and interaction events, so you can react to clicks, feature hover, and view changes to build search, inspection, and editing experiences on top of the base map.

  • map.on('click', layerId, handler) — feature selection.
  • map.on('moveend', handler) — lazy-load data for the current view.
  • map.setFilter / map.setPaintProperty — data-driven styling at runtime.