Unbegrenzte Vektorkacheln auf Basis von OpenStreetMap-Daten, direkt nutzbar mit MapLibre GL oder Leaflet. Ohne API-Schlüssel, ohne Kontingent, ohne überraschende Rechnung.
Die meisten Anbieter von Kartenkacheln locken mit einem kostenlosen Startguthaben. Doch mit steigenden Besucherzahlen wird aus dem kleinen Experiment eine echte Rechnung: undurchsichtige Verbrauchsanzeigen, Kosten für jeden Kartenaufruf und Preistabellen, für die du eine Tabellenkalkulation brauchst. Google Maps und Mapbox funktionieren beide so. Was anfangs kostenlos schien, belastet plötzlich dein Projektbudget.
LFMaps macht es anders. Kostenlos heißt kostenlos – ohne Überraschungen, ohne Limits, ohne Rechnungen.
Alles, was du brauchst, um eine Karte einzubinden. Ohne Ballast.
Kachel-URL einfügen und loslegen. Ohne Anmeldung, Zugriffstoken oder Dashboard.
Keine Kontingente, keine versteckten Grenzen, keine Abrechnung pro Kartenaufruf. Nutze so viel, wie du brauchst.
Keine Kosten, egal wie viele Zugriffe du hast – ob zehn Kartenaufrufe oder zehn Millionen.
Wir verfolgen deine Besucher nicht und setzen keine Cookies. Deine Datenschutzerklärung bleibt so kurz wie bisher.
Am besten mit MapLibre GL – aber auch mit Leaflet oder 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 wird ausschließlich als ES-Module bereitgestellt. Diese Beispiele laden es deshalb über eine Import Map und ein Modulskript.
npm i maplibre-gl@^6Anschließend in deinem JavaScript importieren:
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)In einem Bundle kann MapLibre seinen Worker nicht selbst finden. Hier siehst du die Variante für Vite. Für webpack und andere Bundler findest du Hilfe in der Installationsanleitung von 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>Bessere Core Web Vitals bedeuten oft bessere Platzierungen in Suchmaschinen
Mit diesem Loader wird deine Seite beim ersten Aufruf schlanker:
// Variante für Vite; für andere Bundler siehe Installationsanleitung
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Lädt MapLibre GL und das zugehörige CSS erst bei Bedarf
* @returns {Promise} Das MapLibre-GL-Modul
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Lädt das CSS von MapLibre GL dynamisch
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Klasse zum bedarfsgesteuerten Laden von MapLibre GL
* Bietet eine ähnliche API wie maplibregl, lädt aber erst bei Bedarf
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Erstellt eine neue Karteninstanz und lädt MapLibre GL bei Bedarf nach
* @param {Object} options - Konfigurationsoptionen für die Karte
* @returns {Promise} Eine Map-Instanz von MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Gibt die MapLibre-GL-Bibliothek zurück und lädt sie bei Bedarf nach
* @returns {Promise} Die MapLibre-GL-Bibliothek
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Anwendungsbeispiel:
import MapLibreLoader from './maplibre-loader.js';
// Karte erst bei Bedarf erstellen, etwa beim Scrollen oder bei einer Nutzeraktion
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Steuerelemente, Markierungen usw. hinzufügen
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Weitere Funktionen und die vollständige API findest du in der Dokumentation von MapLibre GL JS
Leaflet kann Vektorkacheln nicht selbst darstellen. Kombiniere es deshalb mit dem Plugin 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>Das Plugin unterstützt Leaflet 1.x – dieselben kostenlosen Kartenkacheln, ganz ohne Rechnung.
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"
/>
)
}Kein mapbox-gl, kein Zugriffstoken – react-map-gl spricht direkt mit MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Kacheln aus einem CDN sorgen dafür, dass Karten im Handumdrehen erscheinen
99,9% Verfügbarkeit
OpenStreetMap-Daten für die ganze Welt
Ein paar Zeilen MapLibre GL oder Leaflet – und deine Karte ist online
Das Ergebnis ist dasselbe: eine Karte auf deiner Seite. Die Rechnung am Monatsende sieht ganz anders aus.
Die ehrliche Einschränkung: LFMaps bietet ausschließlich Kartenkacheln. Geocoding, Routenplanung und Navigation mit Abbiegehinweisen gehören nicht zum Dienst.
Ja. Es gibt keinen kostenpflichtigen Tarif, du brauchst keine Kreditkarte und erhältst keine Nutzungsrechnung – egal wie viele Zugriffe du hast. LFMaps wird als Nebenprojekt finanziert, genau wie die anderen kostenlosen Tools auf dieser Seite.
Nein. Du musst dich nirgends anmelden und keine Tokens austauschen. Trage einfach eine LFMaps-URL als Kartenstil ein, und es funktioniert.
Es gibt weder Kontingente noch ein festes Abruflimit. Wir bitten dich nur, nicht den gesamten Kachelsatz massenhaft herunterzuladen. Die normale Kartennutzung auf einer Website oder in einer App ist kein Problem.
Ja. MapLibre GL stellt die Vektorkacheln direkt dar und ist unsere Empfehlung. Mit dem Plugin maplibre-gl-leaflet funktioniert aber auch Leaflet.
Von OpenStreetMap, bereitgestellt über OpenFreeMap. Die Daten werden von der Community erstellt – genau deshalb können sie kostenlos bleiben.
Ja, auch für kommerzielle Projekte. Der Quellenhinweis auf OpenStreetMap muss auf der Karte sichtbar bleiben – das ist die einzige Voraussetzung.
Nein. Wir erfassen keine personenbezogenen Daten und setzen bei Kachelabfragen keine Cookies. Durch die Karte kommen also keine zusätzlichen Angaben in deiner Datenschutzerklärung hinzu.
Dort startest du mit einem kostenlosen Kontingent. Wenn du es überschreitest, wird jeder Kartenaufruf berechnet. Bei LFMaps gibt es keine Verbrauchsabrechnung: Der Preis bleibt bei null – ob bei zehn Kartenaufrufen oder zehn Millionen.
Harmonische Farbpaletten erstellen
Kostenloser Passwortgenerator
Eigene Kurzlinks erstellen, kostenlos
QR-Codes, die du später noch ändern kannst
Bilder für deine Social-Media-Beiträge
Minifizierten Code wieder lesbar machen
.gitignore-Dateien einfach erstellen
Reservierungssystem für Restaurants
Terminbuchungssoftware für Friseursalons
Kostenloser Favicon-Generator
Kostenloser Allergenaushang für Restaurants
Markdown ansprechend teilen
Deine Speisekarte online – kostenlos