Atasu Maps
Консоль

Быстрый старт

Ключ → карта → поиск → маршрут на вашей странице примерно за 10 минут.

Осы бетте

Вы создадите API-ключ, покажете карту Алматы на веб-странице, найдёте адрес и построите до него маршрут. Нужны Node.js 20 или новее и аккаунт Atasuai.

1. Получите веб-ключ

  1. Откройте консоль и нажмите Войти через Atasuai.
  2. Создайте организацию (Создать организацию → название → Создать).
  3. Откройте API-ключи → Создать ключ. Тип: Веб. В поле Разрешённые источники (origins) укажите адрес, с которого открывается страница, — для этого руководства http://localhost:5173 (по одному в строке; https://ваш-сайт.kz добавите позже). Оставьте отмеченными продукты Базовая карта, Поиск и Маршруты.
  4. Нажмите Создать ключ, скопируйте ключ (atk_live_… или atk_test_…) и подтвердите Я скопировал(а) и сохранил(а) его. Полный ключ показывается только один раз.

Веб-ключ публичный по своей природе — он окажется в коде страницы. API принимает его только с перечисленных адресов и только для продуктов вашего тарифа.

2. Создайте проект

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

index.html:

HTMLтексерілген
<!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. Карта, поиск, маршрут

main.js — замените YOUR_WEB_KEY своим ключом:

JavaScriptтексерілген
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. Запустите

Shell
npx vite --port 5173

Откройте http://localhost:5173: карта Алматы с подписями на казахском, атрибуция в углу и маршрут на карте. Настраивать сборщик не нужно (Vite, webpack и Rollup сами подхватывают файл воркера карты).

Что произошло:

  • AtasuMap.create() открыл сессию карты по вашему ключу, получил короткоживущий токен тайлов и только потом загрузил стиль — тайлы запрашиваются с токеном, ключ в них не попадает. Токен обновляется автоматически.
  • map.search.search() вызвал GET /v1/geocode/search, а map.routing.route() — POST /v1/route; оба учитываются в консоли (Использование и бюджеты).

На сервере: то же самое через curl

На своём бэкенде используйте серверный ключ (тип Серверный, привязан к IP-адресам ваших серверов). Никогда не кладите серверный ключ на веб-страницу или в приложение.

Shellтексерілген
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"
Shellтексерілген
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"}'

Точка назначения — координата, которую поиск выше вернул для «Сәтбаев көшесі 4А».

Дальше