Construire des cartes interactives dans une application Web Django peut sembler intimidant si vous ne savez pas par où commencer, mais c'est plus facile que vous ne le pensez si vous utilisez un outil de développement tel que Mapbox.
Dans cet article, nous allons créer un projet Django simple avec une seule application et ajouter une carte interactive comme celle que vous voyez ci-dessous à la page Web que Django rend avec l'API Mapbox Maps.
Nos outils
Python 3 est fortement recommandé pour ce didacticiel car Python 2 ne sera plus pris en charge à partir du 1er janvier 2020. Python 3.6.5 a été utilisé pour créer ce didacticiel. Nous utiliserons également les dépendances d'application suivantes pour créer notre application :
- Framework Web Django, version 2.0.5
- pip et virtualenv, qui sont installés avec Python 3, pour installer et isoler la bibliothèque Django de vos autres applications
- Un compte Mapbox gratuit pour interagir avec leur API Web en utilisant JavaScript
Si vous avez besoin d'aide pour configurer votre environnement de développement avant d'exécuter ce code, consultez ce guide pour configurer Python 3 et Django sur Ubuntu 16.04 LTS.
Le code de cet article de blog est également disponible sur GitHub dans le répertoire maps-django-mapbox du référentiel blog-code-examples. Prenez le code et utilisez-le à vos propres fins car il est fourni sous la licence open source MIT.
Installation des dépendances
Démarrez le projet Django en créant un nouvel environnement virtuel à l'aide de la commande suivante. Je recommande d'utiliser un répertoire séparé tel que ~/venvs/ (le tilde est un raccourci pour le home de votre utilisateur répertoire) afin que vous sachiez toujours où se trouvent tous vos environnements virtuels.
python3 -m venv djangomaps
Activez le virtualenv avec le activate script shell :
source djangomaps/bin/activate
L'invite de commande changera après l'activation de virtualenv :
N'oubliez pas que vous devez activer votre virtualenv dans chaque nouvelle fenêtre de terminal où vous souhaitez utiliser des dépendances dans le virtualenv.
Nous pouvons maintenant installer le Djangopackage dans le virtualenv activé mais autrement vide.
pip install django==2.0.5
Recherchez la sortie suivante pour confirmer que Django est correctement installé à partir de 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
La dépendance Django est prête à fonctionner, nous pouvons donc maintenant créer notre projet et ajouter de superbes cartes à l'application.
Construire notre projet Django
Nous pouvons utiliser le Django django-admin.py outil pour créer la structure de code passe-partout pour lancer notre projet. Allez dans le répertoire où vous développez vos applications. Par exemple, j'utilise généralement /Users/matt/devel/py/ . Exécutez ensuite la commande suivante pour démarrer un projet Django nommé djmaps :
django-admin.py startproject djmaps
Le django-admin.py la commande créera un répertoire nommé djmaps ainsi que plusieurs sous-répertoires que vous devriez connaître si vous avez déjà travaillé avec Django.
Modifiez les répertoires dans le nouveau projet.
cd djmaps
Créer une nouvelle application Django dans djmaps .
python manage.py startapp maps
Django va générer un nouveau dossier nommé maps pour le projet. Nous devons mettre à jour les URL afin que l'application soit accessible avant d'écrire notre views.py code.
Ouvrir djmaps/djmaps/urls.py . Ajoutez les lignes en surbrillance pour que les URL vérifient le maps app pour la correspondance d'URL appropriée.
""" (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),
]
Économisez djmaps/djmaps/urls.py et ouvrez djmaps/djmaps/settings.py .Ajouter le maps application à settings.py en insérant la ligne en surbrillance :
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'maps',
]
Assurez-vous de changer le DEBUG par défaut et SECRET_KEY valeurs en settings.py avant de déployer du code en production. Sécurisez correctement votre application avec les informations des checklists de déploiement Djangoproduction afin de ne pas ajouter votre projet à la liste des applications piratées sur le web.
Enregistrez et fermez settings.py .
Prochain changement dans le djmaps/maps annuaire. Créez un nouveau fichier nommé urls.py pour contenir les routes pour le maps application.
Ajoutez ces lignes au djmaps/maps/urls.py vide fichier.
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'', views.default_map, name="default"),
]
Économisez djmaps/maps/urls.py et ouvrez djmaps/maps/views.py ajoutez les deux lignes en surbrillance suivantes. Vous pouvez conserver le commentaire passe-partout ou le supprimer.
from django.shortcuts import render
def default_map(request):
return render(request, 'default.html', {})
Ensuite, créez un répertoire pour vos fichiers de modèle nommé templates sous le djmaps/maps répertoire de l'application.
mkdir templates
Créez un nouveau fichier nommé default.html dans djmaps/maps/templates qui contient le balisage de modèle Django suivant.
<!DOCTYPE html>
<html>
<head>
<title>Interactive maps for Django web apps</title>
</head>
<body>
<h1>Map time!</h1>
</body>
</html>
Nous pouvons tester cette page statique pour nous assurer que tout notre code est correct, puis nous utiliserons Mapbox pour intégrer une carte personnalisable dans la page. Allez dans le répertoire de base de votre projet Django où se trouve le manage.py fichier est localisé. Exécutez le serveur de développement avec la commande suivante :
python manage.py runserver
Le serveur de développement Django démarrera sans aucun problème autre qu'un avertissement de migration non appliquée.
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.
Ouvrez un navigateur Web et accédez à localhost:8000 .
Notre code fonctionne, mais bon sang, c'est une page HTML d'apparence simple. Faisons de la magie une réalité en ajoutant JavaScript au modèle pour générer des cartes.
Ajouter des cartes avec Mapbox
Rendez-vous sur mapbox.com dans votre navigateur Web pour accéder à la page d'accueil de Mapbox.
Cliquez sur "Commencer" ou "Commencer gratuitement" (le texte dépend si vous avez déjà un compte Mapbox ou non).
Créez un nouveau compte de développeur gratuit ou connectez-vous à votre compte existant.
Cliquez sur l'option "JS Web".
Choisissez "Utiliser le CDN Mapbox" pour la méthode d'installation. Les deux écrans suivants montrent du code que vous devez ajouter à votre djmaps/maps/templates/default.html fichier modèle. Le code ressemblera à ce qui suit mais vous devrez remplacer le mapboxgl.accessToken ligne avec votre propre jeton d'accès.
<!DOCTYPE html>
<html>
<head>
<title>Interactive maps for Django web apps</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<h1>Map time!</h1>
<div id='map' width="100%" style='height:400px'></div>
<script>
mapboxgl.accessToken = {{ mapbox_access_token }};
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10'
});
</script>
</body>
</html>
Rouvrir djmaps/maps/views.py pour mettre à jour les paramètres passés dans le template 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 })
Le jeton d'accès Mapbox devrait vraiment être stocké dans le fichier de paramètres de Django, nous avons donc laissé une note "TODO" pour gérer cela comme une étape future.
Nous pouvons maintenant réessayer notre page Web. Actualiser localhost:8000 dans votre navigateur Web.
Super, nous avons une carte interactive en direct ! C'est un peu bizarre de penser à quel point il a fait un zoom arrière pour voir le monde entier. Il est temps de personnaliser la carte à l'aide de quelques paramètres JavaScript.
Personnalisation de la carte
Nous pouvons modifier la carte en modifiant les paramètres de style, de niveau de zoom, d'emplacement et de nombreux autres attributs.
Nous commencerons par modifier l'emplacement sur lequel la carte initiale se centre ainsi que le niveau de zoom.
Rouvrir djmaps/maps/templates/default.html et modifiez les premières lignes en surbrillance pour qu'elles se terminent par une virgule et ajoutez les deux nouvelles lignes en surbrillance ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title>Interactive maps for Django web apps</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<h1>Map time!</h1>
<div id='map' width="100%" style='height:400px'></div>
<script>
mapboxgl.accessToken = {{ mapbox_access_token }};
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [-77.03, 38.91],
zoom: 9
});
</script>
</body>
</html>
Le premier nombre, -77.03, pour le center tableau est la longitude et le deuxième nombre, 38,91, est la latitude. Le niveau de zoom 9 est beaucoup plus proche de la ville que la valeur par défaut qui était le monde entier au niveau 0. Toutes les valeurs de personnalisation sont répertoriées dans la documentation de l'API Mapbox GL JS.
Actualisez maintenant la page à localhost:8000 pour recharger notre carte.
Génial, maintenant nous avons zoomé sur Washington, D.C. et pouvons toujours nous déplacer pour voir plus de la carte. Apportons quelques autres modifications à notre carte avant de conclure.
De retour en djmaps/maps/templates/default.html changer la ligne en surbrillance pour le style clé du mapbox://styles/mapbox/satellite-streets-v10 évaluer. Cela changera l'apparence d'un style de carte abstrait à des données d'images satellites. Mettre à jour zoom: 9 pour qu'il y ait une virgule à la fin de la ligne et ajoutez bearing: 180 comme dernière paire clé-valeur dans la configuration.
<!DOCTYPE html>
<html>
<head>
<title>Interactive maps for Django web apps</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<h1>Map time!</h1>
<div id='map' width="100%" style='height:400px'></div>
<script>
mapboxgl.accessToken = {{ mapbox_access_token }};
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-streets-v10',
center: [-77.03, 38.91],
zoom: 9,
bearing: 180
});
</script>
</body>
</html>
Enregistrez le modèle et actualisez localhost:8000 .
La carte propose désormais une vue satellite avec superposition des rues mais elle est aussi... "à l'envers" ! Au moins la carte est à l'envers par rapport à la plupart des cartes dessinées, à cause du bearing: 180 valeur, qui a modifié la rotation de cette carte.
Pas mal pour quelques lignes de JavaScript dans notre application Django. Pensez à consulter la documentation de l'API Mapbox GL JS pour la liste exhaustive des paramètres que vous pouvez régler.
Quelle est la prochaine ?
Nous venons d'apprendre à ajouter des cartes interactives basées sur JavaScript à nos applications Web Django, ainsi qu'à modifier l'apparence des cartes. Essayez ensuite certaines des autres API fournies par Mapbox, notamment :
- itinéraire
- correspondance de carte
- géocodage
Des questions? Faites-le moi savoir via un ticket de problème GitHub sur le référentiel Full Stack Python, sur Twitter@fullstackpythonou @mattmakai.
Voyez-vous une faute de frappe, un problème de syntaxe ou une formulation qui prête à confusion dans cet article de blog ? La source de cette page sur GitHub et soumettre une demande d'extraction avec un correctif ou déposer un ticket de problème sur GitHub.
