Необмежені векторні тайли карт на основі даних OpenStreetMap, готові до роботи з MapLibre GL або Leaflet. Без ключа API, квот і несподіваних рахунків.
Більшість постачальників тайлів карт вітають вас безкоштовним лімітом. Потім відвідуваність зростає, і оплата за використання перетворює невеликий експеримент на відчутні витрати: незрозумілі лічильники, плата за кожне завантаження карти й тарифи, для розрахунку яких потрібна таблиця. Так працюють і Google Maps, і Mapbox. Те, що здавалося безкоштовним, стає витратою, яка вашому проєкту може бути ні до чого.
У LFMaps усе інакше. Безкоштовно означає безкоштовно: без сюрпризів, обмежень і рахунків.
Усе необхідне для запуску карти. Нічого зайвого.
Додайте URL тайлів — і все готово. Без реєстрації, токенів доступу й панелі керування.
Без квот, прихованих лімітів і плати за завантаження карти. Використовуйте стільки, скільки потрібно.
Жодних витрат за будь-якої відвідуваності: хоч десять переглядів карти, хоч десять мільйонів.
Ми не відстежуємо ваших відвідувачів і не встановлюємо файлів cookie. Ваша політика конфіденційності залишається такою ж короткою.
Найкраще працює з 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 фінансується як побічний проєкт, як і решта безкоштовних інструментів на цій сторінці.
Ні. Реєструватися не потрібно, а токени не доведеться оновлювати. Просто вкажіть URL LFMaps як адресу стилю карти — і все працює.
Немає ані квот, ані жорсткого обмеження частоти запитів. Просимо лише не завантажувати масово весь набір тайлів. Звичайне використання карти на сайті чи в застосунку цілком прийнятне.
Так. MapLibre GL відображає векторні тайли без додаткових засобів, тому ми рекомендуємо саме його. Leaflet також працює з плагіном maplibre-gl-leaflet.
З OpenStreetMap через OpenFreeMap. Дані створює спільнота — саме тому вони можуть залишатися безкоштовними.
Так, зокрема й у комерційних проєктах. Залиште зазначення авторства OpenStreetMap видимим на карті — це єдина вимога.
Ні. Ми не збираємо персональних даних і не встановлюємо файлів cookie під час запитів тайлів, тож додавання карти не потребує змін у вашій політиці конфіденційності.
Ці сервіси надають безкоштовний ліміт, а коли ви його перевищуєте, стягують плату за кожне завантаження карти. У LFMaps узагалі немає лічильника: ціна дорівнює нулю і за десять переглядів, і за десять мільйонів.
Створюйте гармонійні палітри кольорів
Безкоштовний генератор паролів
Безкоштовне скорочення посилань із власною адресою
QR-коди, які можна редагувати згодом
Зображення для публікацій у соцмережах
Відновіть читабельність мініфікованого коду
Легко створюйте файли .gitignore
Система бронювання столиків у ресторані
Програма запису клієнтів для перукарень
Безкоштовний генератор фавіконок
Безкоштовний плакат з інформацією про алергени для ресторанів
Красиво діліться Markdown
Меню вашого ресторану онлайн — безкоштовно