Onbeperkt vectortegels op basis van OpenStreetMap-data, direct te gebruiken met MapLibre GL of Leaflet. Geen API-sleutel, geen quotum, geen onverwachte factuur.
De meeste aanbieders van kaarttegels verwelkomen je met gratis tegoed. Maar als je bezoekersaantallen groeien, verandert betalen naar gebruik een klein experiment in een flinke rekening. Onduidelijke tellers, kosten voor elke geladen kaart en prijspagina’s waarvoor je een spreadsheet nodig hebt. Google Maps en Mapbox werken allebei zo. Wat gratis leek, wordt een kostenpost waar je project misschien niet op zit te wachten.
Bij LFMaps werkt het anders. Gratis is gratis: geen verrassingen, geen limieten, geen facturen.
Alles wat je nodig hebt om een kaart te publiceren. Zonder overbodige extra’s.
Voeg de tegel-URL toe en je kunt aan de slag. Geen registratie, geen toegangstoken, geen dashboard.
Geen quota, geen verborgen limieten, geen teller voor geladen kaarten. Gebruik wat je nodig hebt.
Kosteloos bij elk bezoekersaantal, of je kaart nu tien of tien miljoen keer wordt bekeken.
We volgen je bezoekers niet en plaatsen geen cookies. Je privacybeleid blijft net zo kort als het was.
Werkt het best met MapLibre GL, maar ook met Leaflet of React
<link href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" rel="stylesheet" />
<script type="importmap">
{ "imports": { "maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs" } }
</script>MapLibre GL v6 is uitsluitend beschikbaar als ES-modules. Daarom laden deze voorbeelden de bibliotheek via een import map en een modulescript.
npm i maplibre-gl@^6Importeer het daarna in je JavaScript:
import * as maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
maplibregl.setWorkerUrl(workerUrl)Binnen een bundle kan MapLibre zijn worker niet zelf vinden. Dit is de variant voor Vite; voor webpack en andere bundlers raadpleeg je de installatiehandleiding van MapLibre.
<div id="map" style="width: 100%; height: 500px"></div>
<script type="module">
import * as maplibregl from 'maplibre-gl'
const map = new maplibregl.Map({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
})
</script>Betere Core Web Vitals zorgen vaak voor een hogere positie in zoekresultaten
Gebruik deze loader om de pagina sneller voor het eerst weer te geven:
// Variant voor Vite; zie de installatiehandleiding voor andere bundlers
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Laadt MapLibre GL en de bijbehorende CSS pas wanneer nodig
* @returns {Promise} De MapLibre GL-module
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Laadt de CSS van MapLibre GL dynamisch
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Klasse voor het uitgesteld laden van MapLibre GL
* Biedt een API vergelijkbaar met maplibregl, maar met uitgesteld laden
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Maakt een nieuwe kaartinstantie en laadt MapLibre GL indien nodig
* @param {Object} options - Configuratieopties voor de kaart
* @returns {Promise} Een Map-instantie van MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Haalt de MapLibre GL-bibliotheek op en laadt deze indien nodig
* @returns {Promise} De MapLibre GL-bibliotheek
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Gebruiksvoorbeeld:
import MapLibreLoader from './maplibre-loader.js';
// Maak de kaart pas wanneer nodig (bijvoorbeeld bij scrollen of een gebruikersactie)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Voeg bedieningselementen, markeringen enzovoort toe
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Voor geavanceerde functies en de volledige API raadpleeg je de documentatie van MapLibre GL JS
Leaflet kan zelf geen vectortegels lezen. Gebruik het daarom samen met de plug-in maplibre-gl-leaflet:
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet" />
<script type="importmap">
{ "imports": {
"leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js",
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs"
} }
</script>
<script type="module">
import * as L from 'leaflet'
import { maplibreGL } from 'https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.4/dist/leaflet-maplibre-gl.mjs'
const map = L.map('map').setView([48.6937, 6.1844], 12)
maplibreGL({
style: 'https://data.lfmaps.fr/styles/bright',
}).addTo(map)
</script>De plug-in ondersteunt Leaflet 1.x: dezelfde gratis kaarttegels, zonder rekening.
npm i react-map-gl maplibre-gl@^6import Map from 'react-map-gl/maplibre'
import { setWorkerUrl } from 'maplibre-gl'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
import 'maplibre-gl/dist/maplibre-gl.css'
setWorkerUrl(workerUrl)
export default function MyMap() {
return (
<Map
initialViewState={{ longitude: 6.1844, latitude: 48.6937, zoom: 12 }}
style={{ width: '100%', height: 500 }}
mapStyle="https://data.lfmaps.fr/styles/bright"
/>
)
}Geen mapbox-gl, geen toegangstoken: react-map-gl communiceert rechtstreeks met MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Kaarttegels via een CDN, zodat kaarten in een oogwenk verschijnen
99,9% beschikbaarheid
OpenStreetMap-data voor de hele wereld
Een paar regels MapLibre GL of Leaflet en je kaart staat online
Hetzelfde resultaat: een kaart op je pagina. Een heel andere rekening aan het eind van de maand.
De afweging: LFMaps biedt uitsluitend kaarttegels. Geocodering, routeberekening en stapsgewijze navigatie maken geen deel uit van de dienst.
Ja. Er is geen betaald abonnement, geen creditcard nodig en geen rekening voor je gebruik, ongeacht je bezoekersaantallen. LFMaps wordt gefinancierd als nevenproject, net als de andere gratis tools op deze pagina.
Nee. Je hoeft je nergens voor te registreren en geen tokens te vervangen. Stel een LFMaps-URL in als kaartstijl en het werkt.
Er zijn geen quota en geen vaste limiet op het aantal verzoeken per seconde. We vragen alleen om niet de volledige tegelset in bulk te downloaden. Normaal kaartgebruik op een website of in een app is prima.
Ja. MapLibre GL geeft vectortegels rechtstreeks weer en is onze aanbeveling. Leaflet werkt ook, met de plug-in maplibre-gl-leaflet.
Van OpenStreetMap, geleverd via OpenFreeMap. De gegevens worden door de gemeenschap gemaakt, en juist daardoor kunnen ze gratis blijven.
Ja, ook commerciële projecten zijn welkom. Zorg dat de bronvermelding van OpenStreetMap zichtbaar blijft op de kaart. Dat is de enige voorwaarde.
Nee. We verzamelen geen persoonsgegevens en plaatsen geen cookies bij het opvragen van kaarttegels. Een kaart toevoegen betekent dus geen aanvulling op je privacybeleid.
Die bieden een gratis abonnement en rekenen daarna per geladen kaart zodra je gebruik groeit. LFMaps heeft helemaal geen teller: de prijs is nul bij tien kaartweergaven én bij tien miljoen.
Maak harmonieuze kleurenpaletten
Gratis wachtwoordgenerator
Gratis URL-verkorter met eigen links
QR-codes die je later kunt aanpassen
Afbeeldingen voor je socialemediaberichten
Maak geminificeerde code weer leesbaar
Maak eenvoudig .gitignore-bestanden
Reserveringssysteem voor restaurants
Afsprakensoftware voor kappers
Gratis favicongenerator
Gratis allergenenposter voor restaurants
Deel Markdown in een mooie opmaak
Je restaurantmenu gratis online