Des cartes avec Kartograph

Nous allons décrire ici comment générer une carte de France à partir de Kartograph.py et l'afficher avec des données à l'aide de Kartograph.js.

Kartograph.py et Kartograph.js sont deux librairies libres (open source et sous licence LGPL) développées par Gregor Aisch et disponibles ici : http://www.kartograph.org.

La première, Kartograph.py écrite en python, permet de générer des fonds de carte sous forme vectorielle (fichier *.svg) avec des tracés géoréférencés.

La seconde, Kartograph.js écrite en javascript, qui s'appuie sur la librairie de manipulation d'objets vectoriels RaphaelJS, parcourt le fichier vectoriel généré par Kartograph.py et affiche la carte au sein d'une page web. Il est également possible d'ajouter des données géographiques sur la carte à l'aide de l'API Kartograph.js.

Générer un fond de carte de France

Les données géographiques source sont disponibles sur GADM. L'archive française contient 5 niveaux d'information : FRA_adm0 contient les frontières nationales, FRA_adm1 contient les frontières des régions françaises, FRA_adm2 contient les tracés des départements, FRA_adm3 inclut les tracés des arrondissements, FRA_adm4 les tracés des cantons et enfin FRA_adm5 les tracés des villes.

La génération de la carte s'effectue à l'aide de l'outil Kartograph.py en lui spécifiant un certain nombre de paramètres à l'aide d'un fichier .json.

Voici un exemple de fichier :

{
    "layers": {
        "boundaries": {
		      "src": "FRA_adm0.shp",
		      "simplify": 3,
		      "attributes": ["ISO", "NAME_ISO"]
	      },
        "regions": {
		      "src": "FRA_adm1.shp",
		      "simplify": 3,
		      "attributes": ["ISO", "NAME_1"]
	      },
	      "departments": {
		      "src": "FRA_adm2.shp",
		      "simplify": 3,
		      "attributes": ["ISO", "NAME_1"]
	      },
	      "background": {
          "special": "sea"
        }
    },
    "proj": {
        "id": "laea",
        "lon0": 2.37556359389,
        "lat0": 49.9701576233
    }
}

On voit que ce fichier définit 2 catégories d'objet : des calques (layers) et une projection. On note que plusieurs calques sont créés et que pour chacun on précise : - "src" : la source de données sous la forme d'un fichier ShapeFile (*.shp) - "simplify" : un degré de simplification du tracé pour réduire la taille du svg généré - "attributes" : la liste des méta-données (informations) que l'on souhaite voir inclus dans le fichier vectoriel. Les données inclues dans le vectoriel seront accessibles depuis Kartograph.js. Chaque calque pourra être traité séparément par Kartograph.js, notamment avec des styles différents pour chacun.

Quand les paramètres de la carte sont satisfaisants, on lance la génération à l'aide de :

kartograph mes_parametres.json -o fichier_genere.svg

Le traitement peut prendre plusieurs minutes et le fichier est généré.

Dans le cade de l'exemple, voici le fichier .svg généré :

Utilisation du fond de carte dans une page web

La page web à créer doit contenir les librairies Javascript RaphaelJS, JQuery et Kartograph.

        <script src="lib/jquery.min.js"></script>
        <script src="lib/raphael.min.js"></script>
        <script src="lib/kartograph.min.js"></script>

Le fichier doit également contenir un bloc div dans lequel la carte sera placée :

    <body>
        <div id="map"></div>
    </body>

et le javascript suivant permet de générer la carte :

          var map = kartograph.map('#map'); // #map fait référence au div répondant à id="map"
          map.loadMap('fr.svg', function() {
            // ici, on précisera toutes les options pour l'affichage sur le carte
          }, {padding: "20"} );

Comme on peut le voir avec l'option {padding: "20"}, certains paramètres d'affichage peuvent être placés sous forme de dictionnaire après la fonction de génération.

Au sein de la fonction de génération, on ajoute la définition des couches à construire :

            map.addLayer('departments', {
                styles: {
                  'stroke-width': 1,
                  'stroke': "#C0C0C0",
                  'fill': "#fff"
                }
            });

L'exemple précédent récupère la couche 'departments' (qui avait été créé dans le fichier .json défini plus haut) et l'affiche avec les options de style (couleur et épaisseur du trait, couleur de remplissage) définies ici.

On peut ensuite ajouter des objets sur le carte à l'aide de la fonction 'addSymbols'. Par exemple, pour ajouter une bulle,

            map.addSymbols({
                type: kartograph.Bubble,
                data: myData,
                location: function(item) {
                    return [item.lon, item.lat];
                },
                radius: function(item) {
                    return item.radius;
                },
                sortBy: 'radius desc',
                style: function(item) {
                    return 'fill:'+item.color+';';
                },
            });

Dans l'exemple précédent, on récupère les données depuis un tableau myData contenant une collection d'objets aux caractéristiques lon/lat/radius/color. D'autres types sont possibles : kartograph.Label, kartograph.PieChart, kartograph.StackedBar...

Pour ajouter des formes diverses, on peut utiliser la fonction :

map.addGeoPath([kartograph.LonLat(lon1, lat1),kartograph.LonLat(lon2, lat2)]).attr( 'stroke-width', '2');

Les objets sont des objets RaphaelJS et il est donc possible d'utiliser toutes les fonctions de RaphaelJS pour attribuer des styles ou des comportements.

L'outil permet d'obtenir de jolies cartes et représentant les jeux de données que l'on souhaite. De nombreux exemples (avec le code source correspondant) sont disponibles ici : http://kartograph.org/showcase/.

Exemple Kartograph sur carte UK

PAB's blog