Quickstart
Zero to a rendered map in under a minute. The clock starts at npm i and stops when the map paints.
1. Install
npm i @unmap/sdk
# or: pnpm add @unmap/sdk
maplibre-gl ships as a dependency, so there is nothing else to install for a basic map.
2. Add a container
Anywhere in your page, give the map a box with a height:
<div id="map" style="height: 400px"></div>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
In a bundler you can import 'maplibre-gl/dist/maplibre-gl.css' instead of the <link>.
3. Render
Three lines. This is the whole Hello World:
import { Unmap } from '@unmap/sdk'
const map = new Unmap({ key: 'um_live_...', container: '#map', center: [-114.07, 51.05] })
That paints a Calgary basemap. Swap center and style to move it:
new Unmap({
key: 'um_live_...',
container: '#map',
style: 'montreal', // 'calgary' | 'montreal' | 'iqaluit', or a style URL
center: [-73.5673, 45.5017],
zoom: 11,
})
That is the 60-second mark. Everything below is optional.
Add geocoding
.geocoder is always available, with or without a map:
const unmap = new Unmap({ key: 'um_live_...' })
// Full-text search
const results = await unmap.geocoder.search('Château Frontenac')
// Type-ahead (fires on each keystroke)
const hints = await unmap.geocoder.autocomplete('rue ste-c', { lang: 'fr', limit: 5 })
// Reverse geocode a coordinate
const here = await unmap.geocoder.reverse(-114.07, 51.05)
Each result carries name, layer, lng, lat, and an optional structured address.
Add routing
const unmap = new Unmap({ key: 'um_live_...' })
// A route between two [lng, lat] points
const route = await unmap.router.route([-114.07, 51.05], [-113.99, 51.05], { mode: 'auto' })
console.log(route.distanceMeters, route.durationSeconds)
// Reachability: how far in 10 and 20 minutes
const bands = await unmap.router.isochrone([-114.07, 51.05], { minutes: [10, 20] })
route() returns a GeoJSON LineString; isochrone() returns a GeoJSON FeatureCollection you can drop straight onto the map.
Using a demo key
Want to try before you get a key? The public demo key is rate-limited and safe to embed. Point it at the deployed gateway:
new Unmap({
key: 'um_test_793cf0c9cb8f4f5cf12bbdebdd96b59532b38876fbe5d14d',
gateway: 'https://unmap-gateway.mepa1363.workers.dev',
container: '#map',
style: 'iqaluit',
})