Réseau ultra-rapide pour afficher des cartes sur vos sites et applications web
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.
Tout ce dont vous avez besoin pour l'intégration de cartes, rien de plus
Commencez à utiliser immédiatement sans inscription ni authentification
Aucun quota, aucune limite, utilisez autant que nécessaire
Service entièrement gratuit, quel que soit votre trafic
Votre vie privée est protégée. Nous ne suivons ni ne collectons aucune donnée utilisateur
Fonctionne parfaitement 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 importer 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>
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
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
CDN optimisé pour un chargement instantané des tuiles
99,9% de disponibilité
Données cartographiques mondiales
Code simple, configuration rapide
Créer des palettes de couleurs harmonieuses
Générateur de mots de passe gratuit
Raccourcisseur d'URL personnalisé gratuit
Générateur de codes QR avec codes modifiables
Créer des images pour les réseaux sociaux
Déminifiez votre code
Créer des fichiers .gitignore facilement