Python & Web Maps

Una guida alla mappatura interattiva con Python e GeoDjango

Cosa è una web map?

Una web map è la rappresentazione di un sistema geografico, che fornisce dati e informazioni spaziali.

La mappa può avere diverse caratteristiche, a seconda delle necessità:

può essere statica o dinamica;
può essere interattiva o meno;
può essere progettata utilizzando immagini fotografiche o modelli vettoriali.

In generale, per crearne una, abbiamo bisogno di un database spaziale per data-storage e di una libreria JavaScript.

GeoDjango

Questo non è un pacchetto esterno, al contrario, fa parte di Django, come contrib package, dalla versione 1.0: trasforma Django, come stavamo dicendo, in un framework spaziale geografico.

Come funziona? Innanzitutto, GeoDjango ci fornisce tipi di campi spaziali - ce ne sono diversi - e ci consente di eseguire query spaziali direttamente nell'ORM di Django. Inoltre, i campi sono già integrati nell'interfaccia di amministrazione.

Attualmente, GeoDjango supporta 4 database geospaziali.

PostGIS

Abbiamo utilizzato PostGIS in questo progetto: abbiamo optato per esso perché stavamo già usando PostgreSQL, ma anche perché rappresenta il backend di GeoDjango con il supporto più esteso.

Si tratta di un'estensione di PostgreSQL che integra direttamente dati spaziali.

Insieme a GeoDjango, PostGIS ci fornisce tipi di dati specifici per memorizzare le nostre informazioni spaziali. Inoltre, ci sono indici ottimizzati per i dati spaziali, così come funzioni specifiche che possiamo utilizzare per cercare questo tipo di dati.

Leaflet JS

Abbiamo aggiunto Leaflet al nostro stack, per la mappa frontend, per diverse ragioni.

Innanzitutto, è una delle librerie JavaScript più utilizzate per la rappresentazione di mappe su un browser.

Un altro aspetto di primaria importanza, sia per il cliente che per noi sviluppatori, consiste nel fatto che è un software gratuito, con una grande comunità di sviluppatori che partecipano al suo sviluppo. Inoltre, è mobile friendly, essenziale nell'era attuale, ed è anche molto leggero.

Inoltre, è estremamente facile da usare: la documentazione è accessibile e il risultato ottenuto ha prestazioni eccellenti.

Un esempio di mappa di base

Prendiamo l'applicazione Blog di Django, che si trova nella documentazione, e testiamola con questi tre modelli.

from django.db import modelsclass Blog(models.Model):    name = models.CharField(max_length=100)class Author(models.Model):    name = models.CharField(max_length=200)class Entry(models.Model):    blog = models.ForeignKey(Blog, on_delete=models.CASCADE)    headline = models.CharField(max_length=255)    authors = models.ManyToManyField(Author)

Dobbiamo aggiungere dati spaziali a questa applicazione e renderli in una mappa web. A partire da questo esempio, il primo passo è cambiare le impostazioni:

INSTALLED_APPS = [    # …    'django.contrib.gis',]DATABASES = {     'default' : {        'ENGINE' : 'django.contrib.gis.db.backends.postgis',        # …    } }

Dovremmo anche attivare l'estensione PostGIS con una migrazione:

from django.contrib.postgres import operationsfrom django.db import migrationsclass Migration (migrations.Migration) :    dependencies = [ ('blog',  '0001_initial') ]    operations = [        operations.CreateExtension ('postgis')    ]

[Hai bisogno dell'aiuto dei nostri esperti Python per creare mappe avanzate? Contattaci.]

L'altra modifica che dobbiamo apportare è aggiungere un PointField, importandolo da GeoDjango. Abbiamo anche aggiunto una proprietà, che sarà poi utile in Leaflet, per renderizzare longitudine e latitudine.

from django.contrib.gis.db.models import PointFieldfrom django.db import modelsclass Entry (models.Model) :    # …    point = PointField()    @property    def lat_lng(self):        return list(getattr(self.point, 'coords', [])[::-1])

Il modo più semplice per modificare le nostre voci consiste nel cambiare l'Admin per usarne uno specifico. Possiamo anche indicare attributi distinti e zoom di default.

Il risultato finale è una mappa con cui puoi interagire: puoi fare zoom in avanti e indietro e spostarti, tutto utilizzando poche righe di codice.

Una volta modificate le voci e aggiunti punti all'amministrazione, possiamo mostrarli su una mappa reale. Utilizziamo viste e URL per farlo:

from django.urls import pathfrom django.views.generic import ListViewfrom .models import Entryclass EntryList (ListView) :    queryset = Entry.objects.filter(point__isnull=False)urlpatterns = [    path ('map/', EntryList.as_view()),]

Dopo aver definito EntryList, lo mappiamo a un URL: ed è qui che termina il lavoro lato backend. Il passo successivo riguarda la scrittura del template.

Iniziamo includendo lo stile JS di Leaflet e la libreria JavaScript nell'intestazione. Quindi scriviamo un div che ci consentirà di rendere la mappa nella parte html:

<script type="text/javascript">  var m = L.map('m').setView([43.77, 11.26], 15); // Florence  L.tyleLayer ('//{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(m);  {% for e in object_list %}    L.marker({{e.lat_lng}}).addTo(m);  {% endfor %}</script>

Per quanto riguarda la parte JavaScript: L sta per Leaflet, renderizziamo la mappa nel nostro div e impostiamo la vista della mappa, la latitudine, la longitudine e lo zoom. Scegliamo anche il tile che deve essere inserito: in questo caso utilizziamo Open Street Map per la parte grafica, altrimenti non vedremmo nulla.

Inseriamo poi un ciclo con l'elenco dei marker e chiediamo a Leaflet di stamparne uno con latitudine e longitudine per ogni marker.

Questo codice è effettivamente funzionante: potete provare a usarlo anche voi, seguendo tutti i passaggi!

WARNING: PostGIS chiede prima la longitudine e poi la latitudine, mentre Leaflet, al contrario, chiede prima la latitudine e poi la longitudine. Per questo motivo abbiamo creato una proprietà.

Hai bisogno dell'aiuto dei nostri esperti Python per creare mappe avanzate?

Contattaci oggi stesso per discutere le tue esigenze e scoprire come possiamo aiutarti!

CHI SIAMO

Siamo una società di management e sviluppo di prodotti digitali.

La nostra missione è creare prodotti che abbiano un impatto positivo tangibile su utenti, aziende e comunità, riducendo al minimo le risorse utilizzate.

Stiamo lavorando per migliorare la UX del sito djangoproject.com.

Leggi l'articolo ( English Only)