Web SDK

npm install @atasu/maps-gl

import { AtasuMap } from '@atasu/maps-gl';
import '@atasu/maps-gl/maplibre-gl.css';

const map = await AtasuMap.create({
  container: 'map',                    // element or its id
  apiKey: 'YOUR_WEB_KEY',
  language: 'ru',                      // 'kk' (default) | 'ru' | 'en'
  theme: 'auto',                       // 'day' | 'night' | 'auto' (follows the system)
  center: [76.95692, 43.24313],
  zoom: 15,
  customAttribution: '© My Company',   // added next to the required attribution, never instead of it
  onError: (err) => console.error('map session stopped', err), // e.g. the key was revoked
});
await map.ready(); // first style and tiles loaded

map.setLanguage('en'); // labels switch at once, the style is not reloaded
map.setTheme('night');
console.log(map.language, map.theme);

const { items } = await map.search.autocomplete('Абай', { limit: 5 });
for (const s of items) console.log(s.label, s.secondary ?? '', s.id);

const free = await map.search.search('Минина 24');
const structured = await map.search.search({ city: 'Алматы', street: 'Минина', house: '24' });
console.log(free.items[0]?.name, structured.items[0]?.precision);

const { result, nearest_entrance } = await map.search.reverse([76.95692, 43.24313]);
console.log(result?.name, nearest_entrance?.ref);

const { items } = await map.search.search('Минина 24');
const place = await map.search.place(items[0].id);
for (const e of place.entrances) console.log(e.ref, e.flats ?? '', e.entrance_type ?? '', e.lnglat);

const { items } = await map.search.search('Минина 24');
const place = await map.search.place(items[0].id);
const entrance = place.entrances[0];
const route = await map.routing.route({
  from: [76.95692, 43.24313],
  to: entrance ? { entrance_id: entrance.id } : { place_id: place.id },
  costing: 'pedestrian',             // 'auto' (default) | 'taxi' | 'pedestrian'
  alternatives: 1,
});
map.routes.draw(route);              // the style's route layers; alternatives are dimmed
console.log(route.waypoints?.at(-1)?.resolved_to); // 'entrance'

const ml = map.maplibre;
ml.addSource('my-points', {
  type: 'geojson',
  data: { type: 'FeatureCollection', features: [{ type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [76.95692, 43.24313] } }] },
});
const firstLabel = ml.getStyle().layers.find((l) => l.id.startsWith('label-'))?.id;
ml.addLayer({ id: 'my-points', type: 'circle', source: 'my-points', paint: { 'circle-radius': 8, 'circle-color': '#e11d48' } }, firstLabel);

import { AtasuApiError, isNotAvailable } from '@atasu/maps-gl';

try {
  await map.routing.route({ from: [76.95692, 43.24313], to: [0, 0] });
} catch (err) {
  if (err instanceof AtasuApiError) console.log(err.status, err.code); // 422 outside_coverage
  else if (isNotAvailable(err)) console.log('Atasu Maps is not reachable right now');
  else throw err;
}

map.setUserToken(() => getAccessToken()); // your sign-in: returns the user's current access token
const sent = await map.reports.addPlace({
  category: 'cafe',
  names: { kk: 'Тест кафе', ru: 'Тест кафе' },
  lnglat: [76.95692, 43.24313],      // where the user put the pin
});
console.log(sent.status);            // 'sent' (or 'queued' while offline)

const map = await AtasuMap.create({ container: 'map', apiKey: 'YOUR_WEB_KEY', apiBaseUrl: 'http://127.0.0.1:8787' });