Неограничене векторске плочице карте засноване на подацима OpenStreetMap, спремне за MapLibre GL или Leaflet. Без API кључа, квота и неочекиваних рачуна.
Већина добављача плочица карте привуче вас бесплатним кредитима. Затим посећеност расте, а наплата према потрошњи претвара мали експеримент у озбиљан трошак: нејасни обрачуни, цене које расту са сваким учитавањем карте и ценовници за које вам треба табела. Тако раде и Google Maps и Mapbox. Оно што је деловало бесплатно постаје трошак који вашем пројекту можда не одговара.
LFMaps је другачији. Бесплатно заиста значи бесплатно: без изненађења, ограничења и рачуна.
Све што вам треба да објавите карту. Без сувишних ствари.
Унесите URL плочица и почните. Без регистрације, приступног токена и контролне табле.
Без квота, скривених ограничења и обрачуна по учитавању карте. Користите колико вам треба.
Без трошкова при свакој посећености: од десет до десет милиона приказа карте.
Не пратимо ваше посетиоце и не постављамо колачиће. Ваша политика приватности остаје једнако кратка.
Најбоље ради уз MapLibre GL, а подржани су и Leaflet и 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 доступан је само као ES модули, па га ови примери учитавају помоћу мапе увоза и модулске скрипте.
npm i maplibre-gl@^6Затим га увезите у свој 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)Унутар пакета MapLibre не може сам да пронађе свој worker. Ово је облик за Vite; за webpack и друге алате погледајте упутство за инсталацију 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>Бољи Core Web Vitals показатељи често значе бољу позицију у претрази
Користите овај учитавач за бржи први приказ:
// Облик за Vite; за друге алате за паковање погледајте упутство за инсталацију
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Одложено учитава MapLibre GL и његов CSS када затребају
* @returns {Promise} Модул MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Динамички учитава CSS за MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Класа за одложено учитавање MapLibre GL
* Нуди API сличан објекту maplibregl, али са одложеним учитавањем
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Прави нову инстанцу карте и по потреби одложено учитава MapLibre GL
* @param {Object} options - Опције подешавања карте
* @returns {Promise} Инстанца објекта Map из библиотеке MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Преузима библиотеку MapLibre GL и по потреби је одложено учитава
* @returns {Promise} Библиотека MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Пример употребе:
import MapLibreLoader from './maplibre-loader.js';
// Направите карту тек када затреба (нпр. при померању странице или радњи корисника)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Додајте контроле, маркере итд.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}За напредне могућности и потпун API погледајте документацију за MapLibre GL JS
Leaflet не може сам да чита векторске плочице, па га повежите са додатком 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>Додатак подржава Leaflet 1.x: исте бесплатне плочице, без наплате.
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"
/>
)
}Без mapbox-gl и приступног токена: react-map-gl комуницира директно са MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Плочице се испоручују преко CDN мреже, па се карте приказују за трен
Доступност 99,9%
Подаци OpenStreetMap покривају цео свет
Неколико редова кода за MapLibre GL или Leaflet и карта је спремна
Исти задатак: карта на вашој страници. Сасвим другачији рачун на крају месеца.
Искрено о ограничењима: LFMaps пружа само плочице карте. Геокодирање, израчунавање рута и детаљна навигациона упутства нису део услуге.
Да. Нема плаћеног пакета, кредитне картице ни рачуна за потрошњу, без обзира на посећеност. LFMaps се финансира као споредни пројекат, баш као и други бесплатни алати на овој страници.
Не. Нема регистрације ни токена који треба редовно мењати. Поставите LFMaps URL као стил карте и све ради.
Нема квота ни строгог ограничења броја захтева. Молимо само да не преузимате масовно цео скуп плочица. Уобичајена употреба карте на сајту или у апликацији је сасвим у реду.
Да. MapLibre GL изворно приказује векторске плочице и њега препоручујемо, али и Leaflet ради уз додатак maplibre-gl-leaflet.
Из OpenStreetMap, преко OpenFreeMap. Податке ствара заједница и управо зато могу да остану бесплатни.
Да, дозвољени су и комерцијални пројекти. Једини услов је да навођење извора OpenStreetMap остане видљиво на карти.
Не. Не прикупљамо личне податке и не постављамо колачиће при захтевима за плочице, па додавање карте не проширује вашу политику приватности.
Они нуде бесплатан пакет, а затим наплаћују свако учитавање карте када посећеност порасте. LFMaps уопште нема такав обрачун: цена је нула и за десет и за десет милиона приказа карте.
Направите складне палете боја
Бесплатан генератор лозинки
Бесплатно скраћивање URL адреса по вашој мери
QR кодови које можете накнадно да измените
Слике спремне за објаве на друштвеним мрежама
Учините минификовани код читљивим
Лако направите .gitignore датотеке
Систем за резервације у ресторанима
Софтвер за заказивање у фризерским салонима
Бесплатан генератор фавикона
Бесплатан постер са алергенима за ресторане
Делите Markdown у лепом издању
Јеловник вашег ресторана на интернету, бесплатно