1. Présentation

Peut-être avez vous voyagé et vous souhaitez faire apparaître sur une carte toutes les destinations visitées. Ou alors vous êtes enseignant et souhaitez illustrer votre blog avec une carte mondiale. Quelque soit votre motivation, je pense que Datamaps.js va vous simplifier la vie en vous permettant l'affichage d'une carte interactive.

En partant d'une carte mondiale, on va pouvoir afficher une partie qui nous intéresse, comme ci-dessus. Cela dit, sur le site officiel ne sont disponibles que la carte des Usa et la carte mondiale. Pour obtenir un pays en particulier, il faudra appliquer des zooms et des rotations à la carte du monde. Mais rassurez vous, c'est très simple.

Il est néanmoins possible de créer sa propre carte avec des outils externes. J'en parlerai en fin d'article.

2. Mise en place

Cette fois-ci, il y a 3 scripts à charger dont 2 correspondant à d3.js, datamaps étant construit sur celui-ci.

Commencez par enregistrer parmi les fichiers de votre blog datamaps.world.min.js et récupérez son url.

Le code à placer pour charger les 3 scripts est le suivant:

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="url de datamaps.world.min.js"></script>

Il vous faut ensuite placer une div qui va servir à contenir la carte (on l'appelle dans notre cas container) et enfin un script qui va la construire. Voyez l'exemple ci dessous

<div id="container" style="position: relative; width: 640px; height: 300px;"> </div>
<script>
onJSFilesLoaded.push(function(){
var map = new Datamap({element: document.getElementById('container')});
});
</script>

Et voilà, il n'en faut pas plus pour obtenir la carte du monde.

3. Options

Changer la couleur par défaut

var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            defaultFill: 'rgba(23,48,210,0.9)' 
        }
    });

Supprimer les pop-ups ou effets sur le hover

var map = new Datamap({
        element: document.getElementById('container'),
        geographyConfig: {
            highlightOnHover: false,
            popupOnHover: false
        }
    });

Colorer les pays lors de la création de carte

Vous pouvez définir différentes couleurs en leur donnant un label, puis appliquer le label correspondant à chaque pays comme ceci:

var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: 'rgb(0,0,0)',
            defaultFill: 'green'
        },
        data: {
            IRL: {
                fillKey: 'LOW'
            },
            USA: {
                fillKey: 'MEDIUM'
            },
FRA: {
                fillKey: 'HIGH'
            }
        }
    });

});

Il est aussi possible de modifier la couleur d'un pays plus tard en lançant un script contenant:

map.updateChoropleth({
   USA: {fillKey: 'LOW'},
   CAN: '#0fa0fa'
});

Ajouter des cercles pour localiser des évènements

var bombMap = new Datamap({
    element: document.getElementById('containerx'),
    scope: 'world',
    geographyConfig: {
        popupOnHover: false,
        highlightOnHover: false
    },
    fills: {
        'USA': '#1f77b4',
        'RUS': '#9467bd',
        'PRK': '#ff7f0e',
        'PRC': '#2ca02c',
        'IND': '#e377c2',
        'GBR': '#8c564b',
        'FRA': '#d62728',
        'PAK': '#7f7f7f',
        defaultFill: '#EDDC4E'
    },
    data: {
        'RUS': {fillKey: 'RUS'},
        'PRK': {fillKey: 'PRK'},
        'PRC': {fillKey: 'PRC'},
        'IND': {fillKey: 'IND'},
        'GBR': {fillKey: 'GBR'},
        'FRA': {fillKey: 'FRA'},
        'PAK': {fillKey: 'PAK'},
        'USA': {fillKey: 'USA'}
    }
});

     var bombs = [{
        name: 'Joe 4',
        radius: 25,
        yeild: 400,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'First fusion weapon test by the USSR (not "staged")',
        date: '1953-08-12',
        latitude: 50.07,
        longitude: 78.43
      },{
        name: 'RDS-37',
        radius: 40,
        yeild: 1600,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)',
        date: '1955-11-22',
        latitude: 50.07,
        longitude: 78.43

      },{
        name: 'Tsar Bomba',
        radius: 75,
        yeild: 50000,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
        date: '1961-10-31',
        latitude: 73.482,
        longitude: 54.5854
      }
    ];
//draw bubbles for bombs
bombMap.bubbles(bombs, {
    popupTemplate: function (geo, data) { 
            return ['<div class="hoverinfo">' +  data.name,
            '<br/>Payload: ' +  data.yeild + ' kilotons',
            '<br/>Country: ' +  data.country + '',
            '<br/>Date: ' +  data.date + '',
            '</div>'].join('');
    }
});

Centrer, tourner et changer l'echelle de la carte

C'est ce que j'ai utilisé pour obtenir la carte de France en haut de l'article en modifiant les valeurs de center, rotate et scale.

var map = new Datamap({
  scope: 'world',
  element: document.getElementById('container1'),
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([19, -3])
      .rotate([4.4, 0])
      .scale(400)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  },

4. Créer ses propres cartes

A venir très bientôt....