Atasu Maps
Console

Quick start

Key → map → search → route on your own web page, in about 10 minutes.

On this page

You will create an API key, show a map of Almaty on a web page, find an address and draw a route to it. You need Node.js 20 or newer and an Atasuai account.

1. Get a web key

  1. Open the console and press Sign in with Atasuai.
  2. Create an organization (Create an organization → name → Create).
  3. Open API keys → Create a key. Type: Web. In Allowed origins enter the origin your page is served from — for this guide http://localhost:5173 (one per line; add https://your-site.kz later). Keep the products Basemap, Search and Routing ticked.
  4. Press Create key, copy the key (atk_live_… or atk_test_…) and confirm I have copied and stored it. The full key is shown only once.

A web key is public by design — it ends up in your page. The API accepts it only from the origins you listed, and only for the products of your plan.

2. Create the project

Shell
mkdir atasu-quickstart && cd atasu-quickstart
npm init -y
npm install @atasu/maps-gl
npm install --save-dev vite

index.html:

HTMLtested
<!doctype html>
<html lang="kk">
  <head>
    <meta charset="utf-8" />
    <title>Atasu Maps</title>
  </head>
  <body style="margin: 0">
    <div id="map" style="height: 100vh"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

3. Map, search, route

main.js — replace YOUR_WEB_KEY with your key:

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

const map = await AtasuMap.create({
  container: 'map',
  apiKey: 'YOUR_WEB_KEY',
  center: [76.95692, 43.24313], // Almaty, Dostyk Ave × Abay Ave
  zoom: 14,
});

const { items } = await map.search.search('Сәтбаев көшесі 4А');
const route = await map.routing.route({ from: [76.95692, 43.24313], to: { place_id: items[0].id } });
map.routes.draw(route);
console.log(`${Math.round(route.routes[0].distance_m)} m, ${Math.round(route.routes[0].duration_s / 60)} min`);

4. Run it

Shell
npx vite --port 5173

Open http://localhost:5173: a map of Almaty with Kazakh labels, the attribution in the corner and the route drawn on it. No bundler configuration is needed (Vite, webpack and Rollup pick up the map's worker file automatically).

What happened:

  • AtasuMap.create() started a map session with your key, received a short-lived tile token and only then loaded the style — tiles carry the token, never your key. The token is refreshed automatically.
  • map.search.search() called GET /v1/geocode/search and map.routing.route() called POST /v1/route; both count towards your usage in the console (Usage & budgets).

Server side: the same with curl

From your backend, use a server key (type Server, restricted to your servers' IP addresses). Never put a server key into a web page or an app.

Shelltested
curl -fsS -G "https://api.atasumaps.com/v1/geocode/search" \
  -H "X-Atasu-Key: YOUR_SERVER_KEY" \
  --data-urlencode "q=Сәтбаев көшесі 4А" \
  --data-urlencode "lang=ru"
Shelltested
curl -fsS -X POST "https://api.atasumaps.com/v1/route" \
  -H "X-Atasu-Key: YOUR_SERVER_KEY" \
  -H "Content-Type: application/json" \
  -d '{"waypoints":[{"lnglat":[76.95692,43.24313]},{"lnglat":[76.955275,43.238767]}],"costing":"auto","lang":"ru","geometry_format":"geojson"}'

The destination is the coordinate the search above returned for "Сәтбаев көшесі 4А".

Next