Usare i poligoni in uMap

Ecco la terza traduzione dei tutorial del “livello intermedio” pubblicati sul wiki di Carto Cité, questa volta presentiamo l’utilizzo dei poligoni, una delle “geometrie” usate da uMap e come importare dei dati da OpenStreetMap. Ho lasciato per ultimo il tutorial sulla pubblicazione delle mappe e il controllo degli accessi.

Un grazie ad Antoine Riche, l’autore di questi tutorial.

Buon divertimento con uMap 🙂


Perché trattare i poligoni separatamente se sono solo una linea chiusa? Un poligono in realtà è molto più di una linea chiusa. Questa linea separa l’interno del poligono dal suo esterno, questo è importante perché uMap può reagire a un clic all’interno del poligono. Inoltre, un poligono può essere forato, perciò è definito da più linee.

Cosa impareremo

  • Creare un poligono e modificarlo
  • Disegnare un poligono: riempimento e contorno
  • Associare un URL a un poligono
  • Estrarre i confini amministrativi da OpenStreetMap
  • Importare i dati in una mappa

Andiamo per gradi

1. Crea un poligono

Torniamo alla mappa delle nostre vacanze a Crozon. In una giornata di sole affittiamo un gommone e navighiamo nella zona definita dal circolo nautico. Aggiungiamo quest’area alla mappa.

icona_poligoni Il pulsante Disegna un poligono permette di disegnare punto per punto il perimetro di un poligono, e di terminarlo cliccando nuovamente sull’ultimo punto come per disegnare una linea. C’è però una differenza: dal terzo punto l’interno del poligono è colorato.

Proprietà di un poligono

proprieta_forma_it

  • Le opzioni relative a tratto e riempimento consentono di non visualizzare il perimetro o l’interno del poligono: se nessuno dei due viene visualizzato il poligono è invisibile.

  • il colore del riempimento è di default quello della linea, ma può essere modificato.

  • una bassa opacità del riempimento permette di vedere lo sfondo della mappa sotto il poligono. [N.d.t. quello che nell’interfaccia italiana viene chiamato “peso” (?!) è lo spessore del tratto]

Creare un foro in un poligono

A volte è utile creare uno o più fori in un poligono, ad esempio per disegnare una radura in una foresta o un’isola in mezzo a uno stagno.

afggiungi_foroÈ possibile creare un poligono con uno o più fori cliccando sull’opzione Aggiungi percorso interno quando si seleziona un poligono in modalità di modifica.

Il primo punto del perimetro interno viene creato direttamente nel punto in cui si è cliccato prima di scegliere Aggiungi percorso interno .

Osserva che le proprietà del perimetro di un poligono si applicano a tutti i perimetri – esterni e interni.

2. Definire le interazioni con un poligono

permetti_interazioneLa scheda Opzioni di interazione fornisce due opzioni specifiche per i poligoni.

Qualsiasi interazione può essere disabilitata selezionando OFF per l’opzione Permetti interazioni. Nessuna finestra pop-up viene quindi visualizzata quando si clicca sul poligono. Questa opzione è interessante per mettere in rilievo un’area della mappa senza che l’utente possa interagire con essa.

 

visualizza_dati Ecco un esempio che mostra l’Ile de Nantes circondata da una grande linea rossa e senza riempimento. Non è possibile cliccare sul contorno o all’interno del poligono.

L’interazione con il poligono rimane disabilitata in modalità  Modifica. Per poter modificare il poligono è poi necessario passare attraverso il pannello Visualizza dati (sempre accessibile tramite il pannello Legenda, esso stesso accessibile dal link Informazioni in basso a destra della mappa).

opzioni_interazione_it Al contrario, è possibile associare un poligono ad un URL: cliccando sul poligono si apre direttamente la pagina Web corrispondente, senza passare per una finestra pop-up. Tutto quello che devi fare è definire il Link to… quindi inserire l’URL.
Ci sono tre opzioni per definire
dove verrà aperta la pagina web:

  • nuova finestra: la pagina si apre in una nuova scheda del browser

  • stessa finestra: la pagina si apre nella stessa scheda di quella della mappa

  • iframe: se la mappa è integrata in un iframe, la pagina web viene quindi aperta all’interno dell’iframe

L’associazione di un URL ad un poligono consente di creare un menu cartografico, ovvero una mappa che consente l’accesso a più pagine Web a seconda della zona su cui l’utente fa clic. Ecco un esempio che mostra i diversi quartieri di Nantes: cliccando su un distretto si apre la pagina corrispondente del sito http://www.nantes.fr

[N.d.t. Come si può vedere questa immagine non è interattiva, perché il sito wordpress.com non accetta questo tipo di embedding; la pagina a cui rimanda è comunque questa:
https://umap.openstreetmap.fr/fr/map/quartiers-de-nantes_126581]

Ecco i passaggi per realizzare questa mappa.

a. Recupera i contorni dei quartieri

Il contorno dei quartieri di Nantes proviene dai confini amministrativi di OpenStreetMap (per maggiori informazioni, vedere questa pagina Wiki). Il sito OSM Boundaries ti consente di selezionare i confini amministrativi uno per uno, quindi esportarli in diversi formati.

OSM Boundaries

Segui questi passaggi:

  1. accedi al tuo account OpenStreetMap (necessario per poter esportare i confini amministrativi)
  2. seleziona uno ad uno i confini amministrativi, aprendo successivamente i diversi livelli: nazione – regione – dipartimento ecc.
  3. seleziona il formato di esportazione JSON: viene quindi utilizzato il formato GeoJSON
  4. clicca su Esporta

importa_datiPoi recupererai nella cartella dei download un file con estensione .geojson.

b. Importa i contorni del quartiere in una mappa

icona_importa In una nuova mappa, clicca su Importa dati. Nel pannello che poi compare, seleziona il file prodotto nel passaggio precedente.

Il selettore di formato si posiziona automaticamente su geojson , selezionalo in caso contrario, ad esempio perché l’estensione del file non è .geojson. Clicca su Importa: le curve di livello vengono visualizzate sulla mappa.

c. Configura la mappa uMap

Configura il livello per visualizzare o meno un’etichetta al passaggio del mouse, quindi modifica ogni poligono per associare l’URL alla pagina web corrispondente, come abbiamo visto sopra.

limiti_geografici E infine è possibile, nelle Impostazioni della mappa, definire i limiti di confine (geografici) della mappa. Questo per evitare che l’utente sposti la mappa oltre questi limiti.

d. Incorpora la mappa in un iframe

Recupera il codice dell’iframe, come abbiamo visto nel tutorial precedente , avendo cura di disattivare tutte le opzioni di interazione: pulsanti di zoom, zoom con la rotella, pulsante “Altro” ecc.

Copia questo codice iframe nella tua pagina web e il gioco è fatto!

Quando si modifica la mappa, è necessario ricaricare completamente la pagina contenente l’iframe per svuotare la cache del browser, ad esempio su Firefox. utilizzando Ctrl + F5

Facciamo il punto

Questo tutorial segna la fine del livello intermedio. Sai come strutturare il contenuto di una mappa con i livelli e come utilizzare gli stili predefiniti. Sai come formattare i le finestre pop-up e integrarvi contenuti multimediali. Sai come incorporare la tua mappa in una pagina web e controllare chi può vederla e modificarla.

Testo originale: https://wiki.cartocite.fr/doku.php?id=umap:8_-_le_cas_des_polygones

Traduzione italiana: nilocram
Testo distribuito con licenza CreativeCommons Attribution-Share Alike 4.0

2 pensieri su “Usare i poligoni in uMap

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...