Inscris-toi gratuitement et récupère ta clé depuis le dashboard. Le tier gratuit inclut 50 000 chargements de carte par mois, gratuit pour toujours, sans carte bancaire requise. Aucun email de vente, aucun appel de démo à réserver.
Chaque requête est authentifiée par un paramètre key ajouté à l'URL. Pas de header custom, pas de signature à calculer :
Une clé peut être restreinte à une ou plusieurs origines (ton domaine, ton app mobile) depuis le dashboard — tu peux donc l'exposer côté client sans risque qu'elle soit réutilisée ailleurs. Une clé sans restriction ne devrait jamais être commitée dans un dépôt public.
Toutes les routes acceptent le paramètre key et renvoient du JSON, du MVT (Mapbox Vector Tile) ou du PNG selon l'endpoint. Base URL : https://tiles.tile.cat
Renvoie un document de style compatible spec MapLibre/Mapbox GL, prêt à passer directement en style à ta carte.
{style} vaut default ou dark (le pendant sombre du style par défaut, pensé pour un site ou une app en dark mode).
Les tuiles brutes référencées par les styles ci-dessus. Utile si tu construis ton propre style plutôt que d'utiliser un des nôtres.
Référencés automatiquement par le JSON de style — tu n'as normalement pas besoin de les appeler toi-même.
Installe la librairie puis initialise la carte avec ta clé.
// npm install maplibre-gl import maplibregl from 'maplibre-gl'; new maplibregl.Map({ container: 'map', style: 'https://tiles.tile.cat/styles/default.json?key=YOUR_KEY', center: [2.3522, 48.8566], zoom: 11 });
Leaflet ne parle pas vecteur nativement : passe par le plugin @maplibre/maplibre-gl-leaflet, qui affiche un style TileCat (donc vectoriel) directement dans une carte Leaflet.
// npm install leaflet maplibre-gl @maplibre/maplibre-gl-leaflet const map = L.map('map').setView([48.8566, 2.3522], 11); L.maplibreGL({ style: 'https://tiles.tile.cat/styles/default.json?key=YOUR_KEY', }).addTo(map);
Aucun JavaScript à écrire : une seule balise <script> suffit. Elle crée elle-même l'emplacement de la carte juste après elle dans la page, et charge MapLibre GL JS toute seule si besoin.
<script src="https://tile.cat/embed.js" data-key="YOUR_KEY" data-lat="48.8566" data-lng="2.3522" data-zoom="11" data-height="400px" ></script>
| Attribut | Description |
|---|---|
data-key | Ta clé API (obligatoire) |
data-lat / data-lng / data-zoom | Centre et zoom initial de la carte |
data-style | default ou dark (défaut : default) |
data-height | Hauteur du conteneur créé (défaut : 400px) |
data-target | Sélecteur CSS d'un élément existant à utiliser plutôt que d'en créer un nouveau |
Chaque réponse porte deux headers pour suivre ta consommation en temps réel, sans avoir à retourner sur le dashboard :
| Header | Description |
|---|---|
X-TileCat-Quota-Limit | Quota mensuel total de ton plan |
X-TileCat-Quota-Remaining | Chargements restants avant la fin du mois |
Plans et limites :
| Plan | Quota mensuel | Comportement au-delà |
|---|---|---|
| Gratuit | 50 000 | 429 jusqu'au mois suivant |
| Croissance | 1 000 000 | 429, upgrade en un clic depuis le dashboard |
| Entreprise | Négocié | SLA sur mesure, pas de coupure surprise |
Codes d'erreur :
| Code | Signification |
|---|---|
| 400 | Paramètre invalide (zoom, coordonnées de tuile…) |
| 401 | Clé key manquante ou invalide |
| 403 | Clé valide mais domaine/origine non autorisé |
| 404 | Style ou tuile introuvable à ce niveau de zoom |
| 429 | Quota mensuel du plan atteint |
Une réponse 429 signifie que le quota mensuel du tier gratuit est atteint. Passe au plan Croissance depuis le dashboard pour lever la limite, sans interruption de service.