Des cartes pour tous Rapide. Gratuit.

Réseau ultra-rapide pour afficher des cartes sur vos sites et applications web

Propulsé par OpenFreeMap 🚀

Le coût caché de l'intégration de cartes

La plupart des services d'intégration de cartes attirent les développeurs avec des niveaux gratuits généreux et des crédits initiaux. Mais à mesure que votre projet grandit et que le trafic augmente, la réalité frappe fort : la facturation basée sur l'utilisation passe de quelques centimes à des milliers d'euros par mois. Les modèles de tarification complexes, les comptages d'appels API inattendus et les frais par tuile peuvent transformer votre site web ou application en fardeau financier. Ce qui a commencé comme une solution gratuite devient une dépendance coûteuse que de nombreux projets ne peuvent pas maintenir.

LFMaps est différent. gratuit signifie gratuit. pas de surprises, pas de limites, pas de factures.

Pourquoi choisir LFMaps ?

Tout ce dont vous avez besoin pour l'intégration de cartes, rien de plus

Pas besoin de clé API

Commencez à utiliser immédiatement sans inscription ni authentification

Usage illimité

Aucun quota, aucune limite, utilisez autant que nécessaire

Gratuit

Service entièrement gratuit, quel que soit votre trafic

Aucune collecte de données

Votre vie privée est protégée. Nous ne suivons ni ne collectons aucune donnée utilisateur

Découvrez le réseau en action

Comment utiliser LFMaps ?

Fonctionne parfaitement avec MapLibre GL

Étape 1 : Incluez MapLibre GL dans la partie head de 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 installer via npm

npm i maplibre-gl

Puis importer dans votre JavaScript :

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

Étape 2 : Créez une div pour votre carte et créez votre carte en JavaScript

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

Avancé : Optimisez les Core Web Vitals avec le chargement différé

Recommandé

Avantages de performance :

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

Google récompense de meilleurs Core Web Vitals par un meilleur référencement

Utilisez notre chargeur optimisé pour de meilleures performances :

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 des fonctionnalités avancées et la documentation complète de l'API, 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 performance

Ultra rapide

CDN optimisé pour un chargement instantané des tuiles

Fiable

99,9% de disponibilité

Couverture mondiale

Données cartographiques mondiales

Intégration facile

Code simple, configuration rapide