Mapstraction: libreria Javascript per la gestione delle mappe

Venerdì 22 Febbraio, 2008

Mapstraction

Mapstraction è una libreria Javascript che si pone come layer intermedio per utilizzare le Mappe dei più noti sistemi oggi disponibili. L'idea è quella di fornire un wrapper, un'interfaccia, in grado di unificare il codice a prescindere, quindi, dal tipo di motore di rendering mappe che si desidera utilizzare.

Mapstraction Sul sito sono disponibili demo e documentazione. La libreria è scaricabile in modo gratuito. In questa release vengono supportati i 9 motori più noti: OpenStreetMap, Yahoo, Google, Microsoft, Map24, MultiMap, MapQuest, FreeEarth e OpenLayers.

Supporta la creazione di Point, Line e Polygon. È possibile inserire proprie immmagini in sovraimpressione. Interessante il supporto per Geocoding degli indirizzi stradali e le direzioni di marca! Utile la compatibilità con i feed GeoRSS e KML.

Dagli esempi del codice si capisce subito quanto sia utile uno strumento di questo tipo. Ogni "interfaccia" (Google, Microsoft, Yahoo, etc...) ha infatti una sua serie di API. Tramite Mapstraction, invece, possiamo scrivere un unico blocco di codice e lasciare all'utente finale la scelta del tipo di provider da usare. Ad esempio, quando si inizializza la libreria, la riga di codice seguente:

JavaScript:
  1. // initialise the map with your choice of API
  2. var mapstraction = new Mapstraction('mapstraction','google');

Determina il motore Google! Viene da se che, sostituiendo la stringa 'google', cambiamo immediatamente motore di rendering delle mappe!

JavaScript:
  1. // initialise the map with your choice of API
  2. var mapstraction = new Mapstraction('mapstraction','microsoft');

Nonostante la libreria non sia davvero completa, permette di integrare in un unico framework tutte le features "sparse" delle singole librerie. Il motore di rendering Microsoft, ad esempio, permette la visualizzazione "a volo d'uccello". OpenStreetMap e Google hanno un'ottima gestione delle mappe stradali, comprese quelle italiane. Insomma, per chi deve affrontare lo sviluppo di un'applicazione con l'uso di Mappe e non riesce - proprio -  a decidere quale tecnologia utilizzare per lo sviluppo, Mapstraction permette - appunto - di astrarsi, di risolvere il dilemma introducendo, di fatto, un terzo attore e, in tale modo, fornirci la possibilità di cambiare motore di rendering in qualsiasi momento. Quindi bella idea da seguire e da usare!

Post correlati

Photoshop study: hivesoft

Venerdì 22 Febbraio, 2008

Come aveva previsto Julius arrivano le prime richieste di Logo restyling... da amici che, giustamente, hanno detto "e a me?!". Ovviamente abbiate pietà... sia perchè lo faccio come lavoro sia perchè ho famiglia! ;)

Comunque, come al solito, sono partito da:

ORIGINALE

HiveSoft

SEMPLICE WEB 2.0 STYLE

Estremamente semplice! Ho voluto giocare sugli esagoni dell'alveare...

HiveSoft

Un logo, secondo me, è "bello" quando può essere visto anche a due colori.

HiveSoft

 

VARIANTE "PHOTOREALISTICA"?

Questa è una prova... non è propriamente un logo! Si differenzia dal precedente per lo "style" del tratto, nulla più.

HiveSoft
(clicca sull'imagine per ingrandire)

Post correlati

Photoshop alpha: differenza tra opacità e riempimento

Venerdì 22 Febbraio, 2008

Photoshop Se un esempio vale più di mille spiegazioni, ecco come comprendere la differenza tra la percentuale di trasparenza (alpha) dellla proprietà opacità e la percentuale di riempimento. Entrambe, infatti, agiscono sul Layer e, in alcuni casi sembrano davvero identiche. Comunque sia, se Adobe l'ha separate, un motivo ci sarà! La differenza è semplice: opacità agisce sull'intero Layer, effetti compresi. Riempimento, invece, si limita al contenuto del Layer senza influire su eventuali effetti aggiuntivi. Create un'immagine simile a quella mostrata qui sotto:

Photoshop    Photoshop

Impostando alternativamente opacità su 10% e poi riempimento a 10%, ci rendiamo subito conto della differenza:

Photoshop   Photoshop

Tutto questo può essere utile, ad esempio, per realizzare cose come questa:

Esempio
(clicca sull'immagine per ingrandire)

Prossimamente pubblicherò un post con il tutorial - passo passo - per realizzare l'illustrazione mostrata qui sopra! ;)

Post correlati