2
23 aoû 2011

Introduction


MapQuery a récemment sortie sa première version officielle. Similaire par son objectif à GeoExt (OpenLayers + ExtJS), MapQuery permet d'associer les deux librairies que sont OpenLayers et Jquery (+ Jquery UI). Le résultat est la possibilité de créer rapidement et facilement des interfaces cartographiques poussées. Découvrons ensemble les potentialités de ce nouveau projet.

Téléchargement & gabarit


Bien évidemment, avant de nous amuser, il est nécessaire de télécharger les différentes librairies. Pour les linuxiens, le plus simple est de lancer le script getdeps.sh. Celui-ci se chargera automatiquement de télécharger les dépendances nécessaires. Pour les personnes ayant comme système d'exploitation Windows, vous devrez télécharger et décompresser manuellement les librairies suivantes : Jquery UI, OpenLayers et enfin Jquery Tmpl.

Maintenant, nous allons créer le gabarit de notre page. C'est à partir de celui-ci que se baseront tous les exemples. Il contient les appels vers les bibliothèques ainsi que les éléments du Dom nécessaires à notre script. Pour cela, il vous suffit de copier dans votre éditeur de texte les lignes ci-dessous. Bien évidemment, vous devrez modifier les chemins vers les librairies en fonction de votre configuration. Dans notre cas, nous avons créé un dossier exemples à la racine de MapQuery. Ne vous étonnez pas de voir des dollars ($) fleurir partout dans notre code. Ce n'est pas que GeoTribu soit devenu avide d'argent, mais c'est la manière pour Jquery de pointer vers des éléments.







MapQuery hello world!




Et voilà, nous avons maintenant tous les éléments nécessaires. Nous pouvons commencer à créer notre 1ère application.

Créer sa 1er carte


La création d'une carte, avec MapQuery, se fait très simplement avec à peine quelques lignes de code. Vous pouvez, si vous le souhaitez, définir l'ensemble des caractéristiques de votre carte directement lors de la construction de l'objet map. C'est ce qui est fait dans les lignes ci-dessous (exemple 1) :


$(document).ready(function() {
$('#map').mapQuery({ //Construction de l'objet map
layers:[{ //Ajout des layers
type:'osm' //Ajout d'une couche de type OpenStreetMap
}]
});
});