Piiramatult OpenStreetMapi andmetel põhinevaid vektorkaardi paane, mis sobivad kohe MapLibre GL-i või Leafletiga. Ilma API-võtme, kvootide ja ootamatute arveteta.
Enamik kaardipaanide pakkujaid tervitab sind tasuta kasutusmahuga. Siis liiklus kasvab ja kasutuspõhine hinnastus muudab väikese katsetuse arvestatavaks kuluks: segased mõõdikud, iga kaardi laadimisega kasvavad tasud ja hinnakirjad, mille mõistmiseks on vaja arvutustabelit. Nii toimivad nii Google Maps kui ka Mapbox. Tasuta tundunud teenusest saab kulu, mida sinu projekt ei pruugi soovida.
LFMaps on teistsugune. Tasuta tähendab tasuta: ei üllatusi, ülempiire ega arveid.
Kõik, mida vajad kaardi avaldamiseks. Ei midagi üleliigset.
Lisa kaardipaanide URL ja alusta. Ei registreerimist, juurdepääsutõendeid ega halduspaneeli.
Ei kvoote, varjatud piiranguid ega kaardi laadimiste loendurit. Kasuta nii palju, kui vajad.
Nullkulu iga külastuste arvu juures, olgu kaardivaatamisi kümme või kümme miljonit.
Me ei jälgi sinu külastajaid ega salvesta küpsiseid. Sinu privaatsusteade jääb sama lühikeseks kui enne.
Sobib kõige paremini MapLibre GL-iga, aga ka Leafleti ja Reactiga
<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 on saadaval ainult ES-moodulitena, seega laadivad need näited selle impordikaardi ja moodulskripti abil.
npm i maplibre-gl@^6Seejärel impordi see oma JavaScripti:
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)Pakendatud koodis ei leia MapLibre oma töötluslõime ise üles. See on Vite'i näide; webpacki ja muude tööriistade kohta vaata MapLibre'i paigaldusjuhendit.
<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>Paremad Core Web Vitalsi näitajad tähendavad sageli paremat kohta otsingutulemustes
Kasuta seda laadijat, et esmane kuva oleks kergem:
// Vite'i näide; muude pakendustööriistade kohta vaata paigaldusjuhendit
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Laadib MapLibre GL-i ja selle CSS-i vajaduse korral
* @returns {Promise} MapLibre GL-i moodul
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Laadib MapLibre GL-i CSS-i dünaamiliselt
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* MapLibre GL-i vajaduspõhise laadija klass
* Pakub maplibregl-iga sarnast API-t koos vajaduspõhise laadimisega
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Loob uue kaardi, laadides vajaduse korral MapLibre GL-i
* @param {Object} options - Kaardi seadistusvalikud
* @returns {Promise} MapLibre GL-i kaardiobjekt
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Hangib MapLibre GL-i teegi, laadides selle vajaduse korral
* @returns {Promise} MapLibre GL-i teek
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Kasutusnäide:
import MapLibreLoader from './maplibre-loader.js';
// Loo kaart alles vajaduse korral (nt kerimisel või kasutaja tegevusel)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Lisa juhtelemendid, markerid jne
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Lisavõimaluste ja täieliku API kohta vaata MapLibre GL JS-i dokumentatsiooni
Leaflet ei oska vektorkaardi paane iseseisvalt lugeda, seega lisa maplibre-gl-leaflet plugin:
<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>Plugin toetab Leaflet 1.x-i: samad tasuta kaardipaanid, ilma arveteta.
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"
/>
)
}Ei mapbox-gl-i ega juurdepääsutõendeid: react-map-gl suhtleb otse MapLibre GL-iga.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Kaardipaanid jõuavad kohale CDN-i kaudu, nii et kaart ilmub silmapilkselt
99.9% käideldavus
OpenStreetMapi andmed kogu maailma kohta
Mõni rida MapLibre GL-i või Leafleti koodi ja kaart ongi valmis
Sama eesmärk: kaart sinu lehel. Kuu lõpus on arve aga hoopis teistsugune.
Ausalt piirangutest: LFMaps pakub ainult kaardipaane. Geokodeerimine, teekonna planeerimine ja pöördehaaval navigeerimine ei kuulu teenuse juurde.
Jah. Pole tasulist paketti, krediitkaardi nõuet ega kasutusarvet, olenemata külastuste arvust. LFMapsi rahastatakse kõrvalprojektina nagu teisigi selle lehe tasuta tööriistu.
Ei. Registreeruda pole vaja ja juurdepääsutõendeid pole vaja vahetada. Määra kaardistiili aadressiks LFMapsi URL ja see töötab.
Kvoote ega ranget päringusageduse piirangut pole. Palume vaid, et sa ei laadiks automaatselt alla kogu kaardipaanide komplekti. Tavapärane kaardikasutus veebilehel või rakenduses sobib hästi.
Jah. MapLibre GL kuvab vektorkaardi paane otse ja on meie soovitus, kuid Leaflet töötab samuti maplibre-gl-leaflet pluginaga.
OpenStreetMapist OpenFreeMapi kaudu. Andmed on loonud kogukond ja just seetõttu saavadki need tasuta olla.
Jah, ka äriprojektides. Hoia OpenStreetMapi allikaviide kaardil nähtavana: see on ainus nõue.
Ei. Me ei kogu isikuandmeid ega salvesta kaardipaanide päringutega küpsiseid, seega ei lisa kaart sinu privaatsusteatele midagi juurde.
Need pakuvad tasuta algmahtu ning hakkavad kasutuse kasvades iga kaardi laadimise eest tasu küsima. LFMapsil pole üldse loendurit: hind on null nii kümne kui ka kümne miljoni kaardivaatamise korral.
Loo harmoonilisi värvipalette
Tasuta parooligeneraator
Tasuta kohandatav URL-ide lühendaja
QR-koodid, mida saad hiljem muuta
Pildid sotsiaalmeediapostituste jaoks
Muuda minimeeritud kood loetavaks
Loo hõlpsalt .gitignore-faile
Restorani broneerimissüsteem
Broneerimistarkvara juuksuritele
Tasuta faviconi generaator
Tasuta allergeeniplakat restoranidele
Jaga Markdowni kaunilt
Sinu restorani menüü veebis, tasuta