Lightning-fast network that delivers tilesets for map integration on websites
Most map integration services lure developers with generous free tiers and initial credits. But as your project grows and traffic increases, the reality hits hard: usage-based billing transforms from pennies to thousands of dollars per month. Complex pricing models, unexpected API call counts, and per-tile charges can turn your website or app into a financial burden. What started as a free solution becomes an expensive dependency that many projects can't sustain.
LFMaps is different. Free means free. No surprises, no limits, no bills.
Everything you need for map integration, nothing you don't
Start using immediately without any registration or authentication
No quotas, no limits, use as much as you need
Completely free service, regardless of your traffic
Your privacy is protected. We don't track or collect any user data
Works best with 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
Then import in your 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 rewards better Core Web Vitals with higher search rankings
Use our optimized loader for best performance:
let maplibrePromise = null;
let cssLoaded = false;
/**
* Lazily loads MapLibre GL and its CSS when needed
* @returns {Promise} The MapLibre GL module
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => module.default);
}
return maplibrePromise;
}
/**
* Loads MapLibre GL CSS dynamically
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* MapLibre GL Lazy Loader Class
* Provides an API similar to maplibregl but with lazy loading
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Creates a new map instance, lazily loading MapLibre GL if needed
* @param {Object} options - Map configuration options
* @returns {Promise} A MapLibre GL Map instance
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Gets the MapLibre GL library, lazily loading if needed
* @returns {Promise} The MapLibre GL library
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();
Usage example:
import MapLibreLoader from './maplibre-loader.js';
// Create map only when needed (e.g., on scroll or user interaction)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Add controls, markers, etc.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}
For more advanced features and complete API documentation, visit the MapLibre GL JS documentation
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Optimized CDN for instant tile loading
99.9% uptime
World-wide map data
Simple code, quick setup