8
24 Jan 2011

cluster-s.pngCela faisait longtemps que j'avais l'onglet du site de PolyMaps ouvert dans mon navigateur. Par manque de temps, je n'avais pas encore eu l'occasion d'explorer cette récente bibliothèque cartographique. Développant principalement sur l'API Google Maps et OpenLayers, j'avais envie de tester la capacité de cette bibliothèque et de juger si celle-ci pouvait à terme devenir une réelle alternative.

Après avoir jeté un rapide coup d'oeil aux différents exemples (ex PolyMaps), passons concrètement à notre exploration.

Développé en collaboration par SimpleGeo et Stamen Design, PolyMaps est une librairie cartographique développée en JavaScript. Le rendu des différents éléments utilise le format SVG.

Téléchargement

Pour cela, se rendre sur la page ah-hoc et télécharger le zip de la dernière version - la 2.4 pour ce mois de janvier 2011.
Et décompresser cette archive quelque part sur votre serveur.

unzip simplegeo-polymaps-v2.4.0-0-g42b145f.zip

Initialisation

Si vous êtes un peu familier du développement sous OpenLayers ou Google Maps, vous n'allez pas être trop dépaysé. Et en plus si vous avez déjà tâté du jQuery, vous ne serez pas surpris par le chaînage - c'est-à-dire le fait d'aligner les fonctions sur un même objet (puisqu'une fonction retourne toujours l'objet sur lequel elle a été appliquée).

Attaquons directement en codant un petit exemple que nous allons détailler. Avec Polymaps, pas trop de surprise, il faut appeler l'API Javascript et construire notre carte : tout comme Google Maps ou OpenLayers.




GeoTribu Polymaps 1




Je ne détaille pas le fichier de style example.css, mais celui-ci regroupe notamment les styles des boutons de zoom + et - .

JavaScript

Maintenant le JavaScript - le fichier test1.js - de construction de la carte :


var po = org.polymaps;

var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.add(po.interact())
.add(po.hash());

map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/25e1c714473b482e9414c63afee96b22" // ici mettre votre clé Cloudmade
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));

map.add(po.compass()
.pan("none"));

L'exemple ci-dessus affiche une carte glissante provenant de chez Cloudmade.

Tout d'abord l'initialisation :


var po = org.polymaps;

Il s'agit juste d'un raccourci pour éviter à avoir à re-saisir org.polymaps à chaque fois. Nous voyons qu'ici à la différence de Google Maps, Polymaps n'utilise pas le mot clé new pour construire les objets mais utilise une méthode différente.

Ensuite la construction de la carte :


var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.add(po.interact());

Nous voyons bien le chaînage mis en place :

  • po.map : constructeur ;
  • container(...) : ajout de la carte dans le conteneur défini dans le HTML, ce conteneur doit être un SVG, on ajoute donc la méthode appendChild(po.svg("svg")) qui est une méthode équivalente à celle-ci : document.createElementNS("http://www.w3.org/2000/svg") ;
  • add(po.interact()) : ajout des contrôles de carte - déplacement, double-clic, zoom à la molette et 'pilotage' avec les flèches.

Ajoutons ensuite une URL vers une carto jolie :


map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/25e1c714473b482e9414c63afee96b22" // ici votre clé Cloudmade
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));

Dans l'ordre :

  • map.add(po.image() : ajout d'une couche ;
  • .url(po.url( ... ) : qui possède cette URL Cloudmade ;
  • .hosts(["a.", "b.", "c.", ""]) : là aucune idée, si vous avez des pistes ...

Et ensuite ajoutons le contrôle de zoom in et out :


map.add(po.compass()
.pan("none"));

Centrons la carte sur Saint-Malo et choisissons un niveau de zoom :


map.center({lat: 48.6356, lon: -2.0448});
map.zoom(12.0);

Et ajoutons les copyright :-)



© 2010
CloudMade,
OpenStreetMap contributors,
CCBYSA.