Obegränsat med vektorkartplattor baserade på OpenStreetMap-data, redo att användas i MapLibre GL eller Leaflet. Ingen API-nyckel, inga kvoter, inga oväntade fakturor.
De flesta leverantörer av kartplattor lockar med en gratis startpott. Sedan växer trafiken, och användningsbaserad debitering förvandlar ett litet experiment till en rejäl faktura — otydliga mätare, avgifter som ökar för varje kartvisning och prislistor som kräver ett kalkylblad. Både Google Maps och Mapbox fungerar så. Det som verkade gratis blir en kostnad som ditt projekt kanske helst slipper.
LFMaps fungerar annorlunda. Gratis betyder gratis — inga överraskningar, inga tak, inga fakturor.
Allt du behöver för att publicera en karta. Inget överflödigt.
Klistra in adressen till kartplattorna och kör. Ingen registrering, ingen åtkomsttoken, ingen kontrollpanel.
Inga kvoter, inga dolda gränser, ingen debitering per kartvisning. Använd så mycket du behöver.
Kostnaden är noll oavsett trafik — tio kartvisningar eller tio miljoner.
Vi spårar inte dina besökare och använder inga kakor. Din integritetspolicy förblir lika kort som tidigare.
Fungerar bäst med MapLibre GL, men även med Leaflet och 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 levereras enbart som ES-moduler. Därför laddar dessa exempel biblioteket via en import map och ett modulskript.
npm i maplibre-gl@^6Importera det sedan i din JavaScript-kod:
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)I ett kodpaket kan MapLibre inte hitta sin worker på egen hand. Det här exemplet gäller Vite. För webpack och andra verktyg, se installationsguiden för 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>Bättre Core Web Vitals ger ofta bättre placering i sökresultaten
Använd den här laddaren för en snabbare första rendering:
// Exempel för Vite, se installationsguiden för andra paketeringsverktyg
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Laddar MapLibre GL och dess CSS först när de behövs
* @returns {Promise} Modulen MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Laddar CSS för MapLibre GL dynamiskt
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Klass för behovsstyrd laddning av MapLibre GL
* Tillhandahåller ett API som liknar maplibregl, men med behovsstyrd laddning
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Skapar en ny kartinstans och laddar MapLibre GL vid behov
* @param {Object} options - Inställningar för kartan
* @returns {Promise} En Map-instans i MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Hämtar biblioteket MapLibre GL och laddar det vid behov
* @returns {Promise} Biblioteket MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Exempel på användning:
import MapLibreLoader from './maplibre-loader.js';
// Skapa kartan först när den behövs (t.ex. vid skrollning eller användarinteraktion)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Lägg till kontroller, markörer osv.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}För avancerade funktioner och hela API:et, se dokumentationen för MapLibre GL JS
Leaflet kan inte läsa vektorkartplattor på egen hand. Kombinera det därför med tillägget 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>Tillägget stöder Leaflet 1.x — samma gratis kartplattor, utan några avgifter.
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"
/>
)
}Inget mapbox-gl, ingen åtkomsttoken — react-map-gl kommunicerar direkt med MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Kartplattor levereras via ett CDN, så kartorna visas på ett ögonblick
99,9% drifttid
OpenStreetMap-data som täcker hela världen
Några rader med MapLibre GL eller Leaflet, så är du igång
Samma uppgift — en karta på din sida. En helt annan faktura vid månadens slut.
Begränsningen, helt öppet: LFMaps ger dig kartplattor och inget annat. Geokodning, ruttplanering och stegvisa vägbeskrivningar ingår inte i tjänsten.
Ja. Det finns ingen betalversion, inget krav på betalkort och ingen faktura för användningen — oavsett trafik. LFMaps finansieras som ett sidoprojekt, precis som de andra gratisverktygen på den här sidan.
Nej. Du behöver inte registrera dig eller förnya någon åtkomsttoken. Ange en LFMaps-adress som kartstil, så fungerar det.
Inga kvoter och ingen fast anropsgräns. Vi ber bara att du inte masshämtar hela uppsättningen kartplattor — vanlig kartanvändning på en webbplats eller i en app går bra.
Ja. MapLibre GL har inbyggt stöd för att rendera vektorkartplattor och är vårt rekommenderade val, men Leaflet fungerar också med tillägget maplibre-gl-leaflet.
Från OpenStreetMap, via OpenFreeMap. Data skapas av gemenskapen, och det är just därför de kan förbli gratis.
Ja, även i kommersiella projekt. Låt källangivelsen för OpenStreetMap vara synlig på kartan — det är det enda kravet.
Nej. Vi samlar inte in personuppgifter och sätter inga kakor vid anrop för kartplattor. En karta medför därför inga tillägg i din integritetspolicy.
De erbjuder en gratisnivå och debiterar sedan per kartvisning när användningen ökar. LFMaps har ingen sådan mätare: priset är noll vid tio kartvisningar och vid tio miljoner.
Skapa harmoniska färgpaletter
Gratis lösenordsgenerator
Förkorta och anpassa länkar gratis
QR-koder som du kan ändra i efterhand
Bilder redo för sociala medier
Gör minifierad kod läsbar
Skapa .gitignore-filer enkelt
Bokningssystem för restauranger
Bokningsprogram för frisörer
Gratis favikongenerator
Gratis allergenaffisch för restauranger
Dela Markdown i snyggt format
Din restaurangmeny på nätet, gratis