Ajoutez des cartes à vos sites et apps en quelques minutes — sans clé, sans quota, sans facture surprise.
La plupart des services carto vous accueillent avec des crédits gratuits. Puis le trafic monte, et la facturation à l’usage transforme un essai en vraie facture : compteurs opaques, frais qui grimpent à chaque affichage de carte, grilles tarifaires dignes d’un tableur. Ce qui semblait gratuit devient un coût que beaucoup de projets ne veulent pas porter.
LFMaps, c’est différent. Gratuit veut dire gratuit — pas de surprise, pas de plafond, pas de facture.
Ce qu’il faut pour afficher des cartes. Rien de superflu.
Vous branchez, ça marche. Pas d’inscription, pas de token, pas de dashboard.
Aucun quota. Aucune limite douce. Utilisez ce dont vous avez besoin.
Zéro coût, quel que soit le trafic. Vraiment.
On ne piste pas vos utilisateurs. La vie privée reste de votre côté.
Idéal avec MapLibre GL
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
npm i maplibre-gl
Puis importez-le dans votre JavaScript :
import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
<div id="map" style="width: 100%; height: 500px"></div>
<script>
const map = new maplibregl.Map({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
})
</script>
De meilleurs Core Web Vitals aident souvent le référencement
Utilisez ce chargeur pour un premier rendu plus léger :
let maplibrePromise = null;
let cssLoaded = false;
/**
* Charge MapLibre GL et son CSS de manière différée au besoin
* @returns {Promise} Le module MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => module.default);
}
return maplibrePromise;
}
/**
* Charge le CSS de MapLibre GL dynamiquement
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Classe de chargement différé pour MapLibre GL
* Fournit une API similaire à maplibregl mais avec chargement différé
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Crée une nouvelle instance de carte, chargeant MapLibre GL si nécessaire
* @param {Object} options - Options de configuration de la carte
* @returns {Promise} Une instance de carte MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Récupère la bibliothèque MapLibre GL, avec chargement différé si nécessaire
* @returns {Promise} La bibliothèque MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();
Exemple d’utilisation :
import MapLibreLoader from './maplibre-loader.js';
// Créer la carte uniquement quand nécessaire (ex. : au défilement ou interaction utilisateur)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Ajouter des contrôles, marqueurs, etc.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}
Pour les fonctions avancées et l’API complète, consultez la documentation MapLibre GL JS
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Des cartes qui s’affichent en un clin d’œil
99,9 % de disponibilité
Des cartes du monde entier
Quelques lignes de code et c’est en ligne
Créez des palettes de couleurs harmonieuses
Générateur de mots de passe gratuit
Raccourcisseur d’URL personnalisé, gratuit
Codes QR modifiables après création
Images prêtes pour les réseaux sociaux
Déminifiez votre code
Générez des fichiers .gitignore facilement
Système de réservation pour restaurants
Logiciel de réservation pour coiffeurs
Générateur de favicon gratuit