Documentazione Grules, versione 2.1

---

Seconda applicazione: usare un database

Nell'esempio precedente abbiamo specificato i punti sulla mappa ed i loro attributi direttamente nel codice javascript. Spesso è conveniente generarli dinamicamente in una jsp (o un php).

Supponiamo di voler visualizzare un elenco di farmacie contenuto nella tabella di database farmacie; per visualizzare le farmacie sulla mappa avremo bisogno delle coordinate Gauss Boaga della farmacia (n, e), un id univoco (id) e il nome della farmacia (label). Altre informazioni, indirizzo, numero di telefono, etc. saranno visualizzate quanto l'utente seleziona una farmacia.

Un'esempio di tabella db:

CREATE TABLE farmacie (
  id      PRIMARY KEY INT,
  n       DOUBLE,
  e       DOUBLE,
  label   TEXT, 
  address TEXT, 
  tel     TEXT,
  email   TEXT,
  tipo    ENUM { pubblica, privata }
)

Jsp o php

farmacie/list.php sarà un semplice script che interroga il database e ritorna l'elenco delle farmacie in formato GeoJSon.

In php e mysql (al netto del controllo degli errori):

{ "type": "FeatureCollection",
  "features": [
<?
mysql_connect(localhost,$user,$password);
mysql_select_db($database)
$result = mysql_query("SELECT id, n, e, label, tipo FROM farmacie");

while($row = mysql_fetch_row($result)) { ?>
    { 
      "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [<?$row['e']?>, <?$row['n']?>]},
      "properties": {
        "id": <?$row['id']?>,
        "label": <?$row['label']?>
        "tipo": <?$row['tipo']?>
      }
    }
<?
  }
?>
  ]
}

La parte properties è può contenere campi arbitrari, ma è consigliato assegnare i campi id e label, che vengono usati di default (se presenti) in molte componenti dell'applicazione.

farmacie/info.php restituisce un frammento di html contenent le informazioni di una farmacia. Accetta come parametro l'id della farmacia.

In php: (manca il controllo degli errori!)

<?mysql_connect(localhost,$user,$password);
mysql_select_db($database);
$id = $_GET['id'];
if(!isNumber($id)) {
  echo("Error");
  return;
}
$result = mysql_query("SELECT * FROM farmacie WHERE id = $id");
$row = mysql_fetch_row($result)
?>

<h3><?$row['label']?></h3>
<p><?$row['indirizzo']?></p>
<p>Tel: <?$row['tel']?>, email: <?$row['label']?></p>

Javascript

Negli attributi del layer, geometry contiene l'url alla quale reperire il GeoJSON, e info l'url da usare per visualizzare le informazioni relative ad una farmacia

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

Customizzare la presentazione

Se gli oggetti da presentare sono organizzati in categorie (per esempio le farmacie in pubbliche e private, potremmo cambiare lo stile degli oggetti sulla mappa, in base alla categoria; per prima cosa è necessario fornire l'informazione attraverso una proprietà dell'oggetto: al GeoJSON restituito da farmacie.jsp aggiungiamo il campo tipo.

...
"properties": {
        "id": 1,
        "label": "Farmacia comunale di Pisa",
        "tipo": "pubblica"
      }
...

Nel layer aggiungiamo una stylemap, che assegna ad ogni categoria un'icona diversa:

var farmacie = {
  id: "farmacie",
  geometry: { url: "farmacie.jsp" }
  style: { graphicWidth: 12, graphicHeight: 12, externalGraphic: 'needles/farmacie/pubbliche.png' }
  stylemap: { 
    field: "tipo",
    map: {
      "pubblica" : { externalGraphic: 'needles/farmacie/pubbliche.png' },
      "privata" :  { externalGraphic: 'needles/farmacie/private.png'},
    }
  },
  info: { url: "farmacie_info.jsp?id=<%=id%>" },
  detail: "<%=label%>: <%=tipo%>"
}

Infine abbiamo aggiunto un piccolo template ejs come detail, visualizzando il tipo al passaggio del mouse.