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

Blog

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

September 22, 2015 PJ

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

Google

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

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

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

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

MAKI

[/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