Des cartes, sans prise de tête Rapide. Gratuit. Pour toujours.

Ajoutez des cartes à vos sites et apps en quelques minutes — sans clé, sans quota, sans facture surprise.

Propulsé par OpenFreeMap 🚀

Les API carto adorent les free tiers. Jusqu’au jour où…

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.

Pourquoi LFMaps ?

Ce qu’il faut pour afficher des cartes. Rien de superflu.

Pas de clé API

Vous branchez, ça marche. Pas d’inscription, pas de token, pas de dashboard.

Usage illimité

Aucun quota. Aucune limite douce. Utilisez ce dont vous avez besoin.

Gratuit pour toujours

Zéro coût, quel que soit le trafic. Vraiment.

Aucune collecte de données

On ne piste pas vos utilisateurs. La vie privée reste de votre côté.

Voyez par vous-même

Comment l’utiliser

Idéal avec MapLibre GL

Étape 1 : Ajoutez MapLibre GL à votre HTML

<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" />

Ou installez avec npm

npm i maplibre-gl

Puis importez-le dans votre JavaScript :

import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'

Étape 2 : Créez votre carte

<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>

Astuce : chargez MapLibre en différé pour de meilleurs Core Web Vitals

Recommandé

Pourquoi c’est utile :

Améliore le Largest Contentful Paint (LCP)
Réduit le First Input Delay (FID)
Limite le Cumulative Layout Shift (CLS)
Économise ~750 Ko au premier chargement

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

Thèmes disponibles

  • https://data.lfmaps.fr/styles/bright
  • https://data.lfmaps.fr/styles/positron
  • https://data.lfmaps.fr/styles/liberty

Conçu pour la vitesse

Ultra rapide

Des cartes qui s’affichent en un clin d’œil

Fiable

99,9 % de disponibilité

Couverture mondiale

Des cartes du monde entier

Facile à intégrer

Quelques lignes de code et c’est en ligne