Как использовать Leaflet оффлайн?

Question

ssssergey @ssssergey

Как использовать Leaflet оффлайн?

Хочу чтобы скрипт работал без интернета на базе карт Google Maps, Яндекс.карты или OpenStreetMaps. Как это реализовать? Как скачать? Как прописать ссылку на скачанные карты в скрипте?
Спасибо!

Вопрос задан более трёх лет назад
13629 просмотров

Комментировать

Подписаться 7 Простой Комментировать

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 1

14 комментариев

Тимофей Бережнов @timaberezhnov

ssssergey Не могли бы Вы подробнее описать, как "подсунуть" Leaflet'у тайлы, не поднимаю сервер?

Написано более трёх лет назад
ssssergey @ssssergey Автор вопроса

Примерно вот так:

L.tileLayer('d:/Path/to/Folder/Tiles/{z}/{x}/{y}.png', {maxZoom: 18}).addTo(map);

Написано более трёх лет назад

ssssergey @ssssergey Автор вопроса

<!doctype html>
<html>
<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>

<body>
	<div id="map" style="width: 1000px; height: 500px; position: relative;"></div>
	<script src="libs/leaflet.js"></script>
	<script>
		var map = L.map('map').setView([45.035320, 41.966561], 10);
		L.tileLayer('d:/Soft/MapTiles__/Maperitive/Tiles/{z}/{x}/{y}.png', {
			maxZoom: 18
		}).addTo(map);
		L.control.fullscreen().addTo(map);
	</script>
	
</body>
</html>

Написано более трёх лет назад

ssssergey @ssssergey Автор вопроса

Изменитt путь и начальную точку setView

Написано более трёх лет назад
ssssergey @ssssergey Автор вопроса

А еще здесь надо указать вашу ссылку или в сети: src="libs/leaflet.js.

Написано более трёх лет назад

Тимофей Бережнов @timaberezhnov

ssssergey:

<html>
<head>
<title>Some Title</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="Leaflet/leaflet.css" />
<script src="Leaflet/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
	var map = L.map('map').setView([51.83, 107.62], 13);

	L.tileLayer('d:/.users/tberezhnov/Maperitive/Tiles/{z}/{x}/{y}.png', {
		minZoom: 12,
		maxZoom: 17,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	}).addTo(map);
</script>
</body>
</html>

Написано более трёх лет назад

Тимофей Бережнов @timaberezhnov

ssssergey: не работает, думаю Maperitive как-то неправильно режет тайтлы...

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: Спасибо большое за подробные советы, но всё не так плохо, как вы думаете :)

Написано более трёх лет назад
ssssergey @ssssergey Автор вопроса

Можно отследить ошибку в консоли браузера. Если у вас Хром, то после загрузки страницы нужно нажать Ctrl Shift J и появится консоль с ошибками красным шрифтом. Справа от красной надписи будет ссылка на участок кода, где произошла ошибка.

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: В том то и беда, никаких ошибок в консоли

Написано более трёх лет назад
ssssergey @ssssergey Автор вопроса

Возможно скачанный участок карты находится слишком далеко от точки входа setView.

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: Координаты точки входа указал из файла Tiles.json, сгенерированного Maperitive'ом

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: Кстати, если указать тайлы OSM'а (http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png) всё работает, всё как надо

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: Проблема решена, большое Вам спасибо!
Может кому-то будет полезно:
Как видно в коде, который приложен выше, в пути была папка с точкой в имени. Она и стала причиной ошибки.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

WordPress

+1 ещё

Простой
Каким способом можно добавлять много точек на гугл-карте(карта на сайте на вордпресс)?
- 1 подписчик
- 15 апр.
- 33 просмотра
0

ответов
API

+3 ещё

Средний
Как организовать отслеживание транспорта (автобуса)?
- 1 подписчик
- 06 мар.
- 173 просмотра
4

ответа
Google Maps

Простой
Как в 2024 из России получить google maps api key?
- 1 подписчик
- 22 янв.
- 580 просмотров
0

ответов
Leaflet

Средний
Leaflet кастомная сетка координат?
- 1 подписчик
- 04 янв.
- 65 просмотров
1

ответ
Яндекс.Карты

+3 ещё

Простой
Какую выбрать программу для хранения точек на карте?
- 3 подписчика
- 28 дек. 2023
- 455 просмотров
3

ответа
Яндекс.Карты

+2 ещё

Простой
Как делать маршрут внутри здания?
- 1 подписчик
- 08 дек. 2023
- 63 просмотра
1

ответ
1С-Битрикс

+4 ещё

Средний
Возможно ли передать адреса из сделок на карту стороннего сервиса?
- 1 подписчик
- 07 нояб. 2023
- 55 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Почему взимается плата Places Details за использование Google Place Autocomplete?
- 1 подписчик
- 31 окт. 2023
- 89 просмотров
2

ответа
API

+2 ещё

Простой
API которое предоставляет tags или хештег о конкретной локации?
- 1 подписчик
- 14 окт. 2023
- 60 просмотров
0

ответов
Google Maps

Средний
Как получить маршрут Google Directions API?
- 1 подписчик
- 18 сент. 2023
- 44 просмотра
1

ответ
Показать ещё Загружается…

Специалист по контекстной рекламе, SEO

Rails • Ларнака

от 50 000 ₽

Разработчик мобильных приложений/Android Developer - webview

MST

от 1 000 $

Маркетолог

Fancy state • Москва

от 60 000 до 80 000 ₽

[python,go] Залить ВИДЕО в тикток

19 апр. 2024, в 23:00

5000 руб./за проект

Разработка VST-плагина

19 апр. 2024, в 20:43

20000 руб./за проект

Нарисовать баннер для интернет-магазина

19 апр. 2024, в 20:35

500 руб./в час

Answer 1 · 2015-01-06 18:41:32

Можно реализовать с картой OpenStreetMaps.
1. Скачать нужный фрагмент карты extract.bbbike.org в формате OSM.
2. Нужно отрендерить тайлы. Вот список приложений для рендеринга wiki.openstreetmap.org/wiki/RU:Rendering. Простой в использовании maperitive.net/.
3.На локальном вэб-сервере разместить папку с тайлами.
4. ссылка в Leaflet http://localhost/Tiles/{z}/{x}/{y}.png

Answer 2 · 2015-01-06 22:31:01

В общем, благодаря ответу ittim мне удалось дойти до 3 пункта из его списка.
Просто хочется поподробнее раскрыть первые два пункта для тех кому интересно.
1. С сайта extract.bbbike.org скачивается нужный вам фрагмент карты. Там в поле:
- "Format" выбираете "OSM XML 7z";
- "Your email adress" вписываете ваш адрес почты, на которую они пришлют фрагмент карты;
- "Name of area to extract" - как-нибудь обзовите фрагмент;
Потом идет кнопка Extract. Ее пока пропускаете. А нажимаете на кнопку поменьше и пониже "here". Ну естественно перед этим нужно навести карту справа на необходимое место. Если промахнулись ничего страшного. Нажимаете на появившуюся кнопку "Select a different area" и все возвращается в исходное положение. После того как вы убедились, что оранжевый прямоугольник покрывает необходимый участок нажимаете "Extract". Все. В течение получаса на вашу почту придет ссылка, по которой вы скачаете свой фрагмент.
2. Скаченные фрагмент это не картинка, а XML данные, которые нужно преобразовать в картинки (tiles). Для этого с сайта maperitive.net скачиваете программку. Запускаете. Заходите File->Open map sources, выбираете скачанный XML фрагмент (предварительно распакованный). Программка задумается ненадолго (в зависимости от размера файла). Заходите в Tools->Generate Tiles. После этого программка будет думать еще дольше. По завершению в папке Tiles внутри программной папки появятся те самые тайлы в формате png.
3. Оказалось, что сервер можно не поднимать. Просто прописываете ссылку на папку с тайлами. Например: d:/Tiles//{z}/{x}/{y}.png

P.S. Оказалось можно пропускать 1 пункт и делать тайлы прямо из программки Maperitive.
P.P.S. Программка Maperitive оказалась непростой. В нижней части имеется поле командной строки, которое позволяет осуществлять гибкую настройку. Например, по умолчанию осуществляется рендеринг пяти уровней зума, но если написать в командной строке generate-tiles minzoom=8 maxzoom=18, то можно зум рендерится с 8 до 18 уровней.

P.P.P.S. Оказалось, что 1 пункт (т.е. локальная подгрузка стороннего источника карт) все-таки необходим, если вы хотите видоизменять карту, применяя так называемые Правила (Rules). Встроенная карта на эти изменения не реагирует. В частности, я пытался сделать так, чтобы названия иностранных населенных пунктов (ну например турецких) отображались на русском или английском, но не на турецком. Или чтобы аэропорты были подписаны. Так вот это удалось сделать только подгрузив карты из локального источника.

Как использовать Leaflet оффлайн?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт