Ubegrænsede vektorkortfliser baseret på OpenStreetMap-data, klar til MapLibre GL eller Leaflet. Ingen API-nøgle, ingen kvote, ingen uventet regning.
De fleste udbydere af kortfliser byder dig velkommen med gratis kredit. Så vokser trafikken, og forbrugsafregning forvandler et lille eksperiment til en mærkbar regning — uigennemskuelige tællere, udgifter for hver kortvisning og prissider, der kræver et regneark. Sådan fungerer både Google Maps og Mapbox. Det, der virkede gratis, bliver en udgift, dit projekt måske ikke har råd til.
LFMaps gør det anderledes. Gratis betyder gratis — ingen overraskelser, ingen grænser, ingen regninger.
Alt, hvad du behøver for at få et kort online. Intet overflødigt.
Indsæt flisernes URL, og kom i gang. Ingen tilmelding, intet adgangstoken, intet kontrolpanel.
Ingen kvoter, ingen skjulte grænser, ingen tæller for kortvisninger. Brug det, du har brug for.
Ingen udgifter uanset trafikken — ti kortvisninger eller ti millioner.
Vi sporer ikke dine besøgende og sætter ingen cookies. Din privatlivspolitik kan forblive lige så kort som før.
Fungerer bedst med MapLibre GL, men også med Leaflet og 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 udelukkende som ES-moduler, så eksemplerne indlæser biblioteket via et import map og et modulscript.
npm i maplibre-gl@^6Importér det derefter i din 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)I en bundle kan MapLibre ikke selv finde sin worker. Her vises løsningen til Vite; for webpack og andre værktøjer, se installationsvejledningen til 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 giver ofte bedre placeringer i søgeresultaterne
Brug denne indlæser for en lettere første visning:
// Vite-version; se installationsvejledningen for andre bundlere
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Indlæser MapLibre GL og dets CSS efter behov
* @returns {Promise} MapLibre GL-modulet
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Indlæser MapLibre GL CSS dynamisk
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Klasse til behovsstyret indlæsning af MapLibre GL
* Tilbyder en API svarende til maplibregl, men med indlæsning efter behov
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Opretter en ny kortinstans og indlæser MapLibre GL efter behov
* @param {Object} options - Indstillinger for kortet
* @returns {Promise} En MapLibre GL Map-instans
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Henter MapLibre GL-biblioteket og indlæser det efter behov
* @returns {Promise} MapLibre GL-biblioteket
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Eksempel på brug:
import MapLibreLoader from './maplibre-loader.js';
// Opret kun kortet, når det er nødvendigt (f.eks. ved rulning eller brugerinteraktion)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Tilføj kontrolelementer, markører osv.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Se avancerede funktioner og hele API'en i MapLibre GL JS-dokumentationen
Leaflet kan ikke selv læse vektorfliser, så brug det sammen med pluginet 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>Pluginet understøtter Leaflet 1.x — de samme gratis kortfliser, helt uden regninger.
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, intet adgangstoken — react-map-gl kommunikerer direkte med MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Kortfliser leveres via et CDN, så kortene vises på et øjeblik
99,9% oppetid
OpenStreetMap-data, der dækker hele verden
Et par linjer MapLibre GL eller Leaflet, og du er klar
Samme opgave — et kort på din side. En helt anden regning ved månedens udgang.
Begrænsningen skal være klar: LFMaps leverer kun kortfliser. Geokodning, ruteplanlægning og trinvis vejvisning er ikke en del af tjenesten.
Ja. Der er ingen betalingsplan, intet krav om kreditkort og ingen forbrugsregning — uanset din trafik. LFMaps finansieres som et fritidsprojekt, ligesom de andre gratis værktøjer på denne side.
Nej. Du skal ikke tilmelde dig eller udskifte tokens. Lad din kortstil pege på en LFMaps-URL, så virker det.
Der er ingen kvoter eller faste grænser for antallet af forespørgsler. Vi beder blot om, at du ikke massehenter hele flisesættet — almindelig brug af kort på en hjemmeside eller i en app er helt i orden.
Ja. MapLibre GL understøtter vektorfliser direkte og er vores anbefaling, men Leaflet fungerer også med pluginet maplibre-gl-leaflet.
Fra OpenStreetMap, leveret via OpenFreeMap. Dataene skabes af fællesskabet, og netop derfor kan de forblive gratis.
Ja, også til kommercielle projekter. Lad kildeangivelsen til OpenStreetMap være synlig på kortet — det er det eneste krav.
Nej. Vi indsamler ingen personoplysninger og sætter ingen cookies ved forespørgsler på kortfliser, så kortet kræver ingen tilføjelser til din privatlivspolitik.
De giver dig en gratis kvote og opkræver derefter betaling pr. kortvisning, når dit forbrug vokser. LFMaps har slet ingen forbrugstæller: Prisen er nul ved både ti og ti millioner kortvisninger.
Skab harmoniske farvepaletter
Gratis adgangskodegenerator
Gratis URL-forkorter med egne links
QR-koder, du kan redigere senere
Billeder klar til sociale medier
Gør din minificerede kode læsbar
Generér nemt .gitignore-filer
Bookingsystem til restauranter
Bookingsoftware til frisører
Gratis favicon-generator
Gratis allergenplakat til restauranter
Del Markdown med flot formatering
Dit restaurantmenukort online, helt gratis