Une liste de cartes utilisables gratuitement

Tous les fonds de carte listés ci-dessous peuvent être utilisés gratuitement. Certains peuvent nécessiter de créer un compte, afin de récupérer une clé API ou bien l'ID d'un compte. Pour ces cas-là, l'usage est limité à un nombre de requêtes mensuelles. Ces cartes peuvent être utilisées pour y ajouter des markers, des popups, des frontières... Attention à bien lire les conditions d'utilisation : certaines, même gratuites, ne peuvent pas servir à un usage commercial, et la plupart doivent être utilisées de façon raisonnable.

Application propulsée par Next.js, Tailwind et TypeScript 🚀

Nom : OpenStreetMap Standard

License : ODbL (Open Database License)

Nombre maximum de requêtes : Illimité, y compris pour un usage commercial

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : OpenStreetMap Humanitarian

License : ODbL (Open Database License)

Nombre maximum de requêtes : Illimité, y compris pour un usage commercial

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Carto Voyager

License : CARTO License

Nombre maximum de requêtes : Gratuit pour usage non commercial

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Carto Light All

License : CARTO License

Nombre maximum de requêtes : Gratuit pour usage non commercial

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Carto Light No Labels

License : CARTO License

Nombre maximum de requêtes : Gratuit pour usage non commercial

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Carto Antique

License : CARTO License

Nombre maximum de requêtes : Gratuit pour usage non commercial

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://cartocdn_{s}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}.png', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Carto Flat Blue

License : CARTO License

Nombre maximum de requêtes : Gratuit pour usage non commercial

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://cartocdn_{s}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}.png', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Carto Midnight

License : CARTO License

Nombre maximum de requêtes : Gratuit pour usage non commercial

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://cartocdn_{s}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}.png', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Mapbox Custom Style

License : Propriétaire

Nombre maximum de requêtes : 200 000 requêtes gratuites, par tuile, par mois

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://api.mapbox.com/styles/v1/[YOUR_USERNAME]/clu10mdy400nu01qwgizt8el8/tiles/512/{z}/{x}/{y}?access_token=[YOUR_ACCESS_TOKEN]', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : ArcGIS World Terrain Base

License : Esri World Imagery

Nombre maximum de requêtes : Fond de carte gratuit pour usage non commercial, mais plus mis à jour

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Thunderforest Outdoors

License : Propriétaire

Nombre maximum de requêtes : 150 000 requêtes gratuites par mois

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=YOUR_API_KEY', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Thunderforest Cycle

License : Propriétaire

Nombre maximum de requêtes : 150 000 requêtes gratuites par mois

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=YOUR_API_KEY', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Thunderforest Transport Dark

License : Propriétaire

Nombre maximum de requêtes : 150 000 requêtes gratuites par mois

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png?apikey=YOUR_API_KEY', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Thunderforest Pioneer

License : Propriétaire

Nombre maximum de requêtes : 150 000 requêtes gratuites par mois

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=YOUR_API_KEY', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Thunderforest Mobile Atlas

License : Propriétaire

Nombre maximum de requêtes : 150 000 requêtes gratuites par mois

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey=YOUR_API_KEY', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Thunderforest Neighbourhood

License : Propriétaire

Nombre maximum de requêtes : 150 000 requêtes gratuites par mois

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey=YOUR_API_KEY', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !

Nom : Thunderforest Atlas

License : Propriétaire

Nombre maximum de requêtes : 150 000 requêtes gratuites par mois

Voir le code

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
    const coordinates = [48.8566, 2.3522];
    const zoom = 5;

    const mapContainer = document.getElementById('map');
    const map = L.map(mapContainer).setView(coordinates, zoom);

    L.tileLayer('https://{s}.tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey=YOUR_API_KEY', {
        attribution: '© CARTO'
    }).addTo(map);
</script>

Copié !