giovedì 3 aprile 2014

jVectorMap - Mappe geografiche vettoriali in Javascript

jVectoMap è una utile libreria che permette di mostrare ed interagire con mappe geografiche vettoriali in Javascript. Il vantaggio di questo progetto, oltre a quello di essere open source, è che utilizza tecnologie native dei browser, quindi html, javascript, svg o vml, css, senza bisogno di plugin aggiuntivi. La sezione tutorial è molto ben fatta, ne consiglio una attenta lettura.
Qualche tempo fa ho avuto bisogno di sfruttare questa libreria per mostrare una mappa geografica della provenienza dei preventivi richiesti dagli utenti su un determinato sito web. Per ottimizzare tutto però ho voluto caricare i dati relativi al numero dei preventivi dei singoli stati in ajax con il formato JSON, vediamo come.
<div id="mappamondo-richieste" style="height:350px;width:100%;"></div>

$.ajax({
   type: "GET",
   url: 'http://api.example.com/stats/world/',
   dataType: "json",
   }).done(function( json_response ) { 
                            
     $('#mappamondo-richieste').vectorMap({
      map: 'world_mill_en',
      series: {
        regions: [{
          values: json_response.worldData,
          scale: ['#C8EEFF', '#0071A4'],
          normalizeFunction: 'polynomial'
        }]
      },
      onRegionLabelShow: function(e, el, code){
        if(!json_response.worldData[code]) json_response.worldData[code] = 0;
          el.html(el.html()+' ('+json_response.worldData[code]+')');
        }
      });
                            
    }).fail(function(jqXHR, textStatus) {
       console.log( "Request failed: " + textStatus + " " + jqXHR.status );
    });

La mappa utilizzata è la world_mill_en, ossia rappresenta l'intero globo terrestre. Le sigle delle nazioni seguono il formato a due lettere (ad esempio IT per Italia, FR per Francia, DE per Germania, ecc.).
L'url richiamata è una API (nel mio progetto scritta in Php) che risponde in formato JSON con una particolare struttura, ad esempio:
{
  "worldData":
  {
    "IT":"97",
    "US":"357"
  }
}
Il risultato finale non delude le mie aspettative :-)

1 commento:

monica ha detto...

Ciao Stefano, vorrei utilizzare jvectormap in un progetto della società per la quale lavoro, ma non siamo sicuri che sia possibile farlo per usi commerciali. La libreria è opensource ma sai se è possibile utilizzarla in un progetto che poi dovrà essere venduto ad un cliente?