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.