Maps for Everyone Fast. Free.

Lightning-fast network that delivers tilesets for map integration on websites

Powered by OpenFreeMap 🚀

The Hidden Cost of Map Integration

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.

Why Choose LFMaps?

Everything you need for map integration, nothing you don't

No API Key Required

Start using immediately without any registration or authentication

Unlimited Usage

No quotas, no limits, use as much as you need

Free

Completely free service, regardless of your traffic

No Data Collection

Your privacy is protected. We don't track or collect any user data

See It In Action

How to Use

Works best with MapLibre GL

Step 1: Include MapLibre GL in your 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" />

Or install via npm

npm i maplibre-gl

Then import in your JavaScript:

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

Step 2: Create Your Map

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

Advanced: Optimize Core Web Vitals with Lazy Loading

Recommended

Performance Benefits:

Improves Largest Contentful Paint (LCP)
Reduces First Input Delay (FID)
Better Cumulative Layout Shift (CLS)
Saves ~750KB on initial load

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

Available Themes

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

Built for Performance

Lightning Fast

Optimized CDN for instant tile loading

Reliable

99.9% uptime

Global Coverage

World-wide map data

Easy Integration

Simple code, quick setup