Documentazione Grules, versione 2.1


Integrare grules in una pagina html

Le mappe ed i temi disponibili su http://mappe.rete.toscana.it possono essere integrati all'interno di una pagina HTMLattraverso due meccanismi:

Iframe

È l'opzione più semplice: consente di selezionare i temi visibili e la regione di interesse, di navigare la mappa, ma non di controllarla tramite javascript. Tutti i temi sono disponibili.

È sufficiente includere nell'html un iframe con l'url corretta (come per esempio in embedding.html):

<iframe src="http://mappe.rete.toscana.it/webstat/index.html?layers=musei&on=musei.arte"
        style="width:600px; height;400px;" frameBorder="0"></iframe>

Tramite url è possibile configurare l'aspetto iniziale della mappa, i parametri sono documentati nella sezione tecnica.

La lista dei temi disponibili si trova su elenco layers.

HTML + Javascript

Carica le librerie javascript e instanzia un elemento (div) della pagina come mappa, ed eventualmente una lista di oggetti presenti sulla mappa e di controlli per attivare e disattivare i vari temi. Il layout della pagina e la scelta delle componenti sono a discrezione dell'utente in questo caso.

E' possibile infine creare nuovi temi ed aggiungere elementi tramite Javascript.

Come mostrare una mappa ed un tema:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8" /> 
</head>
<body>

 <div id="map" style="width:600px; height;400px;"></div>

 <script src="http://mappe.rete.toscana.it/webstat/js/jquery.js"></script>
 <script src="http://mappe.rete.toscana.it/webstat/js/jquery-ui.js"></script>
 <script src="http://mappe.rete.toscana.it/webstat/openlayers/OpenLayers.js"></script>
 <script src="http://mappe.rete.toscana.it/webstat/js/grules2.1.js"></script> 
 <script>
   loadRemoteLayer("http://mappe.rete.toscana.it/webstat", "museicateg", 
     function() {
       Grules.layers['musei.3'].setVisibility(true);
     });
 </script>

</body>
</html>

Il div map conterrà la mappa; lo script carica il layer musei e attiva il sottolayer musei.3 (musei storici); inizialmente i layer sono tutti disattivati, e non caricando i controlli, l'utente non avrebbe modo di accenderli. La funzione setVisibility dev'essere eseguita una volta caricato il layer, per questo viene registrata come callback (terzo parametro) di loadRemoteLayer.

Tramite javascript è possibile anche configurare la regione iniiale di zoom della mappa ed altri parametri, descritti in questa pagina.

Aggiungere controlli

Se nella pagina è presente un div con id controls ad esempio:

  <div id="controls"></div>

all'interno di esso verranno visualizzati i controlli standard per attivare e disattivare i temi caricati:

.

Lista degli oggetti visibili sulla mappa

Nel div con id list verranno visualizzati gli oggetti visibili sulla mappa. Il numero di oggetti è variabile, generalmente si aggiungono le scroll bar.

  <div id="list" 
          style="height:600px; overflow:scroll">
</div>

Ricerca per indirizzo

Instanziando un div con id uguale a norma i menù della ricerca per indirizzo verranno instanziati automaticamente

  <div id="norma"></div>

Aggiungere un tema

I temi possono essere aggiunti direttamente tramite javascript, come descritto nel primo esempio:

<script>

$(function() {

var citta = {
  id: "citta", 
  geometry: [
      { id: '1', e:1617338, n:4845112, label: 'Pisa',    text: "Città marinara"          },
      { id: '2', e:1688226, n:4856128, label: 'Firenze', text: "Patria di Dante"         },
      { id: '3', e:1749425, n:4801122, label: 'Arezzo',  text: "Antica capitale etrusca" },
      { id: '4', e:1696928, n:4804151, label: 'Siena',   text: "Antica città toscana"    }
  ],
  style: { externalGraphic: 'needles/drop/maraschino.png', 
           graphicWidth: 12, graphicHeight: 12, cursor: 'pointer'  },
  info: "<h3><%=label%></h3><p><%=text%></p>" 
};

addLayer(citta); 

});
</script>

oppure usando il GeoJSON, come descritto nel secondo esempio:

var farmacie = {
  id: "farmacie",
  geometry: { url: "farmacie/list.php" }
  style: { graphicWidth: 12 graphicHeight: 12, externalGraphic: 'farmacie/pubbliche.png' }
  info: { url: "farmacie/info.php?id=<%=id%>" }
};

oppure come nell'esempio disponibile online, che raggruppa in un'unica mappa le varia modalità per inserire i layers.

Icone

I set di icone usati nei vari progetti sono raccolti nella directory needles.