Korlátlan vektoros térképcsempék OpenStreetMap-adatokból, közvetlenül használhatók MapLibre GL-lel vagy Leaflettel. API-kulcs, kvóta és váratlan számlák nélkül.
A legtöbb térképcsempe-szolgáltató ingyenes kerettel csábít. Aztán nő a forgalom, és a használatalapú számlázás valódi költséggé változtatja a kis kísérletet: átláthatatlan elszámolás, minden térképbetöltéssel növekvő díjak és táblázatkezelőt igénylő árlisták. A Google Maps és a Mapbox is így működik. Ami ingyenesnek tűnt, végül nem kívánt kiadást jelenthet a projektednek.
Az LFMaps másképp működik. Az ingyenes tényleg ingyenes: meglepetések, korlátok és számlák nélkül.
Minden, ami egy térkép elindításához kell. Felesleges extrák nélkül.
Add meg a csempék URL-jét, és indulhat is. Regisztráció, hozzáférési token és vezérlőpult nélkül.
Nincsenek kvóták, rejtett korlátok vagy térképbetöltésenkénti díjak. Használj annyit, amennyire szükséged van.
Nulla költség bármilyen forgalom mellett: tíz vagy tízmillió térképmegtekintésnél is.
Nem követjük a látogatóidat, és nem helyezünk el sütiket. Az adatkezelési tájékoztatód ugyanolyan rövid maradhat.
MapLibre GL-lel működik a legjobban, de Leaflettel és Reacttel is használható
<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>A MapLibre GL v6 kizárólag ES-modulokként érhető el, ezért ezek a példák importtérképpel és modulszkripttel töltik be.
npm i maplibre-gl@^6Ezután importáld a JavaScript-kódodban:
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)A csomagolt kódban a MapLibre nem találja meg automatikusan a workerét. Ez a Vite-hoz használható megoldás; a webpack és más eszközök esetén lásd ezt az útmutatót: A MapLibre telepítési útmutatója.
<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>A jobb Core Web Vitals mutatók gyakran jobb keresési helyezést jelentenek
Ezzel a betöltővel gyorsabb lehet az első megjelenítés:
// Vite-hoz használható megoldás; más csomagolókhoz lásd a telepítési útmutatót
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Szükség esetén késleltetve tölti be a MapLibre GL-t és a hozzá tartozó CSS-t
* @returns {Promise} A MapLibre GL modul
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Dinamikusan tölti be a MapLibre GL CSS-ét
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Osztály a MapLibre GL késleltetett betöltéséhez
* A maplibregl-hez hasonló API-t biztosít késleltetett betöltéssel
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Új térképpéldányt hoz létre, szükség esetén késleltetve betöltve a MapLibre GL-t
* @param {Object} options - A térkép beállításai
* @returns {Promise} Egy MapLibre GL Map-példány
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Visszaadja a MapLibre GL könyvtárat, szükség esetén késleltetve betöltve azt
* @returns {Promise} A MapLibre GL könyvtár
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Használati példa:
import MapLibreLoader from './maplibre-loader.js';
// Csak szükség esetén hozd létre a térképet, például görgetéskor vagy felhasználói műveletre
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Vezérlők, jelölők és egyéb elemek hozzáadása
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}A haladó funkciókat és a teljes API-t itt találod: A MapLibre GL JS dokumentációja
A Leaflet önmagában nem tudja olvasni a vektoros csempéket, ezért használd a maplibre-gl-leaflet bővítménnyel:
<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>A bővítmény a Leaflet 1.x verzióját támogatja: ugyanazok az ingyenes csempék, számlázás nélkül.
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"
/>
)
}Nem kell mapbox-gl vagy hozzáférési token: a react-map-gl közvetlenül a MapLibre GL-lel kommunikál.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
A CDN-ről érkező csempékkel a térképek egy szempillantás alatt megjelennek
99,9% rendelkezésre állás
Az egész világot lefedő OpenStreetMap-adatok
Néhány sor MapLibre GL- vagy Leaflet-kód, és már működik is
Ugyanaz a feladat: térkép az oldaladon. Egészen más számla a hónap végén.
A korlátokról őszintén: az LFMaps térképcsempéket biztosít, mást nem. A geokódolás, az útvonaltervezés és a navigáció nem része a szolgáltatásnak.
Igen. Nincs fizetős csomag, nincs szükség bankkártyára, és használati díj sincs, bármekkora a forgalmad. Az LFMaps finanszírozása mellékprojektként történik, akárcsak az oldalon található többi ingyenes eszközé.
Nem. Nincs regisztráció és rendszeresen cserélendő token. Állítsd a térképstílusod címét egy LFMaps URL-re, és már működik is.
Nincs kvóta vagy szigorú lekérési sebességkorlát. Csak azt kérjük, hogy ne töltsd le automatizáltan a teljes csempekészletet. A szokásos weboldalas vagy alkalmazáson belüli térképhasználat rendben van.
Igen. A MapLibre GL natívan jeleníti meg a vektoros csempéket, ezért ezt ajánljuk, de a Leaflet is használható a maplibre-gl-leaflet bővítménnyel.
Az OpenStreetMapből, az OpenFreeMap közvetítésével. Az adatokat a közösség készíti, és éppen ezért maradhatnak ingyenesek.
Igen, üzleti projektekben is. Az OpenStreetMap forrásmegjelölését tartsd láthatóan a térképen: ez az egyetlen feltétel.
Nem. Nem gyűjtünk személyes adatokat, és nem helyezünk el sütiket a csempelekéréseknél, így a térkép hozzáadása nem bővíti az adatkezelési tájékoztatódat.
Ezek ingyenes keretet kínálnak, majd annak túllépése után térképbetöltésenként számláznak. Az LFMaps egyáltalán nem méri a fizetendő használatot: az ár tíz térképmegtekintésnél és tízmilliónál is nulla.
Harmonikus színpaletták készítése
Ingyenes jelszógenerátor
Egyéni URL-rövidítő, ingyen
Később is szerkeszthető QR-kódok
Közösségi bejegyzésekhez kész képek
Minifikált kód olvashatóvá tétele
.gitignore fájlok egyszerű készítése
Éttermi asztalfoglalási rendszer
Időpontfoglaló szoftver fodrászoknak
Ingyenes favicongenerátor
Ingyenes allergéntájékoztató plakát éttermeknek
Oszd meg a Markdown-szövegeidet szép formában
Éttermi étlapod online, ingyen