Création d'une application géoweb avec Django et GeoDjango

Dans cet exercice, on va créer une application géoweb qui permettra le stockage de données géospatiales dans une base de données Spatialite et leur affichage sur une carte. Pour cela, on va commencer avec l'installation de deux logiciels: Anaconda Navigator (https://www.anaconda.com/products/navigator) et PyCharm Community Edition (https://www.jetbrains.com/pycharm/download/?section=windows).

Installation de la bibliothèque Django de Python

Comme première étape, on va activer notre environnement virtuel à partir de l'interface Anaconda Navigator en cliquant sur le nom de l'environnement virtuel créé et configurant l'interface comme à la figure ci-desosus. Suivez les étapes subséquentes pour installer la bibliothèque Django.

Alternative: La bibliothèque Django peut aussi être installé à l'aide de l'exécution de la commande : conda install anaconda::django dans le terminal ci-dessous.

Avec la même méthode, installez les bibliothèques GeoPandas et Folium.

Création d'un projet et d'une application Django

Dans un repertoire de votre choix (ex: C:\Users\....\rqrad), créez un sous-repertoire avec un nom, encore de votre choix (ex: C:\Users\....\rqrad\agrogeoweb) pour héberger les codes de votre projet et applications Django. Puis, à partir du terminal lancé comme à la figure ci-dessous, faites un changement de repertoire avec la commande cd C:\Users\....\rqrad\agrogeoweb vers le repertoire créé.

Toujours dans le même repertoire, exécutez la commande suivante pour créer un projet Django. Un nouveau dossier portant le dernier paramètre de la commande suivante (agrogeoinfo) contenant des modules Python vont être créés.

django-admin startproject agrogeoinfo

Faites un changement de repertoire vers le nouveau dossier.

cd agrogeoinfo

Exécutez la commande suivante pour créer, cette fois-ci, une application Django. À noter que le projet et l'application forment une structure imbriquée.

python manage.py startapp agrogeoinfoapp

Maintenant, lancez le serveur local et vérifiez que les étapes précédentes ont été réalisées avec succès à l'aide de la commande suivante:

Activation de l'extension GeoDjango

Maintenant, ouvrez votre navigateur web et naviguez vers http://127.0.0.1:8000/ ou http://localhost:8000/. Si vous voyez des résultats comme dans les deux images ci-dessous, vous avez réussi à créer un projet et une application Django. Félicitations!

GeoDjango est un module de contribution (inactif par défaut) inclus dans Django qui le transforme en un framework géoweb.

Pour l'activer, modifiez le fichier ou module settings.py dans le repertoire du projet à l'aide d'un éditeur et ajoutez les informations suivantes dans la variable dans la liste INSTALLED_APPS: 'django.contrib.gis', 'agrogeoinfoapp', comme ci-dessous. Vous pouvez utiliser le fichier https://deepnote.com/workspace/INRS-5198a8e6-f82b-4908-a283-0534b7980bf2/project/Formation-RQRAD-Developpement-dun-Systeme-dInformations-Agricoles-561fff2d-a0ea-485f-9d16-1029194d629b/Data%2FCodes%2Fsettings.py?

Activation de l'API de base de données spatiales pour Spatialite

Noter qu'il faut laisser une virgule après le dernier élément de la liste.

Un peu plus bas dans le même fichier settings.py, modifiez la valeur de la clé ENGINE de la variable DATABASES comme ci-dessus en la remplaçant par 'django.contrib.gis.db.backends.spatialite'. Puis, sauvegardez le fichier (CTRL+S). Puis ajoutez les codes suivantes à la fin du fichier:

Installation des bibliothèques géospatiales

Pour transformer le SGBD sqlite en un SGBD spatial, des outils (spatialite.exe, proj.db, spatialite_gui.exe) et bibliothèques (libpd.dll) sont nécessaires. Téléchargez ces fichiers à partir du dossier Outils (/work/Data/Outils) du present document et déposez les dans le dossier de votre projet agrogeoinfo comme ci-dessous.

L'ajout de l'application 'django.contrib.gis' dans le fichier settings.py permet la découverte par notre application des fonctionnalités SIG de Django; Sinon, certaines d'entre elles comme l’interface d’administration géographique ne pourront pas être activées. Les fonctionalités SIG de GeoDjango requièrent l'installation des bibliothèques géospatiales GDAL (Geospatial Data Abstraction Library), OSGEO et PROJ. La manière la plus cohérente de procéder à cette installation consiste à télécharger le fichier de type wheel (.whl) correspondant à la version de de Python (3.10) utilisée dans votre environnement virtuel. Ceci peut être téléchargé à partir du repertoire de Christoph Gohlke ici: https://github.com/cgohlke/geospatial-wheels/releases ou à partir du dossier GDAL (/work/Data/GDAL) accompagnant ce tutoriel. Cliquez sur 'Show all XYZ assets' pour afficher tous le fichiers disponibles.

Pour être sûr de la bonne version, vous pouvez vérifier la version de Python en cliquant sur l'option 'Open with Python' comme démontré dans la figure du Anaconda Navigator ci-haut. Ma version de Python est 3.10 et j'utilise une machine Windows à 64 bits, donc, j'ai téléchargé la version GDAL-3.8.4-cp310-cp310-win_amd64.whl.

Pour faciliter l'installation, deposez le fichier dans le repertoire agrogeoinfo, par exemple. En supposant que vous n'avez pas fait de changement de repertoire local depuis la création de l'application agrogeoinfoapp et que vous êtes encore dans le repertoire agrogeoinfo. Maintenant, exécutez la commande suivante et vérifiez que l'installation a réussi.

pip install gdal-3.10.2-cp310-cp310-win32.whl OU pip install gdal-3.10.2-cp310-cp310-win_amd64.whl

Run to view results

Après l'installation, il pourrait arriver que la bibliothèque GDAL ne soit pas accessible par Django. Pour cela:

Trouver le repertoire où Anaconda est installé sur votre machine avec la commande where anaconda dans le terminal. À partir du dossier AnacondaX, naviguez vers le repertoire osgeo dans ...\envs\rqrad2025\Lib\site-packages ou \Lib\site-packages si dans Anaconda Navigator, vous utilisez l'environnement virtuel base. Alors, verifiez le nom complet de la bibliothèque (dynamique) gdalxyz.dll installé dans le repertoire osgeo. Le mien est 'gdal.dll'.

Ensuite, naviguez dans le repertoire ...\envs\rqrad2025\Lib\site-packages\django\contrib\gis\gdal et ouvrez le module libgdal.py et modifiez la liste lib_names pour ajouter le nom du fichier gdal (sans l'extension) comme ci-dessous. Au final, sauvegardez le fichier.

Création de tables de l'ODM2 dans la base de données SQLite à partir du Model (première composante d'une application Django)

Vous pouvez trouver de l'aide ici: https://www.youtube.com/watch?v=R9ZJZtHY7RY

Maintenant, remplacez le module models.py de votre dossier agrogeoinfoapp par le contenu du fichier https://deepnote.com/workspace/INRS-5198a8e6-f82b-4908-a283-0534b7980bf2/project/Geoweb-Apps-with-Django-and-GeoDjango-561fff2d-a0ea-485f-9d16-1029194d629b/Data%2FData%20schema%2Fmodels.py? .

Ajout des séries temporelles

Maintenant, exécutez les commandes suivantes dans le terminal pour (a) transformer les tables en un module Python dans votre application avec un schéma de données que Django va utiliser pour (b) créer les tables dans la base de données géospatiales. Les résultats doivent apparaître comme à la figure suivante.

Affichage des données stockées dans une interface personalisée

python -m manage makemigrations

Création des Views (troisième composante d'une application Django)

python -m manage migrate

D'abord, on va créer une View, c.-à-d., dans le module views.py de l'application ou du repertoire agrogeoinfoapp. Une vue (view) est une fonction qui prend une requête Web et renvoie une réponse sous la forme d'une page HTML (dans notre cas un Template), ou une redirection, ou un document XML ou JSON, une image, une carte. Ouvrez le fichier views.py et ajoutez-y les codes suivants, puis, sauvegardez-le.

from django.shortcuts import render # Create your views here. from django.shortcuts import render from django.utils.safestring import SafeString from django.utils.safestring import mark_safe from pyproj import Transformer from shapely.wkt import loads as load_wkt from shapely.ops import transform from django.views.generic import TemplateView from django.http import JsonResponse import folium from folium.map import Marker, Template import json from .models import SamplingFeatures from .serializers import SamplingFeaturesSerializers def map_view(request): geos = [] features = [] srid = 3857 for feature in SamplingFeatures.objects.all().order_by('samplingfeatureid')[:]: if feature.featuregeometry.srid != srid: srid = feature.featuregeometry.srid geos.append({"type": "Feature", "properties": {"name": feature.samplingfeaturename}, "geometry": { "type": str(type(feature.featuregeometry).__name__), "coordinates": list(feature.featuregeometry.coords) } } ) features.append(feature.samplingfeaturename) geometries = { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::{0}".format(srid) } }, "features": geos } with open('data.json', 'w') as fp: fp.write(json.dumps(geometries)) return render(request, "home_detail.html", {"geojson_data": mark_safe(json.dumps(geometries)), "features": features }) class MainView(TemplateView): template_name = 'mapl.html' def get_context_data(self, **kwargs): figure = folium.Figure() t = Transformer.from_crs(3857, 4326) sensors_fg = folium.FeatureGroup() # Create a FeatureGroup layer with sensor elements as a single layer champs_fg = folium.FeatureGroup() ##Create a FeatureGroup layer with field elements as a single layer parcelles_fg = folium.FeatureGroup() fermes_fg = folium.FeatureGroup() all_features = SamplingFeatures.objects.all() map_center = all_features.first().featuregeometry.centroid sensors = all_features.filter(samplingfeaturecode__istartswith='CAF') fermes = all_features.filter(samplingfeaturecode='CookAgronomyFarm') champs = all_features.filter(samplingfeaturecode__istartswith='Field') parcelles = all_features.filter(samplingfeaturecode__istartswith='Parcel') # Make the folium map _map = folium.Map( location=t.transform(map_center.x, map_center.y), zoom_start=17, tiles='OpenStreetMap', ) _map._name = "map" _map._id = "000" _map.add_to(figure) for sensor in sensors: # sensor.objects.all() coords = sensor.featuregeometry.coords sensors_fg.add_child(folium.Marker( location=list(t.transform(coords[0], coords[1])), popup=sensor.samplingfeaturename, tooltip=sensor.samplingfeaturedescription, icon=folium.Icon(icon='fa-sensor', prefix='fa') ) ) for parcelle in parcelles: # sensor.objects.all() wkt = load_wkt(parcelle.featuregeometrywkt) parcelles_fg.add_child(folium.Polygon( locations=list(t.transform(coord[0], coord[1]) for coord in wkt.exterior.coords), smooth_factor=4, no_clip=True, popup=parcelle.samplingfeaturename, tooltip=parcelle.samplingfeaturedescription, icon=folium.Icon(icon='fa-flag', prefix='fa') ) ) for champ in champs: # sensor.objects.all() wkt = load_wkt(champ.featuregeometrywkt) champs_fg.add_child(folium.Polygon( locations=list(t.transform(coord[0], coord[1]) for coord in wkt.exterior.coords), smooth_factor=4, no_clip=True, popup=champ.samplingfeaturename, tooltip=champ.samplingfeaturedescription, icon=folium.Icon(icon='fa-flag', prefix='fa') ) ) for ferme in fermes: # sensor.objects.all() wkt = load_wkt(ferme.featuregeometrywkt) fermes_fg.add_child(folium.Polygon( locations=list(t.transform(coord[0], coord[1]) for coord in wkt.exterior.coords), smooth_factor=4, no_clip=True, popup=ferme.samplingfeaturename, tooltip=ferme.samplingfeaturedescription, icon=folium.Icon(icon='fa-flag', prefix='fa') ) ) # Modify Marker template to include the onClick event click_template = """{% macro script(this, kwargs) %} var {{ this.get_name() }} = L.marker( {{ this.location|tojson }}, {{ this.options|tojson }} ).addTo({{ this._parent.get_name() }}).on('click', getSensor); {% endmacro %} """ # Change template to custom template Marker._template = Template(click_template) _ = _map._repr_html_() event_handler = folium.JavascriptLink('./static/js/eventhandler.js') plotly_js = "https://cdn.plot.ly/plotly-3.0.1.min.js" _map.get_root().html.add_child(folium.JavascriptLink(plotly_js)) _map.get_root().html.add_child(event_handler) _map.add_child(sensors_fg) _map.add_child(parcelles_fg) _map.add_child(champs_fg) _map.add_child(fermes_fg) _map.add_child(folium.LayerControl()) # LayerControl object to control display of layers, must be added last to the map. sensors_json = JsonResponse(SamplingFeaturesSerializers(sensors, many=True).data).content return {"map": figure._repr_html_(), 'title': 'Cook Agronomy Farm', 'sensors': sensors_json}

Run to view results

Création d'un template (deuxième composante d'une application Django)

Dans chacune des vues, on a remarqué la réfrérence à un fichier HTML comme 'mapl.html'. Ce fichier template contient les codes HTML ainsi que les étiquettes correspondant aux données contextuelles retournées par la View dans la réponse HTTP (HTTPResponse). Créez un dossier nommé templates dans le repertoire static et y créer un fichier nommé mapl.html. Ajoutez-y le contenu ci-dessous.

Plus d'informations sur les structures : https://django-book-new.readthedocs.io/en/latest/appendixE.html

{% load static %} {% load template_jsonify %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>{{title|safe}}</title>  <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static '/css/custom.css' %}"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" integrity="sha512-cUoWMYmv4H9TGP4hbm1mIjYo90WzIQFo/5jj+P5tQcDTf+iVR59RyIj/a9fRsBxzxt5Dnv/Ex7MzRIxcDwaOLw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> </head> <body>  <nav class="navbar navbar-expand-lg navbar-dark bg-primary static-top"> <div class="container"> <a class="navbar-brand" href="{% url 'home' %}">Un Exemple d'Application Geoweb</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </nav> <div class="wrapper">  <nav id="sidebar"> <div class="sidebar-header"> <h3>Sidebar for display</h3> </div> <div class="form-group" id="sensors"> {% csrf_token %}  </div>  </nav>  <div id="content">  <div class="container-fluid"> <div class="row"> <div class="col-lg-12 text-center">  {{map|safe}} <ul class="list-unstyled"> <li>Adapted from a template developed by Hatarilabs</li> </ul> </div> </div> </div> </div> </div>  <script src="{% static '/js/jquery.slim.min.js' %}"></script> <script src="{% static '/js/bootstrap.bundle.min.js' %}"></script> <script> // Function to detect the Folium-generated Leaflet map object function getFoliumMap() { var mapDiv = document.getElementById('map_000'); // Find the Folium map div console.log(mapDiv); if (mapDiv) { var mapId = mapDiv.id; return window[mapId]; // Get the corresponding Leaflet map } } function findMarkerByTooltip(map, tooltipText) { var foundMarker = null; map.eachLayer(function (layer) { if (layer instanceof L.Marker) { // Check if it's a Leaflet marker let tooltip = layer.getTooltip(); if (tooltip && tooltip.getContent() === tooltipText) { foundMarker = layer; } } }); return foundMarker; } function zoomToMarker(map, tooltipText) { var markerFound = findMarkerByTooltip(map, tooltipText); if (markerFound) { console.log("Marker found at:", markerFound.getLatLng()); map.setView(markerFound.getLatLng(), 15); markerFound.openTooltip(); } else { console.log("Marker not found"); } } function getCity() { if(document.readyState === "complete") { var sensorName = document.getElementById("dropdwn").value; // POST request using fetch() fetch("{% url 'sensor' %}", { // Adding method type method: "POST", headers:{ 'Content-Type':'application/json; charset=UTF-8', 'X-CSRFToken':"{{ csrf_token }}", }, body: JSON.stringify({ sensor_name: sensorName }), }).then(response => response.json()) //convert the response to a JSON object .then(json => { var serverData = JSON.stringify(json); //Do something on the json object... console.log(serverData); }); } } </script> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js" integrity="sha512-8BqQ2RH4L4sQhV41ZB24fUc1nGcjmrTA6DILV/aTPYuUzo+wBdYdp0fvQ76Sxgf36p787CXF7TktWlcxu/zyOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <script> {{map.script.render|safe}} </script> </body> </html>

Run to view results

Configuration des urls pour les requêtes HTTP

L'occasion est venue pour nous de permettre aux visiteurs du site d'explorer les données sous forme de couches individuelles ou superposées. Nous devons maintenant configurer les url (uniform resource locator) comme suivant:

http://127.0.0.1:8000/ : Page d'accueil, on veut y afficher les couches de données de manière supperposée.

Copiez les fichiers urls.py du dossier partagé dans les bons dossiers de votre application GeoDjango.

Run to view results

.css-15w88e5{color:var(--chakra-colors-fg-neutral-primary);font-weight:inherit;letter-spacing:-0.09px;}Création d'une application géoweb avec Django et GeoDjango

Installation de la bibliothèque Django de Python

Création d'un projet et d'une application Django

Activation de l'extension GeoDjango

Activation de l'API de base de données spatiales pour Spatialite

Installation des bibliothèques géospatiales

Création de tables de l'ODM2 dans la base de données SQLite à partir du Model (première composante d'une application Django)

Ajout des séries temporelles

Affichage des données stockées dans une interface personalisée

Création d'un template (deuxième composante d'une application Django)

Configuration des urls pour les requêtes HTTP

Résultat de l'exercice

Création d'une application géoweb avec Django et GeoDjango