Positionner des coordonnées GPS sur un fond de carte
Souvent on utilise directement une carte en JavaScript, comme celles d'OpenStreetMap ou de Google, pour y positionner des points ou des tracés. Mais on est alors dépendants d'un service externe sur son site, c'est lent à charger pour une utilisation assez complexe. Enfin parfois on veut utiliser ses propres fonds de cartes, qu'on les ait dessinés à la main, produits avec TileMill, avec Mobile Atlas Creator ou simplement en recopiant les images produites par Google Maps ou autre outil du genre.
Il est possible de positionner des coordonnées GPS sur ces fonds de cartes, c'est même assez simple en fait. La seule contrainte est de connaître les coordonnées GPS de deux points sur la carte. En effet avec ces deux points on peut déduire l'échelle de la carte et quelle portion de la carte du monde elle recouvre.
On va donc demander à l'utilisateur de cliquer sur deux points sur le fond de carte, qui correspondent à des coordonnées connues. Cela va nous donner les coordonnées X et Y de ces points sur le fond de carte. Avec cela on va savoir l'échelle horizontale et verticale de la carte : on sait que l'écart entre la coordonnée X du point A et la coordonnée X du point B correspond à l'écart entre la longitude du point A et la longitude du point B. Et voilà on a l'échelle horizontale. Il reste à faire de même pour l'échelle verticale avec les coordonnées Y et les latitudes.
Il nous reste ensuite à calculer les coordonnées du point en haut à gauche de la carte et du point en bas à droite pour connaître l'étendue de la carte. C'est assez simple, il suffit d'appliquer l'échelle déduite ci-dessus à la distance du point A du coin haut gauche et à la distance du point B avec le coin bas droit.
Maintenant que nous avons l'échelle de notre carte et sa couverture géographique on peut facilement savoir où sont situées d'autres coordonnées GPS sur cette carte : on peut y ajouter des marqueurs, des tracés, y importer des fichiers KML/LMX, etc. Bref vous pouvez créer une vraie carte dynamique à partir d'un fond de carte statique. Cela fonctionne avec n'importe quelle taille ou échelle de carte à partir du moment où elle utilise la projection de Mercator.
Par contre comme le clic de l'utilisateur n'est pas forcément des plus précis, plus l'échelle de la carte est petite, plus un écart de clic de quelques pixels donnera une mauvaise échelle et fera que les points placés par la suite seront faussés. Un exemple de ce problème peut être vu sur la démo de la carte de Cobb Valley.
Pour montrer un peu cela je vous propose d'essayer cette démo interactive qui permet de tester cela sur 4 cartes. Pour info ça ne marche pas sur la carte IGN car la projection est différente.
Le code de la bibliothèque en JS est disponible sur le repository Fossil de KD2FW, mais le même code existe aussi en PHP il est donc possible de dessiner des cartes statiques en PHP de la même manière. À terme le but de Karto est de proposer une API unifiée entre JS et PHP sur le sujet de la cartographie, mais j'y travaille encore, c'est pas terminé.
Bon et sinon maintenant qu'on connaît l'échelle et les limites géographiques de notre fond de carte, que faire ? Et bien nous verrons une prochaine fois comment dessiner un tracé sur cette carte, l'exporter en KML et en SVG, ou importer directement un calque dessiné en SVG par dessus, ou encore importer un tracé LMX sur ce fond de carte. Bref de quoi s'amuser un peu plus. En sachant que l'objectif premier de cet outil est de travailler directement sur des fonds de carte en SVG afin d'avoir des cartes qui puissent être zoomées, mais aussi imprimées en haute résolution sans se soucier des limitations des services de carto comme Google ou OSM. Et oui y'a encore du boulot !