Creare mappe vettoriali dinamiche con Joomla e LinkyMap

Linky Map è un componente a pagamento sviluppato da JoomUnited che consente di creare delle mappe vettoriali interattive da mostrare sul proprio sito Joomla. Linky Map utilizza i dati di Google Geochart per generare mappe vettoriali con marker personalizzati, regioni colorate, tooltip e descrizioni HTML.

È possibile creare mappe vettoriali personalizzate del mondo, di stati, regioni, o province/contee. Il back-end del componente è abbastanza user friendly, le mappe interattive generate nel front-end hanno un aspetto gradevole e professionale e gli usi possibili sono molteplici (evidenziare il numero di clienti, download, servizi erogati per regione o per stato). Per vedere il componente in azione, clicca qui.

 

Caratteristiche

Il componente consente di settare un ampio numero di caratteristiche delle mappe:

●      Layout (fisso, con sidebar)

●      Colori (bordi, sfondo, ecc.)

●      Editor WYSIWYG per la descrizione di ogni area della mappa: si possono anche richiamare plugin in differenti punti (come moduli di contatto personalizzati per ogni regione/stato)

●      Ottimizzazione SEO (tutte le mappe generate possono essere lette dai motori di ricerca, sono solo immagini SVG e HTML)

●      Geocoding automatico (consente di trasformare un indirizzo in coordinate geografiche di latitudine e longitudine)

●      Possibilità di inserire la geolocalizzazione di Google Maps

●      Possibilità di inserire dei marker all’interno della mappa (punti colorati o testo)

 

Installazione e configurazione della mappa

Dopo aver installato il componente, per creare e configurare la prima mappa, bisognerà andare in Componenti -> Linky Map e cliccare su “Add New Region”.


A questo punto si dovranno settare tutti i parametri della mappa:

●      Name: nome della mappa

●      Alias della mappa (Utilizzato per gli URL SEF)

●      Region to display: qui si dovrà scegliere la mappa da visualizzare. Se vogliamo mostrare il mondo, sceglieremo “World”, altrimenti possiamo scegliere una serie di mappe di stati, regioni e in alcuni casi province/contee.



Action: qui si imposta la tipologia di link aggiunti nelle aree della mappa o nei marker (link aperti nella stessa finestra o in una nuova finestra del browser, in una sidebar o in un modal box. Se non si aggiungeranno link alle aree si scelga “none”).
Parametri grafici: in alto a destra si può scegliere un’ampia varietà di settaggi grafici per la nostra mappa (colore dello sfondo, dei bordi, delle aree inattive e delle aree al passaggio del mouse, spessore dei bordi e dimensione di eventuali marker).

Potremo osservare l’anteprima della mappa creata in basso a sinistra:


Per inserire delle aree interattive bisognerà compilare i seguenti campi (per ogni area aggiunta):

●  Region: qui va inserita l’area da aggiungere (stato, regione o provincia). Basterà digitare il nome dell’area (in inglese) utilizzando la ricerca predittiva del componente; in alternativa si può inserire il codice ISO-3166-1 dell’area geografica da aggiungere (cliccando su “ISO-3166-1” si verrà reindirizzati sulla pagina Wikipedia che contiene la lista dei codici ISO di ogni stato. Si dovrà inserire il codice a due lettere della seconda colonna della tabella, denominata “Alpha-2 code”).

●  Tooltip title: il titolo del box che comparirà al passaggio del mouse sulla regione selezionata

●  Tootltip description: la descrizione del box

●  Link: eventuale link al quale l’utente verrà reindirizzato cliccando sull’area in questione

●  Color: colore dell’area in questione

A questo punto basterà cliccare su “Add” per aggiungere l’area. Si può ripetere l’operazione per tutte le aree necessarie.

NB: dopo ogni aggiunta si consiglia di cliccare il tasto “salva” in alto a sinistra, in modo da non perdere alcuna aggiunta o modifica effettuata.


Aggiunta dei marker

Dopo aver creato la mappa si potranno aggiungere dei marker. Bisognerà andare in Componenti -> Linky Map e cliccare su “Add New Marker”.

La procedura per l’aggiunta di marker è molto simile a quella per la creazione della mappa. Si potrà scegliere la tipologia di marker (“type”): testo (Text) o cerchio (Circular Dot). Si potrà inserire il marker tramite geocode. Il componente creerà in automatico la latitudine e longitudine della posizione indicata.

 

Visualizzazione della mappa da front-end

Per visualizzare la mappa sul vostro sito Joomla, si potranno scegliere diversi metodi:

  1. utilizzare il modulo Linky Map (richiamando una delle mappe create);


  2. utilizzare una voce di menu Linky Map;


  3. richiamare la mappa da un articolo tramite editor. Per far ciò, bisognerà assicurarsi che in Estensioni -> Plugin i componenti Linky Map siano tutti attivi.

    Una volta attivati i componenti, si potrà richiamare la mappa tramite il tasto “Linky Map” in fondo al vostro editor.


Link utili

Documentazione

Forum di supporto

Pagina JED

Video demo