Неограничени векторни картни плочки с данни от 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 модули, затова тези примери го зареждат чрез import map и модулен скрипт.
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 се финансира като страничен проект, подобно на останалите безплатни инструменти на тази страница.
Не. Няма регистрация и няма токен, който да подменяте. Задайте URL адрес на LFMaps за стила на картата си и тя ще работи.
Няма квоти или твърд лимит за честотата на заявките. Молим само да не изтегляте масово целия набор от плочки — нормалното използване на карта в сайт или приложение е напълно приемливо.
Да. MapLibre GL показва векторните плочки без допълнителни плъгини и го препоръчваме, но Leaflet също работи с плъгина maplibre-gl-leaflet.
От OpenStreetMap, предоставени чрез OpenFreeMap. Данните са създадени от общността и точно затова могат да останат безплатни.
Да, включително в търговски проекти. Оставете обозначението на OpenStreetMap като източник видимо на картата — това е единственото изискване.
Не. Не събираме лични данни и не задаваме бисквитки при заявките за плочки, така че добавянето на карта не изисква допълнения към политиката ви за поверителност.
Те предлагат безплатен план, а когато го надхвърлите, таксуват всяко зареждане на карта. При LFMaps изобщо няма таксуване според потреблението: цената е нула и при десет преглеждания, и при десет милиона.
Създавайте хармонични цветови палитри
Безплатен генератор на пароли
Безплатно съкращаване на URL адреси по ваш избор
QR кодове, които можете да редактирате по-късно
Готови изображения за публикации в социалните мрежи
Направете минифицирания си код четим
Генерирайте лесно .gitignore файлове
Система за резервации за ресторанти
Софтуер за записване на часове за фризьори
Безплатен генератор на фавикони
Безплатен плакат с алергени за ресторанти
Споделяйте Markdown с красив облик
Менюто на ресторанта ви онлайн, безплатно