Pubblicare una mappa e controllarne l’accesso

Ultima traduzione dei tutorial su uMap pubblicati sul wiki di Carto Cité, in questo mese e mezzo delle vacanze estive sono stati tradotti e pubblicati 9 articoli. Non male 🙂
Spero possano essere utili a una più larga diffusione di uMap che continuo a pensare sia un ottimo strumento da utilizzare anche a scuola.
Anche se il programma nelle sue funzioni essenziali si capisce, la traduzione italiana dell’interfaccia di uMap è ancora da precisare e completare in diversi punti, spero ci sarà modo e tempo per farlo.

Ancora una volta un ringraziamento ad Antoine Riche, l’autore di questi tutorial.

Buon divertimento con uMap 🙂


Cosa impareremo

  • Inserire una mappa in una pagina HTML
  • Pubblicare una mappa su WordPress
  • Adattare le funzioni della mappa
  • Definire chi può vedere o modificare la mappa

Andiamo per gradi

1. Inserisci una mappa in una pagina HTML

icona_condividi Nel tutorial Come consultare una mappa uMap abbiamo visto che il menu di condivisione consente di incorporare una mappa in iframe, senza fornire ulteriori dettagli. Vediamo come si fa.

Un iframe è un tag del linguaggio di marcatura HTML che consente di incorporare (embed) il contenuto di una pagina Web in un’altra pagina Web. In realtà è molto semplice e abbiamo già utilizzato questo meccanismo per incorporare un video nel tutorial Creare finestre pop-up multimediali.

export-iframeEcco i passaggi da seguire:

  1. apri il pannello Includi e condividi questa mappa

  2. copia tutto il testo sotto Includi la mappa (suggerimento: posiziona il cursore sul testo quindi usa le scorciatoie Ctrl + a per selezionare tutto quindi Ctrl + c per copiare la selezione)

  3. incolla il testo copiato nel codice sorgente del file HTML in cui vuoi incorporare la mappa (scorciatoia da tastiera: Ctrl + v)

Ecco un esempio minimalista di un file HTML in cui è stato incorporato l’iframe di una mappa uMap:

<! DOCTYPE html> 
<html> 
    <head> 
        <title> Esempio di mappa uMap incorporata in una pagina web </title> 
        <meta charset = "UTF-8"> 
    </head> 
    <body> 
        <div> 
            <h1> La mappa del festival </h1> 
            <iframe width = "100%" height = "300px" frameBorder = "0" src = "https://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381 ? ScaleControl = false & minimappa = false & scrollWheelZoom = false & ZoomControl = true & AllowEdit = false & moreControl = true & searchControl = null & tilelayersControl = null & embedControl = null & datalayersControl = true & onLoadPanel = caption & captionBar = false "> < / iframe> 
            <p> <a href =" http://umap.openstreetmap.fr/ fr / map / festival-des-3-continents_26381 "> Visualizza a schermo intero </a> </p> 
            <p> Questa mappa è offerta da Carto'Cité :-) </p> 
        </div> 
    </ body> 
</html>

Ecco la mappa incorporata in questa pagina, utilizzando le opzioni di esportazione di default:



Ovviamente questo presuppone la conoscenza di un po’ di HTML e di avere un server su cui pubblicare un file del genere. Ma il principio è stabilito e non è così complicato. Ora diamo un’occhiata a un caso più comune.

2. Pubblica una mappa su WordPress

La pubblicazione di una mappa su un sito WordPress funziona come sopra, copiando il codice HTML dall’iframe nell’editor di WordPress. Però è necessario utilizzare l’editor di testo (scheda Testo) e non l’editor visuale.

Pubblica la pagina e il gioco è fatto!

Nota bene: i siti su https://wordpress.com per ragioni di sicurezza non permettono di incorporare iframe. 
È perciò impossibile pubblicare una mappa uMap su questi siti.

3. Adattare le funzionalità della mappa

La mappa incorporata sopra non è molto pratica: la sua altezza è insufficiente e il pannello laterale è solo parzialmente visibile. I pulsanti disponibili a sinistra non sono necessariamente adatti, ad esempio non vogliamo inserire il selettore di livelli.

La scheda Opzioni di esportazione iframe ti consente di controllare tutto questo. Alcune di queste opzioni corrispondono alle opzioni dell’interfaccia viste nel tutorial Come modificare e personalizzare una mappa di uMap. Tutto quello che devi fare è attivare queste opzioni per il codice di importazione dell’iframe da modificare. Una volta scelte le opzioni, copia questo codice e poi incorporalo nella tua pagina web.

opzioni_esp_iframe Le prime opzioni sono specifiche per l’esportazione in iframe e meritano di essere commentate:

  • la larghezza del 100% permette di utilizzare tutta la larghezza disponibile della pagina. Puoi impostare una larghezza fissa sostituendo il testo con una larghezza in pixel, ad esempio 800 px

  • il collegamento “schermo intero” indica il collegamento Visualizza a schermo intero sotto la mappa. Ciò consente all’utente di visualizzare la mappa uMap come l’abbiamo vista finora.

  • L’opzione Vista attuale anziché vista predefinita consente di applicare all’esportazione la posizione corrente e il livello di zoom della mappa. Questa opzione è ad esempio interessante per produrre più zoom della stessa mappa.

  • L’opzione Mantieni i livelli attualmente visibili consente di scegliere i livelli inclusi nella mappa esportata. Questa opzione è utile per produrre più schede per più profili utente.

  • Abilitare lo zoom con la rotella non è molto adatto se la mappa è incorporata in una pagina lunga, che gli utenti faranno scorrere con la rotella: una volta raggiunta la mappa, la pagina non scorrerà più e la mappa si rimpicciolirà. Niente di grave, ma questo comportamento può sorprendere.

Ad esempio, ecco la stessa mappa di cui sopra, con una vista e una scelta di livelli diverse e la maggior parte delle opzioni disabilitate. È possibile spostare la mappa ma non ingrandire o modificare i livelli.

4. Definisci chi può vedere o modificare la mappa

umap_edit_rights Il pulsante Cambia permessi ed editor dà accesso al pannello aggiorna autorizzazioni. Questo permette di controllare, per ogni mappa, chi può vederla e chi può modificarla.

cambia_permessi Quando crei una mappa, questa è visibile nel tuo catalogo mappe il cui indirizzo è http://umap.openstreetmap.fr/fr/user/<tuo-account>/: è selezionata l’opzione Chiunque (pubblico) dal menu a discesa Chi può vedere. Le altre opzioni di questo menu sono:

  • chiunque abbia il link: la mappa non compare più nel tuo catalogo, ma le persone che ne conoscono il link possono visualizzarla.

  • solo autori: solo le persone che hanno il diritto di modificare la mappa, e identificate come tali, possono consultare la mappa. A chiunque altro sarà negato l’accesso. Non utilizzare questa opzione se stai incorporando la mappa in un iframe.

Quando crei una mappa, solo tu puoi modificarla. Puoi invitare altri utenti a modificarlo selezionando l’opzione Solo gli editor possono fare modifiche nel menu Chi può modificare, quindi inserendo il nome dell’account degli utenti invitati uno per uno nel campo Editor della mappa.
Il nome di ciascun utente viene aggiunto dopo questo campo.

L’opzione Chiunque può modificare è utile per creare una mappa in maniera collaborativa.

Nota bene: uMap non permette a più editor di modificare la mappa contemporaneamente. Il programma ti avvisa quando l’operazione Salva rischia di cancellare le modifiche di un altro utente, devi scegliere tra le sue modifiche, confermando  Salva o le tue, annullando le sue. Se più editor lavorano a una stessa mappa devono accordarsi prima di modificare la mappa.

Infine puoi trasferire la proprietà di una mappa ad un altro utente: cancella l’attuale proprietario (tu) cliccando sulla crocetta a destra del campo Proprietario della mappa, quindi inserisci il nome dell’account dell’utente a cui stai cedendo la mappa.

Facciamo il punto

In questa fase sappiamo creare una mappa strutturata con contenuti multimediali, sappiamo pubblicarla e incorporarla in una pagina web, sappiamo anche modificarla in modo collaborativo. Presto potremo passare al livello avanzato, dove impareremo come importare dati in una mappa ed esploreremo le capacità di apertura di uMap.

Ma prima di questo, finiremo il livello intermedio occupandoci del caso dei poligoni

2 pensieri su “Pubblicare una mappa e controllarne l’accesso

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...