Создание интерактивных карт в веб-приложении Django может показаться сложным, если вы не знаете, с чего начать, но это проще чем вы думаете, если используете инструмент разработчика, такой как Mapbox .
В этом посте мы создадим простой проект Django с одним приложением. и добавьте интерактивную карту, подобную той, которую вы видите ниже, на веб-страницу, Django выполняет рендеринг с помощью карт Mapbox API.
Наши инструменты
Python 3 настоятельно рекомендуется для этого руководства потому что Python 2 больше не будет поддерживаться с 1 января 2020 года. Python 3.6.5 в был использован для создания этого учебника. Мы также будем использовать следующие зависимости приложений для сборки наше приложение:
- Веб-фреймворк Django,
- версия 2.0.5
- pip и
- virtualenv , который уже установлен
- с Python 3, чтобы установить и изолировать библиотеку Django
- из других ваших приложений
- бесплатную учетную запись Mapbox для взаимодействия со своими
- веб-API с использованием
- JavaScript
Если вам нужна помощь в получении настроена среда разработки перед запуском этого кода взгляните на это руководство по настройке Python 3 и Django в Ubuntu 16.04 LTS.
Код этого сообщения в блоге также доступен на GitHub в разделе каталог maps-django-mapbox репозитория blog-code-examples . Возьмите код и используйте его в своих целях, потому что это все предоставляется по лицензии MIT с открытым исходным кодом.
Установка зависимостей
Запустите проект Django, создав новый виртуальная среда используя следующую команду. Рекомендую использовать отдельный каталог например ~/venvs/ (тильда – это ярлык для домашней страницы вашего пользователя каталог), чтобы вы всегда знали, где находятся все ваши виртуальные файлы располагается.
python3 -m venv djangomaps
Активируйте virtualenv с помощью сценария оболочки activate :
source djangomaps/bin/activate
Командная строка изменится после активации virtualenv:
Помните, что вам нужно активировать виртуальный сервер в каждом новом терминале. окно, в котором вы хотите использовать зависимости в файле virtualenv.
Теперь мы можем установить Django пакет в активированный, но в остальном пустой файл virtualenv.
pip install django==2.0.5
Посмотрите следующий вывод, чтобы подтвердить установку Django. правильно из PyPI.
Downloading https://files.pythonhosted.org/packages/23/91/2245462e57798e9251de87c88b2b8f996d10ddcb68206a8a020561ef7bd3/Django-2.0.5-py3-none-any.whl (7.1MB)
100% |████████████████████████████████| 7.1MB 231kB/s
Collecting pytz (from django==2.0.5)
Using cached https://files.pythonhosted.org/packages/dc/83/15f7833b70d3e067ca91467ca245bae0f6fe56ddc7451aa0dc5606b120f2/pytz-2018.4-py2.py3-none-any.whl
Installing collected packages: pytz, django
Successfully installed django-2.0.5 pytz-2018.4Зависимость Django готова к работе, поэтому теперь мы можем создать наш проект и добавить в приложение несколько классных карт.
Сборка нашего проекта Django
Мы можем использовать инструмент Django django-admin.py для создания шаблонная структура кода для начала нашего проекта. Перейдите в каталог, в котором вы разрабатываете свои приложения. За Например, я обычно использую /Users/matt/devel/py/. Затем запустите следующий команда для запуска проекта Django с именем djmaps :
django-admin.py startproject djmaps
Команда django-admin.py создаст каталог с именем djmaps вместе с несколькими подкаталогами, с которыми вы должны быть знакомы, если у вас есть ранее работал с Django.
Поменяйте каталоги в новый проект.
cd djmaps
Создайте новое приложение Django в djmaps .
python manage.py startapp maps
Django сгенерирует для проекта новую папку с именем maps . Мы должны обновить URL-адреса, чтобы приложение было доступно, прежде чем писать наш код views.py .
Откройте djmaps/djmaps/urls.py . Добавьте выделенные строки, чтобы URL-адреса проверит приложение maps на предмет соответствия URL.
""" (comments)
"""
from django.conf.urls import include
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('', include('maps.urls')),
path('admin/', admin.site.urls),
]Сохраните djmaps/djmaps/urls.py и откройте djmaps/djmaps/settings.py . Добавьте приложение maps в settings.py , вставив выделенную строку:
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'maps',
]Убедитесь, что вы изменили значения по умолчанию DEBUG и SECRET_KEY значения в settings.py перед развертыванием любого кода в производственной среде. Безопасный ваше приложение правильно с информацией из Django контрольный список производственного развертывания чтобы вы не добавляли свой проект в список взломанных приложений В интернете.
Сохраните и закройте settings.py .
Затем перейдите в каталог djmaps/maps . Создайте новый файл с именем urls.py , чтобы содержать маршруты для приложения maps .
Добавьте эти строки в пустой файл djmaps/maps/urls.py .
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'', views.default_map, name="default"),
]Сохраните djmaps/maps/urls.py и откройте djmaps/maps/views.py и добавьте следующие две выделенные строки. Вы можете оставить шаблонный комментарий или удалите это.
from django.shortcuts import render
def default_map(request):
return render(request, 'default.html', {})Затем создайте каталог для файлов шаблонов с именем templates в разделе каталог приложения djmaps/maps .
mkdir templates
Создайте новый файл с именем default.html в djmaps/maps/templates который содержит следующую разметку шаблона Django.
Interactive maps for Django web apps
Map time!
Мы можем протестировать эту статическую страницу, чтобы убедиться, что весь наш код правильно, тогда мы будем использовать Mapbox для встраивания настраиваемой карты в страница. Перейдите в базовый каталог вашего проекта Django где находится файл manage.py . Выполнить разработку сервер с помощью следующей команды:
python manage.py runserver
Сервер разработки Django запустится без каких-либо проблем, кроме предупреждение о непримененных миграциях.
Performing system checks... System check identified no issues (0 silenced). You have 14 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. Run 'python manage.py migrate' to apply them. May 21, 2018 - 12:47:54 Django version 2.0.5, using settings 'djmaps.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.
Откройте веб-браузер и перейдите по адресу localhost: 8000 .
Наш код работает, но это простая HTML-страница. Сделаем волшебство происходит путем добавления JavaScript в шаблон для создания карт.
Добавление карт с помощью Mapbox
Перейдите на mapbox.com в своем веб-браузере, чтобы получить доступ к домашней странице Mapbox.
Нажмите «Начать» или «Начать бесплатно» (текст зависит от того, или у вас еще нет учетной записи Mapbox).
Зарегистрируйте новую бесплатную учетную запись разработчика или войдите в существующую Счет.
Щелкните опцию «JS Web».
В качестве метода установки выберите «Использовать CDN Mapbox». Следующие два экрана покажите код, который следует добавить в свой djmaps/maps/templates/default.html файл шаблона. Код будет выглядеть следующим образом, но вам нужно будет замените строку mapboxgl.accessToken своим собственным токеном доступа.
Interactive maps for Django web apps
Map time!
Повторно откройте djmaps/maps/views.py , чтобы обновить параметры, переданные в Шаблон Django.
from django.shortcuts import render
def default_map(request):
# TODO: move this token to Django settings from an environment variable
# found in the Mapbox account settings and getting started instructions
# see https://www.mapbox.com/account/ under the "Access tokens" section
mapbox_access_token = 'pk.my_mapbox_access_token'
return render(request, 'default.html',
{ 'mapbox_access_token': mapbox_access_token })Токен доступа Mapbox действительно должен храниться в настройках Django. файла, поэтому мы оставили примечание «TODO», чтобы обработать это как будущий шаг.
Теперь мы можем снова попробовать нашу веб-страницу. Обновите localhost: 8000 в своем веб-браузер.
Милая, у нас есть живая интерактивная карта! Какая-то странная мысль, как это уменьшен для просмотра всего мира. Пришло время настроить карту с помощью несколько параметров JavaScript.
Настройка карты
Мы можем изменить карту, изменив параметры стиля, уровня масштабирования, расположение и многие другие атрибуты.
Начнем с изменения местоположения центра исходной карты. на, а также уровень масштабирования.
Снова откройте djmaps/maps/templates/default.html и измените первый выделенные строки так, чтобы он заканчивался запятыми, и добавьте два новых выделенные строки показаны ниже.
Interactive maps for Django web apps
Map time!
Первое число -77,03 для массива center – это долгота. а второе число 38,91 – широта. Уровень масштабирования 9 много ближе к городу, чем по умолчанию, когда весь мир уровень 0. Все значения настройки перечислены в Документация по Mapbox GL JS API .
Теперь обновите страницу по адресу localhost: 8000 , чтобы перезагрузить нашу карту.
Замечательно, теперь мы увеличили масштаб изображения Вашингтона, округ Колумбия, и все еще можем двигаться вокруг, чтобы увидеть больше карты. Давайте внесем еще пару изменений в нашу карту перед завершением.
Снова вернитесь в djmaps/maps/templates/default.html , измените выделенный строка для ключа style к mapbox://styles/mapbox/satellite-street-v10 значение. Это изменит внешний вид карты с абстрактного стиля карты на спутниковый. данные изображения. Обновите zoom: 9 , чтобы в конце строки была запятая. и добавьте Bearing: 180 в качестве последней пары “ключ-значение” в конфигурации.
Interactive maps for Django web apps
Map time!
Сохраните шаблон и обновите localhost: 8000 .
Карта теперь обеспечивает спутниковый вид с наложением улиц, но это также … “вверх ногами”! По крайней мере, карта перевернута по сравнению с тем, как большинство карт нарисовано из-за значения Bearing: 180 , которое изменило вращение этой карты.
Неплохо для нескольких строк JavaScript в нашем приложении Django. Не забудьте проверить Документация Mapbox GL JS API для получения исчерпывающего списка параметров, которые вы можете настроить.
Что дальше?
Мы только что узнали, как добавлять интерактивные карты на основе JavaScript в наши Веб-приложения Django, а также изменить внешний вид и ощущение карт. Затем попробуйте некоторые другие API-интерфейсы Mapbox включает в себя:
Вопросов? Дай мне знать через запрос на выпуск GitHub в репозитории Full Stack Python , в Твиттере @fullstackpython или @mattmakai .
Вы видите опечатку, проблему с синтаксисом или непонятную формулировку в этом блоге? после? Вилка источник этой страницы на GitHub и отправьте запрос на перенос с исправлением или отправьте сообщение о проблеме на GitHub .