Ótakmarkaðar vigurkortaflísar byggðar á gögnum OpenStreetMap, tilbúnar í MapLibre GL eða Leaflet. Enginn API-lykill, engir kvótar og engir óvæntir reikningar.
Flestir veitendur kortaflísa bjóða þig velkominn með ókeypis inneign. Svo eykst umferðin og notkunargjöld breyta lítilli tilraun í verulegan reikning — óskýrir mælar, gjöld sem hækka við hverja kortahleðslu og verðskrár sem þarf töflureikni til að skilja. Bæði Google Maps og Mapbox virka þannig. Það sem virtist ókeypis verður að kostnaði sem verkefnið þitt þarf kannski ekki á að halda.
LFMaps fer aðra leið. Ókeypis þýðir ókeypis — ekkert óvænt, engin þök og engir reikningar.
Allt sem þarf til að birta kort. Ekkert umfram það.
Settu inn slóðina á flísarnar og byrjaðu. Engin skráning, enginn aðgangstóki og ekkert stjórnborð.
Engir kvótar, engin viðmiðunarmörk og engin gjöld á hverja kortahleðslu. Notaðu það sem þú þarft.
Enginn kostnaður, óháð umferð — hvort sem kortið er skoðað tíu sinnum eða tíu milljón sinnum.
Við rekjum ekki gestina þína og setjum engar vefkökur. Persónuverndarstefnan þín helst jafn stutt og áður.
Virkar best með MapLibre GL, en líka með 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 kemur eingöngu sem ES-einingar, svo þessi dæmi hlaða því með import map og einingaforskrift.
npm i maplibre-gl@^6Flyttu það svo inn í JavaScript-kóðann þinn:
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)Í kóðavöndli finnur MapLibre ekki vinnsluþráðinn sinn sjálft. Hér er útfærslan fyrir Vite; fyrir webpack og aðra vöndlara, sjá uppsetningarleiðbeiningar 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>Betri Core Web Vitals leiða oft til betri stöðu í leitarniðurstöðum
Notaðu þennan hleðslukóða til að flýta fyrstu birtingu:
// Útfærsla fyrir Vite; sjá uppsetningarleiðbeiningar fyrir aðra vöndlara
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Hleður MapLibre GL og CSS þess eftir þörfum
* @returns {Promise} MapLibre GL-einingin
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Hleður CSS fyrir MapLibre GL eftir þörfum
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Klasi fyrir hleðslu MapLibre GL eftir þörfum
* Býður upp á API svipað maplibregl en hleður eftir þörfum
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Býr til nýtt kortatilvik og hleður MapLibre GL ef þörf krefur
* @param {Object} options - Stillingar kortsins
* @returns {Promise} Tilvik af MapLibre GL Map
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Sækir MapLibre GL-safnið og hleður því ef þörf krefur
* @returns {Promise} MapLibre GL-safnið
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Dæmi um notkun:
import MapLibreLoader from './maplibre-loader.js';
// Búðu aðeins til kort þegar þess er þörf (t.d. við skrun eða aðgerð notanda)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Bættu við stjórntækjum, merkjum o.s.frv.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Ítarlegri eiginleikar og allt API-viðmótið eru í leiðbeiningum MapLibre GL JS
Leaflet getur ekki lesið vigurkortaflísar eitt og sér, svo notaðu maplibre-gl-leaflet-viðbótina með því:
<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>Viðbótin styður Leaflet 1.x — sömu ókeypis flísarnar, engir reikningar.
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"
/>
)
}Ekkert mapbox-gl, enginn aðgangstóki — react-map-gl tengist beint við MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Flísar eru afhentar af CDN, svo kortin birtast á augabragði
99.9% uppitími
Gögn OpenStreetMap ná yfir allan heiminn
Nokkrar línur af MapLibre GL eða Leaflet og kortið er komið í loftið
Sama verkefni — kort á síðunni þinni. Allt annar reikningur í lok mánaðarins.
Takmörkin í hnotskurn: LFMaps veitir aðeins kortaflísar. Hnitun heimilisfanga, leiðaval og akstursleiðbeiningar eru ekki hluti af þjónustunni.
Já. Engin gjaldskyld áskrift, ekkert greiðslukort og enginn notkunarreikningur — óháð umferðinni þinni. LFMaps er fjármagnað sem hliðarverkefni, rétt eins og önnur ókeypis verkfæri á þessari síðu.
Nei. Þú þarft hvorki að skrá þig né endurnýja aðgangstóka. Beindu kortastílnum þínum á LFMaps-slóð og þá virkar það.
Engir kvótar og engin föst mörk á tíðni beiðna. Við biðjum aðeins um að þú sækir ekki allt flísasafnið með fjöldasöfnun — venjuleg kortanotkun á vefsíðu eða í appi er í lagi.
Já. MapLibre GL birtir vigurkortaflísarnar beint og er það sem við mælum með, en Leaflet virkar líka með maplibre-gl-leaflet-viðbótinni.
Frá OpenStreetMap, afhent í gegnum OpenFreeMap. Gögnin eru unnin af samfélaginu og einmitt þess vegna geta þau verið áfram ókeypis.
Já, líka í atvinnuverkefnum. Haltu tilvísuninni til OpenStreetMap sýnilegri á kortinu — það er eina skilyrðið.
Nei. Við söfnum engum persónuupplýsingum og setjum engar vefkökur við flísabeiðnir, svo það að bæta við korti bætir engu við persónuverndarstefnuna þína.
Þau bjóða ókeypis notkun upp að ákveðnu marki og rukka síðan fyrir hverja kortahleðslu þegar umferðin eykst. LFMaps hefur engan notkunarmæli: verðið er núll hvort sem kortið er skoðað tíu sinnum eða tíu milljón sinnum.
Búðu til samræmdar litatöflur
Ókeypis lykilorðasmiður
Sérsniðnar styttar slóðir, ókeypis
QR-kóðar sem þú getur breytt síðar
Myndir tilbúnar fyrir samfélagsmiðla
Gerðu þjappaðan kóða læsilegan
Búðu auðveldlega til .gitignore-skrár
Bókunarkerfi fyrir veitingastaði
Bókunarhugbúnaður fyrir hárgreiðslustofur
Ókeypis smíði vefsíðutákna
Ókeypis ofnæmisvakaspjald fyrir veitingastaði
Deildu Markdown á fallegan hátt
Matseðill veitingastaðarins á netinu, ókeypis