Concludiamo questa serie di articoli su OpenLayers mostrando come è possibile tematizzare un layer usando OpenLayers.
Tempo fa abbiamo visto come ciò fosse possibile lato server utilizzando SharpMap e lavorando su uno ShapeFile.
Il nostro scopo è produrre una mappa del genere,
nella quale possiamo scegliere il livello base tra Open Street Map, Open Layers e Google.
L’Europa è divisa in 5 regioni, ognuna delle quali è caratterizzata da un proprio stile. Lo stile è definito anche per l’evento click. Se per esempio clicchiamo sulla Francia, avremo il seguente risultato.
A ciascuna regione dell’Europa corrisponde un layer in formato GeoJson. Avremo dunque un file dove ogni nazione viene descritta come un complesso multipoligono.
Esistono su Internet diverse fonti che offrono i poligoni dei confini delle nazioni del mondo in vari formati. Nel mio caso sono partito da un file in formato .kml che poi ho convertito nel formato geojson utilizzando il convertitore offerto dal seguente sito web.
Creiamo ora una pagina in formato html dove andremo a inserire il codice seguente:
Il tag body contiene al solito un div chiamato map che ospiterà la mappa. In corrispondenza dell’onload della pagina verrà chiamata la funzione init che semplicemente invoca un’altra funzione chiamata InserisciMappaConGeoJson definita in un file esterno .js
Anzitutto definiamo la mappa:
E quindi i layer base:
Prima di poter definire il layer GeoJson creiamo una funzione che crei uno stile da associare a un layer
La funzione è molto semplice e consente di definire un colore di riempimento per i poligoni in condizioni normali di visualizzazione (normalColor) e un altro (selectcolor) quando invece il poligono viene selezionato.
La funzione per definire un layer che carichi un file geojson necessita di conoscere il nome che verrà dato al layer, l’url del file json e lo stile che vogliamo applicare:
Riassumendo dunque:
A questo punto occorre definire e aggiungere alla mappa (per i layer che desideriamo) l’operazione di selezione di una feature.
Infine, vogliamo potere intercettare l’evento di click sulla mappa e associarvi un centraggio e uno zoom
La funzione è abbastanza complessa ma fortunatamente è ben documentata sul sito web di OpenLayers:
Il risultato è visibile al seguente indirizzo.
L’esperimento successivo è stato utilizzare questo codice in un progetto ASP.NET MVC 4. Il risultato è positivo purchè su IIS si definisca il MIME Type json! In caso contrario la mappa viene caricata ma non i layer GeoJson con un errore che genera confusione (il famoso “404” file not found).
Nella View il codice che ho utilizzato è il seguente:
La funzione stavolta accetta come argomento il percorso della cartella contenente i file .json
