Mappe interattive
Introduzione
Vediamo come controllare da Python delle mappe visualizzate in Jupyter con la libreria ipyleaflet e OpenStreetMap, la mappa libera del mondo realizzata da volontari.
ATTENZIONE: Ciò che segue è solo una bozza MOLTO IN-PROGRESS !!!!!
Prerequisiti
Per proseguire è necessario prima aver letto il tutorial sulle interfacce utente in Jupyter (che parla degli ipywidgets)
Riferimenti
per una panoramica sul webmapping, la geolocalizzazione e OpenStreetMap, puoi vedere il tutorial Integrazione dove si mappano gli agritur del Trentino.
per una rapida guida sull’HTML, vedere tutorial CoderDojoTrento web 1
Installazione ipyleaflet
Anaconda:
Apri Anaconda Prompt (per istruzioni su come trovarlo o se non hai idea di cosa sia, prima di proseguire leggi sezione interprete Python nell’introduzione) ed esegui:
conda install -c conda-forge ipyleaflet
Installare ipyleaflet
con conda
abiliterà automaticamente l’estensione per te in Jupyter
Linux/Mac:
installa ipywidgets (
--user
installa nella propria home):
python3 -m pip install --user ipyleaflet
abilita l’estensione così:
jupyter nbextension enable --py ipyleaflet
Proviamo OpenStreetMap
Per prima cosa prova a navigare OpenStreetMap:
https://www.openstreetmap.org/#map=12/46.0849/11.1461
Spostati con la mappa, cambia lo zoom e nota cosa appare nella barra in alto dell’indirizzo del browser: dopo il #
troverete le coordinate (latitudine e longitudine) e livello di zoom separati da una /
:
Mettiamo un palloncino
Possiamo visualizzare una mappa in Jupyter sfruttando le coordinate trovate in OpenStreetMap. Inoltre, possiamo inserire dei palloncini (detti marker, vedi documentazione), associando ad essi una descrizione formattata in linguaggio HTML - per una breve guida sull’HTML, vedere il tutorial CoderDojoTrento web 1
Nota che nella descrizione possiamo anche aggiungere immagini. In questo caso l’immagine d’esempio (immagini/disi-unitn-it-logo.jpeg) risiede nella sottocartella immagini
di questo foglio, ma volendo si potrebbero anche linkare foto da un sito qualunque usando il loro indirizzo per esteso, per esempio potresti provare a mettere questo indirizzo del logo CC BY che sta sul sito di softpython: https://it.softpython.org/_images/cc-by.png
[1]:
from ipywidgets import HTML, Layout, VBox, Button, Label, Image
from ipyleaflet import Map, Marker, Popup
# definiamo il centro della mappa su Trento (latitudine, longitudine)
centro_mappa = (46.0849,11.1461)
# per il livello di zoom giusto, puoi usare OpenStreetMap
mappa = Map(center=centro_mappa, zoom=12, close_popup_on_click=False)
# adesso andiamo a creare dei widget da mettere nel popup dei palloncini
# cominciamo con un bottone
bottone = Button(description="Cliccami")
def bottone_cliccato(b):
b.description="Mi hai cliccato !"
bottone.on_click(bottone_cliccato)
# per mostrare del testo formattato che contenga anche immagini, si può usare il linguaggio HTML
# per una breve guida sull'HTML, vedere il tutorial https://www.coderdojotrento.it/web1
# creiamo un widget HTML
# i tre doppi apici """ indicano che iniziamo una cosiddetta multistringa, cioè una stringa su più righe
html = HTML("""
Descrizione in <b>linguaggio HTML</b>,<br>
<a target="_blank" href="https://www.coderdojotrento.it/web1">vedi tutorial</a>. <br>
Questa è un immagine: <br/>
<img src="immagini/disi-unitn-it-logo.jpeg">
""")
# creaimo il pannello del popup come una VBox che contiene i due widget definiti precedentemente:
pannello_popup = VBox([bottone, html])
# il marcatore sarà un palloncino sul DISI, il Dipartimento di Informatica a Povo, Trento
marcatore = Marker(location=(46.06700,11.14985))
# associamo al marcatore un popup nella forma di un widget html
marcatore.popup = pannello_popup
# aggiungiamo il marcatore alla mappa
mappa.add_layer(marcatore)
# creiamo un widget che contenga titolo (in html) e la mappa
webapp = VBox([HTML("<h1>CLICCA SUI PALLONCINI</h1>"), mappa])
# infine forziamo Jupyter a mostrare il tutto:
display(webapp)
[1]:
[ ]: