Векторные тайлы карт на основе данных 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 красиво
Меню вашего ресторана онлайн — бесплатно