Neierobežotas vektoru karšu flīzes no OpenStreetMap datiem, gatavas lietošanai ar MapLibre GL vai Leaflet. Bez API atslēgas, kvotām un negaidītiem rēķiniem.
Vairums karšu flīžu pakalpojumu sākumā piedāvā bezmaksas kredītus. Tad apmeklējums pieaug, un maksa pēc patēriņa pārvērš nelielu eksperimentu īstā rēķinā: neskaidri patēriņa skaitītāji, izmaksas par katru kartes ielādi un cenrāži, kuru izprašanai vajadzīga izklājlapa. Tā darbojas gan Google Maps, gan Mapbox. Tas, kas šķita bezmaksas, kļūst par izdevumiem, kurus jūsu projekts varbūt nevēlas.
LFMaps ir citāds. Bez maksas nozīmē bez maksas — bez pārsteigumiem, ierobežojumiem un rēķiniem.
Viss, kas vajadzīgs kartes ieviešanai. Nekā lieka.
Ievietojiet flīžu URL un sāciet lietot. Bez reģistrācijas, piekļuves pilnvarām un vadības paneļa.
Bez kvotām, slēptiem ierobežojumiem un maksas par katru kartes ielādi. Lietojiet, cik nepieciešams.
Nekādu izmaksu neatkarīgi no apmeklējuma — desmit kartes skatījumi vai desmit miljoni.
Mēs neizsekojam jūsu apmeklētājus un neiestatām sīkdatnes. Jūsu privātuma politika paliek tikpat īsa kā iepriekš.
Vislabāk darbojas ar MapLibre GL, bet der arī Leaflet un 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 ir pieejams tikai ES moduļu formātā, tāpēc šajos piemēros ielādei izmantota importēšanas karte un moduļa skripts.
npm i maplibre-gl@^6Pēc tam importējiet savā JavaScript kodā:
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)Komplektā MapLibre nevar patstāvīgi atrast savu darbinieka moduli. Šis ir Vite piemērs; par webpack un citiem rīkiem skatiet MapLibre instalēšanas ceļvedi.
<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>Labāki Core Web Vitals rādītāji bieži palīdz iegūt augstāku vietu meklēšanas rezultātos
Ātrākai sākotnējai attēlošanai izmantojiet šo ielādētāju:
// Vite piemērs; citiem komplektēšanas rīkiem skatiet instalēšanas ceļvedi
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Ielādē MapLibre GL un tā CSS tikai tad, kad nepieciešams
* @returns {Promise} MapLibre GL modulis
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Dinamiski ielādē MapLibre GL CSS
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* MapLibre GL atliktās ielādes klase
* Nodrošina maplibregl līdzīgu API ar atlikto ielādi
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Izveido jaunu kartes instanci, vajadzības gadījumā ielādējot MapLibre GL
* @param {Object} options - Kartes konfigurācijas opcijas
* @returns {Promise} MapLibre GL Map instance
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Iegūst MapLibre GL bibliotēku, vajadzības gadījumā to ielādējot
* @returns {Promise} MapLibre GL bibliotēka
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Lietošanas piemērs:
import MapLibreLoader from './maplibre-loader.js';
// Izveido karti tikai pēc vajadzības (piemēram, ritinot vai lietotājam mijiedarbojoties)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Pievieno vadīklas, marķierus u. c.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Papildu iespējas un pilnu API skatiet MapLibre GL JS dokumentācijā
Leaflet pats nevar nolasīt vektoru flīzes, tāpēc izmantojiet to kopā ar maplibre-gl-leaflet spraudni:
<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>Spraudnis atbalsta Leaflet 1.x — tās pašas bezmaksas flīzes bez jebkādiem rēķiniem.
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"
/>
)
}Bez mapbox-gl un piekļuves pilnvaras — react-map-gl sazinās tieši ar MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Flīzes tiek piegādātas no CDN, tāpēc kartes parādās acumirklī
99.9% darbspējas laiks
OpenStreetMap dati par visu pasauli
Dažas MapLibre GL vai Leaflet koda rindas, un karte darbojas
Uzdevums tas pats — karte jūsu lapā. Rēķins mēneša beigās pavisam cits.
Godīgi par ierobežojumiem: LFMaps nodrošina tikai karšu flīzes. Ģeokodēšana, maršrutu plānošana un navigācijas norādes nav iekļautas pakalpojumā.
Jā. Nav maksas plāna, nav vajadzīga kredītkarte un nav rēķinu par lietošanu neatkarīgi no apmeklējuma. LFMaps tiek finansēts kā blakusprojekts, tāpat kā pārējie šajā lapā pieejamie bezmaksas rīki.
Nē. Nekur nav jāreģistrējas un nav piekļuves pilnvaru, kas jāmaina. Norādiet kartes stilam LFMaps URL, un tas darbosies.
Nav kvotu un stingra pieprasījumu biežuma ierobežojuma. Lūdzam vienīgi masveidā nelejupielādēt visu flīžu kopu — parasta kartes lietošana vietnē vai lietotnē ir pieļaujama.
Jā. MapLibre GL atbalsta vektoru flīžu attēlošanu bez papildinājumiem, tāpēc to iesakām, taču darbojas arī Leaflet kopā ar maplibre-gl-leaflet spraudni.
No OpenStreetMap, izmantojot OpenFreeMap. Datus veido kopiena, un tieši tāpēc tie var palikt bez maksas.
Jā, arī komerciālos projektos. Kartē saglabājiet redzamu OpenStreetMap autorības norādi — tā ir vienīgā prasība.
Nē. Flīžu pieprasījumos mēs nevācam personas datus un neiestatām sīkdatnes, tāpēc kartes pievienošana neprasa papildināt privātuma politiku.
Tie piedāvā bezmaksas plānu, bet, apmeklējumam pieaugot, iekasē maksu par katru kartes ielādi. LFMaps patēriņu neuzskaita: gan desmit, gan desmit miljoni kartes skatījumu maksā nulli.
Veidojiet saskanīgas krāsu paletes
Bezmaksas paroļu ģenerators
Bezmaksas URL saīsinātājs ar pielāgotām saitēm
QR kodi, kurus vēlāk var rediģēt
Attēli sociālo tīklu ierakstiem
Padariet minificētu kodu atkal lasāmu
Viegli ģenerējiet .gitignore failus
Restorānu rezervāciju sistēma
Pierakstu pārvaldības programma frizieriem
Bezmaksas vietņu ikonu ģenerators
Bezmaksas alergēnu plakāts restorāniem
Dalieties ar Markdown skaistā noformējumā
Jūsu restorāna ēdienkarte tiešsaistē bez maksas