13,9 тыс подписчиков

Планы на отпуск с Python и HERE Maps

2 сентября 20212 сен 2021

6 мин

Оглавление

Подготовка проекта
Составление списка интересных мест
Определение координат

Лето в самом разгаре, и вы наверняка уже готовы отправиться в путешествие. Эта статья как раз поможет его распланировать.

Интернет пестрит туристическими путеводителями, рассказывающими о достопримечательностях городов. Остается лишь скачать карту и следовать указаниям. Но что если у вас особая поездка, и вы намерены посетить конкретные места.

В данном руководстве мы создадим собственную карту и отметим на ней места посещений. Такая наглядность намного упростит планирование маршрутов передвижения в течении дней. Например, можно сгруппировать лучшие пивоварни, магазинчики сладостей, музеи и т. д.

Приступим!

Подготовка проекта

Составление списка интересных мест

Прежде всего выбираем цель путешествия — пусть будет Лондон. Поскольку было бы интересно посетить местные пабы, то составляем список наилучших из них.

Определение координат

Список с названиями пабов готов, и теперь нам нужна библиотека Python geopy для обнаружения их координат.

Устанавливаем библиотеку посредством pip или pip3:

pip install geopy

Получаем широту и долготу конкретного местоположения паба следующим способом:

geolocator = Nominatim(user_agent="your_app_name")
location = geolocator.geocode("London")
print((location.latitude, location.longitude))(51.5073219, -0.1276474)

Отображение мест на карте

На этом этапе отмечаем полученные координаты на карте. Вы можете воспользоваться Google Maps API для создания карты с помощью библиотеки Python gmplot. Но поскольку данный API платный, то прибегнем к альтернативе: HERE API.

HERE API — это инструмент, предполагающий бесплатный доступ к базовым функциям и оплату более продвинутых. Он позволяет создавать пользовательские карты, визуализировать датасеты локаций и многое другое. Вы можете выбрать бесплатный тарифный план и получить в распоряжении до 250 тысяч транзакций в день, чего вполне достаточно для личных проектов.

Для работы с HERE Location Services создаем ключ API, следуя данным инструкциям.

HERE Maps API для JavaScript понадобится для построения карты, а такой простой, но высоко эффективный фреймворк для веб-проектов, как Flask, обеспечит интеграцию интерфейса с Python.

Устанавливаем Flask:

pip install Flask

Теперь нужен новый файл Python для создания простого шаблона Flask:

from flask import Flask,render_template
from geopy.geocoders import Nominatim
app = Flask(__name__)

@app.route('/') def get_data():
geolocator = Nominatim(user_agent="map_marker")
city = geolocator.geocode("London")
loc_list = []
loc_list.append(geolocator.geocode("Prospect of Whitby"))
loc_list.append(geolocator.geocode("The Ship & Shovell"))
loc_list.append(geolocator.geocode("The Crosse Keys"))
loc_list.append(geolocator.geocode("The Spread Eagle"))
loc_dict = {loc.latitude:loc.longitude for loc in loc_list}

return render_template('map.html', city = city, coordinates=loc_dict)

if __name__ == '__main__':
app.run(debug = True)

Импортируем Flask и библиотеки geopy.
Определяем основную функцию, которая выполнит отрисовку карты на основе файла map.html, созданием которого мы займемся далее.
Составляем список местоположений пабов и извлекаем широту и долготу в словарь. Обратите внимание, что в нашем примере фигурируют только названия места, но вы можете также написать точный адрес.
Передаем переменные city и coordinates из Python в код JavaScript. Заключив их в скобки {{}}, мы можем на них ссылаться в коде HTML или JavaScript.

Теперь приступаем к созданию файла HTML для отрисовки карты в браузере.

Для Flask потребуется каталог templates, в котором мы и создадим файл map.html.

Полученный код выглядит следующим образом:

<html>
<head> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"type="text/javascript" charset="utf-8"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script> </head> <body style='margin: 0'> <div style="width: 100%; height: 100%" id="map"></div> <script>
var platform = new H.service.Platform({
'apikey': 'your_api_key' });
// Получаем предустановленные типы карты из объекта platform var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
// изначальный центр и уровень масштабирования карты
center: new H.geo.Point({{ city.latitude}}, {{ city.longitude }}),
zoom: 11.5,
pixelRatio: window.devicePixelRatio || 1 });

window.addEventListener('resize', () => map.getViewPort().resize());
// Behavior реализует предустановленные взаимодействия для панорамирования/масштабирования
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);

Object.entries({{ coordinates }}).forEach(([key, value]) => {
var marker = new H.map.Marker({
lat: `${key}`,
lng: `${value}` });
map.addObject(marker);
});
</script> </body> </html>

Импортируем требуемые скрипты из js.api.here.
Меняем apikey на свои ключи.
Создаем карту с Лондоном в центре. Обратите внимание, что посредством вызова {{ city.latitude}}, {{ city.longitude }} мы получаем доступ к координатам, переданным кодом Python.
Добавляем addAventListener('resize') для полной уверенности, что карта занимает весь контейнер.
Перебираем значения {{ coordinates }} для создания нового объекта H.map.Marker согласно значениям широты и долготы.
Добавляем все маркеры на карту.

Тестирование проекта

Проверяем проект в действии. Запускаем программу, выполняя код Python:

python3 map_runner.py

Открываем браузер http://127.0.0.1:5000/ и видим карту с маркерами, кликая на которые регулируем масштаб. То же самое вы можете делать и с помощью сенсорной панели.

Обновление карты

Предлагаю немного поэкспериментировать и добавить на карту пользовательские иконки. Воспользуемся одной подходящей бесплатной иконкой и изменим следующую часть кода:

В результате карта принимает вот такой привлекательный вид:

Отлично! Наш план готов. Вы можете немного изменить код, дополнив его другими достопримечательностями и визуализировав их все на одной карте.

Как сделать карту портативной

Для этой цели существуют следующие варианты.

Выполнить скриншот карты.
Развернуть код на сервере и получать к нему доступ через телефон или ноутбук.
Развернуть код в облаке, например с помощью AWS.

Заключение

Теперь вы знаете, как создать маркеры на собственной пользовательской карте и как просто получить координаты с помощью библиотеки geopy.

И это лишь малая часть того, что можно сделать с HERE Map API. В документации вы найдете дополнительные примеры.

Кроме того, вы приобрели опыт работы с фреймворком Flask, создав простой веб-проект.

Надеюсь, благодаря этой статье вам удастся распланировать свой следующий отпуск.

Благодарю за внимание! Программируйте с удовольствием!