API Tuiles

Tuiles vectorielles MVT & styles carte

Tuiles servies en application/x-protobuf depuis Martin (Rust), rendues côté client par MapLibre GL JS (web) ou MapLibre Native (mobile). Trois styles officiels prêts à l'emploi.

Comment fonctionnent les tuiles vectorielles

Contrairement aux tuiles raster (images PNG/JPEG pré-rendues), les tuiles vectorielles contiennent des données géographiques brutes (points, lignes, polygones) que le client rend en temps réel. Avantages :

Tuiles vectorielles (AfriMap)

Rendu côté client (MapLibre)
Rotation, inclinaison, zoom fluide
Styles dynamiques (jour/nuit)
Bâtiments 3D natifs
~50% plus léger que le raster
Texte net à tout zoom

Tuiles raster (Google Maps)

Rendu côté serveur (images)
Pas de rotation/inclinaison fluide
Style figé dans l'image
Pas de 3D natif
Images lourdes par zoom
Texte pixelisé en zoomant

Pipeline de rendu

  PostGIS (données)     Martin (serveur)      MapLibre (client)
       │                      │                      │
  Routes, batiments,     Sert les tuiles        Reçoit la tuile MVT
  POI, limites admin     en format MVT          et la rend en WebGL
       │                      │                      │
  Tables SQL avec        GET /v1/tiles/          Applique le style
  colonnes geometry      {z}/{x}/{y}.pbf         (couleurs, icônes,
       │                      │                  taille de texte)
  Index spatial          Cache Redis 24h              │
  GIST + B-tree              │                  Affiche sur l'écran
       │                      │                  avec rotation 3D
       └──────────────────────┘                      │

Afficher une carte en 3 lignes

TypeScriptMapLibre GL JS

import maplibregl from 'maplibre-gl'import 'maplibre-gl/dist/maplibre-gl.css'const map = new maplibregl.Map({ container: 'map', style: 'https://api.afrimap.ci/v1/tiles/style/day.json', center: [-4.0167, 5.3197], // [lng, lat] — Plateau, Abidjan zoom: 13, transformRequest: (url) => ({ url, headers: { 'X-AfriMap-Key': 'afm_test_...' }, }), })

Le SDK simplifie encore : AfriMapMap gère automatiquement le header d'auth, les sprites, les glyphs et le style. Voir SDKs.

Styles officiels

Chaque style est auto-contenu : il inclut la source de tuiles, les sprites, et les glyphs. Pointez juste MapLibre sur l'URL du style.

Jour

Sahel Clair

Style principal. Fond sable chaud, routes claires, bâtiments 3D en terracotta. Optimisé lisibilité plein soleil.

/v1/tiles/style/day.json

Nuit

Lagune Nuit

Mode sombre. Fond charbon, routes bleutées, eau lagoon. Réduit la fatigue oculaire en conduite de nuit.

/v1/tiles/style/night.json

Satellite

Satellite hybride

Imagerie satellite avec overlay de routes et labels. Utile pour la vérification terrain et l'urbanisme.

/v1/tiles/style/satellite.json

Sprites & glyphs

Sprites (icônes)

Feuille de sprites SVG compilée contenant toutes les icônes POI (pharmacie, marché, mosquée, station, etc.).

GET /v1/tiles/sprite/{name}.pngGET /v1/tiles/sprite/{name}.json

Glyphs (polices)

Polices PBF pour le rendu de texte sur la carte (noms de rues, labels de POI, numéros de route).

GET /v1/tiles/font/{stack}/{range}.pbf

Bâtiments 3D

Les styles jour et nuit incluent un layer building-3d qui extrude les bâtiments en 3D à partir de leur hauteur OSM. Activé par défaut au zoom ≥ 15.

TypeScriptInclinaison pour voir le 3D

 map.easeTo({ pitch: 60, // inclinaison 60° bearing: -20, // rotation légère zoom: 16, // zoom suffisant pour le 3D duration: 1000, })

Endpoints

Points d'entrée

GET/v1/tiles/{z}/{x}/{y}.pbf

Vector tile (Mapbox Vector Tile, `application/x-protobuf`)

Serves the AfriMap default tileset at the requested zoom/column/row. Compatible with MapLibre GL and any MVT consumer. See `tileStyle` for the matching style document.

Paramètres

Nom	Emplacement	Type	Description
z required	path	integer	—
x required	path	integer	—
y required	path	integer	—

Réponses

200MVT tile bytes.

Exemples de code

curl -o tile.pbf "https://api.afrimap.ci/v1/tiles/12/2048/1967.pbf" \
  -H "X-AfriMap-Key: $AFM_KEY"

GET/v1/tiles/style/{name}

MapLibre style JSON

Paramètres

Nom	Emplacement	Type	Description
name required	path	enum(day.json\|night.json\|satellite.json)	—

Réponses

200MapLibre style document.
object

Exemples de code

curl https://api.afrimap.ci/v1/tiles/style/day.json \
  -H "X-AfriMap-Key: $AFM_KEY"

Testez-le

Essayer en direct

GET /v1/tiles/style/{name}

Collez une clé sandbox afm_test_…. La requête part directement de votre navigateur vers le gateway, aucun proxy côté portail.

Clé API

name(path)

GET http://localhost:8090/v1/tiles/style/

GET/v1/tiles/sprite/{name}

Sprite sheet (PNG or JSON index)

Paramètres

Nom	Emplacement	Type	Description
name required	path	string	—

Réponses

200Sprite PNG or index.

GET/v1/tiles/source/afrimap_tiles.json

TileJSON descriptor

TileJSON 3.0 document describing the default tileset — bounds, zoom range, attribution, vector_layers.

Réponses

200TileJSON document.
object

Exemples de code

curl https://api.afrimap.ci/v1/tiles/source/afrimap_tiles.json \
  -H "X-AfriMap-Key: $AFM_KEY"

Testez-le

Essayer en direct

GET /v1/tiles/source/afrimap_tiles.json

Collez une clé sandbox afm_test_…. La requête part directement de votre navigateur vers le gateway, aucun proxy côté portail.

Clé API

GET http://localhost:8090/v1/tiles/source/afrimap_tiles.json

Navigation →← Places