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

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)

Mostra soluzione

# SOLUZIONE