In questo articolo verrà presentato il nuovo componente GEO di Web.UP per la gestione delle mappe Google.

Scopo di questo nuovo componente è quello di consentire l’inserimento all’interno della vostre pagine web di mappe geografiche con vari livelli di dettaglio e la possibilità di personalizzare le mappe con l’inserimento di marcatori in specifiche posizioni. Il componente GEO è specifico per la gestione di mappe Google e oltre a gestire la personalizzazione e i setup tipici di questa tipologia di mappe, consentirà anche l’integrazione tra le mappe e l’ecosistema Web.UP (gestione del layout e dei dinamismi). Dato un XML di tipo matrice, tornato da una funzione, il componente è in grado di rappresentare dei marcatori o delle aree all’interno di mappe geografiche Google. I marcatori possono essere definiti specificando le coordinate sulla mappa (latitudine e longitudine) ma anche specificando un indirizzo, che verrà poi convertito in automatico nelle coordinate corrispondenti.

Utilizzo

Prima di poter utilizzare il componente GEO all’interno della vostra pagina web è necessario creare sul sito Google una API-KEY personalizzata seguendo le istruzioni presenti alla pagina:

https://developers.google.com/maps/documentation/javascript/get-api-key

La API-KEY creata con la procedura Google va poi registrata nella configurazione del vostro server Web.UP inserendo il valore nell’apposito campo “Google Maps API Key” della sezione “Advanced customization”

Una volta ottenuta e registrata la vostra API-KEY Google, per inserire un componente GEO all’interno di una scheda Web.UP è necessario creare nello script una sottosezione di tipo G.SUB.GEO ed impostare le modalità di visualizzazione del componete attraverso la definizione del relativo setup (G.SET.GEO).

Un esempio di script:

::I.SCH Nam(GE1)

 ::G.SEZ Pos(1)
   ::G.SUB.GEO Tit="*NONE" SubNote="Esempio componente GEO"
   ::G.SET.GEO Latitude="45,91294" Longitude="9,46472" LatCol="GEOLAT" LngCol="GEOLNG" TitCol="GEOTIT" Zoom="7"
   ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_GEO) 2(;;GEO_001)

::I.SCH.END

La funzione definita alla riga D.FUN.STD è il servizio Sme.UP che torna il posizionamento dei marcatori e delle aree sulla mappa visualizzata dal componente. La funzione torna un XML in formato matrice dove le specifiche colonne hanno un significato impostabile all’interno del setup del componente.

Un esempio di XML:

<?xml version="1.0" encoding="WINDOWS-1252"?>
<UiSmeup Testo="WETEST_GEO WEB : Prototipi GEO - ">     
  <Service Titolo1="" Titolo2="WEB : Prototipi GEO" Funzione="F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_GEO) 2(;;GEO_001) INPUT()" Servizio="B£SER_46" TSep="." DSep=","/>   
   <Griglia>
        <Colonna Cod="GEOLAT" Txt="Latitudine" Tip="" Lun="15;5" IO="O" Ogg="NR" Dpy="" Fill="" Aut="" ETxt=""/>
        <Colonna Cod="GEOLNG" Txt="Longitudine" Tip="" Lun="15;5" IO="O" Ogg="NR" Dpy="" Fill="" Aut="" ETxt=""/>
       <Colonna Cod="GEOTIT" Txt="Titolo" Tip="" Lun="35" IO="O" Ogg="" Dpy="" Fill="" Aut="" ETxt=""/>
       <Colonna Cod="OGGETTO" Txt="Oggetto" Tip="" Lun="35" IO="O" Ogg="CNCOL" Dpy="" Fill="" Aut="" ETxt=""/>
    </Griglia>
    <Righe>        
       <Riga Fld="45,59641|9,99725|SmeUP Erbusco|SANCOS"/>
       <Riga Fld="45,57135|9,19338|SmeUP Paderno|BOSSTE"/>        
       <Riga Fld="45,06893|7,54989|SmeUP Torino|CASFRA"/>
    </Righe>
    <UIPopup/> 
    <Setup>
        <Program Title="Geolocalizzazione da Coordinate" Context="">
           <UserSetups Disabled="Yes"/>
       </Program>
    </Setup>
</UiSmeup>

Ogni riga della tabella XML rappresenta un marcatore da visualizzare all’interno della mappa. Le coordinate dei marcatori definiti nella singola riga sono definite nelle colonne secondo una struttura definita nel setup del componente e dipendente anche dal tipo di marcatore da visualizzare.

Vediamo in dettaglio i principali attributi di setup gestiti dal componente.

Iniziamo con i setup relativi al formato di visualizzazione della mappa:

  • MapType: definisce il tipo di mappa Google visualizzata. Può valere HYBRID,  SATELLITE o TERRAIN. Se non definito vale HYBRID.
  • Latitide: imposta la latitudine della posizione centrale della mappa visualizzata. Se non definito è impostato in automatico al valore medio di latitudine dei markers da visualizzare.
  • Longitude: imposta la longitudine della posizione centrale della mappa visualizzata. Se non definita è impostata in automatico al valore medio di longitudine dei markers visualizzati.
  • Zoom: imposta il fattore di zoom per la visualizzazione della mappa. Se non impostato vale 1.
  • Fitbounds: se impostato a “yes” fa in modo che la mappa venga visualizzata con un livello di zoom che consenta la visualizzazione contemporanea di tutti i marcatori. Se impostato annulla l’effetto dell’attributo Zoom.
  • Draggable: se impostato a “no” fissa la visualizzazione della mappa alle coordinate impostate e impedisce che la mappa possa essere riposizionata su un’area di visualizzazione diversa da quella impostata dal setup. 
  • Width: se impostato fissa le dimensioni orizzontali della mappa visualizzata. Può essere definito come valore assoluto in pixel o come percentuale sullo spazio disponibile nella sezione
  • Height: come Width ma relativo alle dimensioni verticali della mappa.

I seguenti attributi di setup definiscono invece le modalità di posizionamento dei marcatori (definiti nel file XML tornato dal servizio) all’interno della mappa:

  • Type: definisce il formato di visualizzazione dei marcatori all’interno della mappa. Può assumere i seguenti valori:
    • Markers: visualizza marcatori di tipo puntuale, posizionati alle coordinate o all’indirizzo definito nella tabella XML. E’ la visualizzazione di default.
    • Polyline: crea una linea spezzata trai punti, uno per ogni riga dell’XML
    • Polygon: crea un poligono chiuso avente come vertici i punti, uno per ogni riga dell’XML
    • Circles: disegna sulla mappa dei cerchi aventi per centro le coordinate dei marcatori e come raggio i valori passati nello specifico campo valore.
    • Rectangle: disegna dei rettangoli aventi come vertici le coordinate definite nella tabella XML e dimensioni definite in una
  • LatCol: definisce il nome della colonna della tabella XML che contiene le latitudini
  • LngCol: definisce il nome della colonna della tabella XML che contiene le longitudini
  • AddCol: nome della colonna che contiene l’indirizzo del marcatore. E’ un campo alternativo ai precedenti e viene automaticamente trasformato in coordinate numeriche.
  • IcoCol: nome della colonna che contiene il nome dell’immagine da associare al marcatore.
  • StyCol: nome della colonna che contiene lo stile
  • TitCol: nome della colonna contenente i titoli da visualizzare sul marcatore
  • ValCol: nome della colonna che contiene il valore del raggio quando la visualizzazione dei marcatori è di tipo Cerchio

N.B. Sono presenti altri attributi e configurazioni che non è il caso di enumerare in questo articolo.

Dinamismi

Come tutti i componenti grafici di Web.UP anche il componente GEO consente di definire dei dinamismi associati a specifiche azioni svolte sul componente.

Nel caso della mappa i dinamismi possibili sono di due tipi:

Click del mouse su un punto qualsiasi della mappa

Definito dalla riga si script:

::G.DIN When="Click" Where="DEST"

Le variabili create dal dinamismo, specifiche del componente GEO, sono:

  • *GEO.LAT:  latitudine del punto cliccato sulla mappa
  • *GEO.LNG: longitudine del punto cliccato sulla mapp

 Click del mouse su un marcatore

Definito dalla riga di script:

::G.DIN When="markerselect" Where="DEST"

In questo caso le variabili create sono le seguenti:

  • *GEO.LAT:  latitudine del marcatore cliccato sulla mappa
  • *GEO.LNG: longitudine del marcatore cliccato sulla mappa
  • Tutte le variabili della riga “sottesa” al marker cliccato (come avviene con la matrice)

Esempi di visualizzazione

Mappa con marcatori di tipo Markers

Mappa con marcatori di tipo Rectangle

Mappa con marcatori di tipo Polygon

Mappa con marcatori di tipo Circle ed esempio di dinamismo