Ubegrenset med vektorfliser basert på OpenStreetMap-data, klare til bruk i MapLibre GL eller Leaflet. Ingen API-nøkkel, ingen kvoter, ingen uventede regninger.
De fleste leverandører av kartfliser lokker med gratis bruk i starten. Så øker trafikken, og bruksbasert prising gjør et lite eksperiment til en merkbar utgift — med uoversiktlige målere, gebyrer for hver kartvisning og prissider du trenger et regneark for å forstå. Slik fungerer både Google Maps og Mapbox. Det som virket gratis, blir en kostnad prosjektet ditt kanskje ikke har råd til.
LFMaps er annerledes. Gratis betyr gratis — uten overraskelser, begrensninger eller regninger.
Alt du trenger for å få kartet på plass. Uten noe overflødig.
Lim inn URL-en til kartflisene, så er du i gang. Ingen registrering, tilgangstoken eller kontrollpanel.
Ingen kvoter, veiledende grenser eller måling av kartvisninger. Bruk det du trenger.
Ingen kostnader, uansett trafikk — ti kartvisninger eller ti millioner.
Vi sporer ikke besøkende og bruker ingen informasjonskapsler. Personvernerklæringen din forblir like kort som før.
Fungerer best med MapLibre GL, og også med Leaflet eller 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 leveres bare som ES-moduler, så disse eksemplene laster det inn med et importkart og et modulskript.
npm i maplibre-gl@^6Importer det deretter i JavaScript-koden din:
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)Når MapLibre er pakket i en kodepakke, finner det ikke worker-filen på egen hånd. Dette er fremgangsmåten for Vite; for webpack og andre verktøy, se installasjonsveiledningen for 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>Bedre Core Web Vitals gir ofte bedre plassering i søkeresultatene
Bruk denne lasteren for raskere første visning:
// Fremgangsmåte for Vite; se installasjonsveiledningen for andre pakkeverktøy
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Laster inn MapLibre GL og tilhørende CSS ved behov
* @returns {Promise} MapLibre GL-modulen
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Laster inn MapLibre GL CSS dynamisk
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Klasse for innlasting av MapLibre GL ved behov
* Tilbyr et API som ligner på maplibregl, men med innlasting ved behov
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Oppretter en ny kartinstans og laster inn MapLibre GL ved behov
* @param {Object} options - Konfigurasjonsvalg for kartet
* @returns {Promise} En Map-instans fra MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Henter MapLibre GL-biblioteket og laster det inn ved behov
* @returns {Promise} MapLibre GL-biblioteket
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Eksempel på bruk:
import MapLibreLoader from './maplibre-loader.js';
// Opprett kartet først når det trengs (f.eks. ved rulling eller brukerhandling)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Legg til kontroller, markører osv.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}For avanserte funksjoner og hele API-et, se dokumentasjonen for MapLibre GL JS
Leaflet kan ikke lese vektorfliser på egen hånd, så bruk det sammen med utvidelsen 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>Utvidelsen støtter Leaflet 1.x — de samme gratis kartflisene, uten regningene.
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"
/>
)
}Ingen mapbox-gl, ingen tilgangstoken — react-map-gl kommuniserer direkte med MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Kartfliser leveres via et CDN, så kartet vises på et øyeblikk
99,9% oppetid
OpenStreetMap-data som dekker hele verden
Noen få linjer med MapLibre GL eller Leaflet, så er kartet på plass
Samme oppgave — et kart på nettsiden din. En helt annen regning ved månedsslutt.
Begrensningen er enkel: LFMaps tilbyr kartfliser og ingenting annet. Geokoding, ruteberegning og trinnvise veibeskrivelser er ikke en del av tjenesten.
Ja. Ingen betalingsplan, ingen kredittkort og ingen regning for bruk — uansett hvor mye trafikk du har. LFMaps finansieres som et sideprosjekt, på samme måte som de andre gratisverktøyene på denne siden.
Nei. Du trenger ikke registrere deg eller fornye noe token. Bruk en LFMaps-URL som kartstil, så fungerer det.
Ingen kvoter og ingen fast grense for antall forespørsler. Vi ber bare om at du ikke laster ned hele flisesettet automatisk — vanlig kartbruk på en nettside eller i en app er helt greit.
Ja. MapLibre GL støtter vektorflisene direkte og er det vi anbefaler, men Leaflet fungerer også med utvidelsen maplibre-gl-leaflet.
Fra OpenStreetMap, levert gjennom OpenFreeMap. Dataene er laget av fellesskapet, og det er nettopp derfor de kan forbli gratis.
Ja, også i kommersielle prosjekter. La krediteringen av OpenStreetMap være synlig på kartet — det er det eneste kravet.
Nei. Vi samler ikke inn personopplysninger og setter ingen informasjonskapsler ved forespørsler om kartfliser. Dermed trenger du ikke legge til noe i personvernerklæringen når du legger til et kart.
De tilbyr gratis bruk opp til en viss grense og tar deretter betalt per kartvisning når bruken øker. LFMaps har ingen slik måler: prisen er null ved både ti og ti millioner kartvisninger.
Lag harmoniske fargepaletter
Gratis passordgenerator
Gratis URL-forkorter med tilpassede lenker
QR-koder du kan redigere senere
Bilder klare for innlegg i sosiale medier
Gjør minifisert kode lesbar
Generer .gitignore-filer enkelt
Bordbestillingssystem for restauranter
Timebestillingssystem for frisører
Gratis favicon-generator
Gratis allergenplakat for restauranter
Del Markdown i pen innpakning
Restaurantmenyen din på nett, helt gratis