De l'inscription au premier itinéraire sur carte.

1 · Créer un compte AfriMap

Allez sur portal.afrimap.ci/auth/register et créez un compte avec votre email professionnel. Vous recevez immédiatement une clé de sandbox au format afm_test_* — pas de carte bancaire demandée.

2 · Copier votre clé d'API

Dans le Tableau de bord → Clés API , cliquez sur Afficher à côté de la clé générée. La chaîne complète ne s'affiche qu'une seule fois — rangez-la dans votre gestionnaire de secrets (ou .env.local).

 AFRIMAP_API_KEY=afm_test_AbCdEf1234...

Perdu la clé ? Cliquez sur Régénérer — l'ancienne est révoquée instantanément.

3 · Installer le SDK

Quatre SDKs officiels couvrent web, Android, iOS et backend Go — tous sous licence MIT, tous publiés sous la version 1.0.0.

npm install @afrimap/sdk maplibre-gl

4 · Calculer votre premier itinéraire

On trace un trajet Plateau (5.3197, -4.0167) → Cocody (5.3480, -3.9904). Le SDK renvoie la polyline (précision 6), l'ETA ajusté au trafic et la liste des manœuvres en français.

import { AfriMapClient } from '@afrimap/sdk'const client = new AfriMapClient({ apiKey: process.env.AFRIMAP_API_KEY! }) const { routes } = await client.routing.route({ origin: { lat: 5.3197, lng: -4.0167 }, // Plateau destination: { lat: 5.3480, lng: -3.9904 }, // Cocody mode: 'auto', language: 'fr', }) console.log(routes[0].distance, 'm') // ~4 200 mconsole.log(routes[0].duration, 's') // ~660 s (ETA trafic)

L'objet routes[0] contient aussi geometry (polyline encodée) et legs[].maneuvers (instructions pas-à-pas).

5 · Afficher l'itinéraire sur une carte

Le SDK embarque AfriMapMap — un wrapper MapLibre qui gère le style, le décodage polyline précision-6, et le fitBounds automatique.

import { AfriMapClient, AfriMapMap } from '@afrimap/sdk'import 'maplibre-gl/dist/maplibre-gl.css'const client = new AfriMapClient({ apiKey: 'afm_test_…' }) const map = new AfriMapMap({ container: 'map', style: 'day', // ou 'night', 'satellite' center: [-4.00, 5.34], zoom: 13, }) const { routes } = await client.routing.route({ origin: { lat: 5.3197, lng: -4.0167 }, destination: { lat: 5.3480, lng: -3.9904 }, }) map.addRoute(routes[0]) // trace la ligne en terracotta map.fitRoute(routes[0]) // zoom + padding automatique

C'est tout. Vous avez une carte interactive, un itinéraire calculé avec ETA trafic, et une clé qui peut passer en production en un clic (Dashboard → Facturation).

Et maintenant ?