Как создать свою собственную карту для визуализации мест, которые вы хотите посетить

Наконец-то наступило лето. Вы готовы к поездке? Эта статья поможет вам в планировании.

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

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

Давайте начнем!

Подготовить проект

Соберите список интересных мест

Для начала выберем пункт назначения. Я случайно выбрал Лондон для этого примера. Пабы будут нашей темой интереса, поэтому я собрал список лучших.

Подготовьте координаты

Теперь у нас есть список названий пабов. Я воспользуюсь библиотекой 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 не является бесплатным, я покажу вам альтернативу: ЗДЕСЬ API.

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

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

Мы будем использовать HERE Maps API for JavaScript для создания нашей карты. Для интеграции интерфейса с Python воспользуемся Flask. Это простой, но мощный фреймворк для создания веб-проектов.

Установите Flask:

pip install Flask

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

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

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

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

Код выглядит так:

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

Протестируйте проект

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

python3 map_runner.py

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

Обновите карту

Хотите, чтобы это было веселее? Давайте добавим к маркерам несколько пользовательских значков. Я нашел подходящую бесплатную иконку и обновил эту часть кода:

После украшения наша карта выглядит так:

Большой! Теперь у нас есть план. Конечно, вы можете немного изменить код, чтобы включить больше интересных тем и визуализировать все на одной карте.

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

Вот несколько вариантов, которые стоит попробовать:

  • Сделайте снимок экрана с картой.
  • Разверните код на своем сервере и получите доступ к нему через телефон или ноутбук.
  • Разверните код в облаке, например, с помощью AWS.

Заключение

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

Мы только прикоснулись к HERE Map API. С его помощью вы можете достичь гораздо большего. Ознакомьтесь с документацией, чтобы увидеть больше примеров.

Вы также увидели, как создать простой веб-проект с помощью фреймворка Flask. Вы можете узнать больше об основах в этой статье, написанной Hemanthhari2000.

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

Спасибо за чтение и удачного кодирования!

использованная литература