Categorie
WebGIS

Come scegliere le icone per le mappe web (e non solo)

Google Maps o forse Google Earth hanno diffuso l’uso delle mappe online, introducendo un particolare oggetto di web design, che ora è così tanto diffuso: il PIN.

Infatti i GIS hanno sempre trattato gli elementi puntuali come segni “puntuali”, ma la localizzazione, ad esempio delle attività commerciali, per cui sono famose le mappe di Google, non potevano essere semplicemente disegnate con simboli geometrici base.

I punti su una mappa quando sono diventati POI (point of interest) hanno preso forma e sono diventati dei Pin.

GIS point simple

Google maps pin basic

Una prima alternativa famosa, che usa proprio un Pin per differenziarsi è uscita con OpenLayers 2 dove propone come default un Pin più squadrato, magari non bello come quello di Google, ma è sicuramente stato un ottimo segno distintivo.

openlayers 2 pin basic

Map icons collection

Non è mia intenzione fare la storia dei Pin, ma sicuramente a questo punto è necessario citare, vista la sua diffusione per qualche anno, la Map Icon Collection, che ha permesso di rendere le nostre mappe leggibili, anche senza contenuti testuali, visto che per ogni “punto di interesse” era (attualmente è ancora una collezione in aggiornamento) previsto un simbolo, su sfondo con colore personabilizzabile.

Map icons collection

Oggi siamo forse siamo un po’ stufi di queste icone, dove l’idea è buona, ma ad esempio non si può cambiare la forma del Pin.

Le migliori icone per le mappe web oggi

Da segnalare, ci sono attualmente due fonti dove si possono trovare icone per le nostre mappe:

[wc_row][wc_column size=”one-half” position=”first”]

The Noun project ICON

[/wc_column][wc_column size=”one-half” position=”last”]

MAKI icons

[/wc_column][/wc_row]

In entrambi i le icone sono scaricabili in formato SVG e possono essere quindi colorate a piacimento ed è possibile anche fare dei mashup; si possono anche modificare, ma biosogna cavarsela bene con i software di grafica vettoriale, tra cui cito il potentissimo Inkscape open source. Una nota è da considerare per le icone di The Noun project, perchè sono fatte da molti utenti e ogni icona ha una relativa licenza d’uso Creative commons da rispettare.

Ulteriori fonti di icone per mappe

Web mapping

Una volta che abbiamo scelto il set di icone giuste, come si inseriscono nella nostra mappa?

In QGis, ma anche negli altri GIS, si possono inserire le icone personalizzate in modo abbastanza semplice, infatti nelle impostazioni sono definite le path (cartelle sul disco del proprio PC) dove andare a pescare le icone.

Ma per il web mapping è un po’ diverso: sorvolando lo standard SLD usato da Geoserver per creare gli stili, le librerie Javascript per mappe, come LeafletJS, OpenLayers3, MapBox e Google Maps, specificano nella loro documentazione esattamente come fare.

Ad esempio in LeafletJS è necessario definirla, ad esempio, nel modo seguente:

L.icon({ iconUrl: 'leaf-green.png'})

come la documentazione di sviluppo indica, con tutta una serie di variabili, tra cui l’ombra e la dimensione.

Ma ovviamente il mondo del web open source è pieno di sorprese, quindi possiamo trovare sviluppatori come lvoogdt che creano dei plug-in per fare degli awesome-markers.

Buon divertimento!

Leaflet.awesome-markers plugin v2.0

 

Di pjhooker

Tutti mi chiamano "uomo del gis" ... i software così detti GIS (Geographic information system) hanno accompagnato il mio percorso di studi universitario, fin dalle prime elaborazioni, quando mi fecero calcolare la lunghezza di una pista ciclabile e l'area di un bosco ... per un po' di mesi, mi chiedevo perché non mi facevano usare il mio amato AutoCad, visto che lo usavo già da 3-4 anni ... ma poi ho capito la differenza ... e tutto cambiò!