Exemples concrets d'intégration
Trois cas d'utilisation réels montrant comment combiner les API AfriMap pour construire des applications de mobilité et logistique en Afrique de l'Ouest.
1. Application VTC (ride-hailing)
Scénario complet : le passager commande une course, le système trouve le chauffeur le plus proche, calcule le trajet et lance la navigation vocale.
Étape 1 : Géocodage de l'adresse passager
// L'utilisateur tape "marché cocody" dans le champ de rechercheconst suggestions = await client.geocoding.autocomplete({ q: 'marché cocody', lat: userPosition.lat, lng: userPosition.lng, limit: 5, }) // L'utilisateur sélectionne le premier résultatconst pickup = suggestions.features[0].geometry.coordinates // [lng, lat]Étape 2 : Trouver le chauffeur le plus proche (matrice)
// 5 chauffeurs disponibles dans la zoneconst drivers = [ { id: 'd1', lat: 5.345, lng: -3.992 }, { id: 'd2', lat: 5.350, lng: -3.988 }, { id: 'd3', lat: 5.340, lng: -3.995 }, { id: 'd4', lat: 5.352, lng: -3.990 }, { id: 'd5', lat: 5.338, lng: -4.000 }, ] const matrix = await client.routing.matrix({ origins: drivers.map(d => ({ lat: d.lat, lng: d.lng })), destinations: [{ lat: pickup[1], lng: pickup[0] }], mode: 'auto', }) // Trouver le chauffeur avec la plus courte duréeconst nearest = drivers[ matrix.durations.map(d => d[0]).indexOf( Math.min(...matrix.durations.map(d => d[0])) ) ] // nearest = { id: "d2", ... } → 90 secondes d'arrivéeÉtape 3 : ETA trafic pour le passager
const eta = await client.eta.get({ origin: { lat: nearest.lat, lng: nearest.lng }, destination: { lat: pickup[1], lng: pickup[0] }, }) // Afficher au passager : "Votre chauffeur arrive dans ~2 min" showToPassenger(`Arrivée dans ${Math.ceil(eta.duration_enhanced / 60)} min`)Étape 4 : Navigation vocale pour le chauffeur
const nav = await client.navigation.start({ route: routes[0], voice: 'fr', landmarks: true, tts_batch: true, }) // Le SDK gère automatiquement :// - Suivi GPS toutes les 1s// - Annonces vocales à 500m / 200m / 30m// - Rerouting si déviation > 50m// - Caméra pitch 60° / zoom 16 / bearing = heading GPS2. Livraison dernier kilomètre
Un livreur doit faire 8 arrêts en optimisant son parcours. AfriMap optimise l'ordre des stops et fournit la navigation pour chaque étape.
Optimisation de tournée (TSP)
const stops = [ { lat: 5.320, lng: -4.017, name: 'Entrepôt (départ)' }, { lat: 5.348, lng: -3.990, name: 'Livraison A — Cocody' }, { lat: 5.336, lng: -4.069, name: 'Livraison B — Yopougon' }, { lat: 5.419, lng: -4.020, name: 'Livraison C — Abobo' }, { lat: 5.310, lng: -4.005, name: 'Livraison D — Treichville' }, { lat: 5.355, lng: -4.010, name: 'Livraison E — Adjamé' }, { lat: 5.330, lng: -3.970, name: 'Livraison F — Marcory' }, { lat: 5.320, lng: -4.017, name: 'Retour entrepôt' }, ] const optimized = await client.routing.optimize({ locations: stops.map(s => ({ lat: s.lat, lng: s.lng })), mode: 'auto', }) // optimized.waypoint_order = [0, 4, 6, 1, 5, 3, 2, 7]// → Entrepôt → Treichville → Marcory → Cocody → Adjamé → Abobo → Yopougon → Retour// Économie : ~12 km et 25 min vs ordre originalZone de couverture (isochrone)
const zone = await client.routing.isochrone({ location: { lat: 5.320, lng: -4.017 }, // entrepôt time: 1800, // 30 min mode: 'auto', }) // zone.geometry = GeoJSON Polygon// Affichez ce polygone sur la carte pour montrer la zone livrable map.addGeoJSON(zone.geometry, { color: '#F2731A', opacity: 0.2 })3. Carte interactive pour site web
Intégrez une carte AfriMap dans votre site en quelques lignes. Avec POI locaux, recherche, et itinéraire cliquable.
import { AfriMapClient, AfriMapMap } from '@afrimap/sdk'import 'maplibre-gl/dist/maplibre-gl.css'const client = new AfriMapClient({ apiKey: 'afm_test_...' }) // Initialiser la carteconst map = new AfriMapMap({ container: 'map', style: 'day', center: [-4.0167, 5.3197], zoom: 13, }) // Ajouter les pharmacies à proximitéconst pharmacies = await client.places.nearby({ lat: 5.3197, lng: -4.0167, radius: 3000, category: 'pharmacy', }) pharmacies.places.forEach(p => { map.addMarker({ lat: p.location.lat, lng: p.location.lng, popup: `<b>${p.name}</b><br>${p.metadata?.garde ? 'De garde' : ''}`, }) }) // Clic sur la carte → itinéraire map.on('click', async (e) => { const { routes } = await client.routing.route({ origin: { lat: 5.3197, lng: -4.0167 }, destination: { lat: e.lngLat.lat, lng: e.lngLat.lng }, }) map.addRoute(routes[0]) map.fitRoute(routes[0]) })Bonnes pratiques d'intégration
Debounce l'autocomplete
Attendez 200ms après la dernière frappe clavier avant d'appeler /v1/geocode/autocomplete. Cela réduit les requêtes inutiles de 80%.
Cachez les place IDs
Les identifiants place_01HZ... sont stables. Stockez-les dans votre base pour éviter de refaire un geocode à chaque fois.
Utilisez duration_enhanced pour le passager
Affichez duration_enhanced dans l'UI passager et duration_raw pour le dispatch interne quand le trafic n'est pas disponible (confidence < 0.5).
Pré-synthétisez les clips vocaux
Utilisez l'endpoint batch TTS au démarrage de la navigation pour avoir tous les clips audio prêts. Cela survit aux coupures réseau.