Lorsqu’on navigue, on est souvent content de garder une trace GPS de la route effectuée. Cela permet d’analyser sa navigation, et de la partager à tous le monde. Avec Google Maps, on peut facilement créer une carte en y important nos traces, mais le résultat est un peu décevant. En effet les vue carte, ou satellite, n’affiche pas beaucoup de détails en côtier, et on ne parle même pas de la pleine mer ! L’idéal serait donc d’afficher nos traces sur une carte marine. Navionics rend cela possible assez facilement, grâce à sa Web API gratuite et accessible à tous !
Les services en ligne de Navionics
La cartographie Navionics est disponible en ligne et permet d’avoir accès à toutes les cartes du monde, et de préparer sa navigation en traçant des routes.
Navionics met à disposition une API qui permet d’afficher des cartes sur un site web. De nombreux exemples d’implémentation sont disponibles, ainsi qu’une documentation de l’API.
Intégrer l’API Navionics sur WordPress
Il faut commencer par obtenir une clé d’API. Pour cela, remplir le formulaire sur le site de navionics. Vous recevrez alors la clé d’API par mail. Attention toutefois, cela peut prendre du temps, j’ai attendu deux semaines avant de recevoir le mail !
Pour intégrer l’API navionics sur votre site WordPress, il faut installer le plugin Navionics Web API v2.
Une fois le plugin installé, ajouter une carte en cliquant sur « Add New » dans le plugin.
Dans la partie « JavaScript code », coller et adapter le code Javascript suivant :
var webapi = new JNC.Views.BoatingNavionicsMap({
tagId: '.test_map_div',
center: [ -2.05, 48.95 ],
zoom: '6',
navKey: '*******',
// Enable Navionics logo without payoff (default behaviour)
logoPayoff: false
});
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace0.kml', false);
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace1.kml', false);
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace2.kml', false);
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace3.kml', false);
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace4.kml', false);
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace5.kml', false);
webapi.setCenter([ -2.05, 48.95 ]);
webapi.setZoom(6);La propriété « tagId » doit correspondre a ce que vous saisi dans le champs « Class Name ». Comme c’est une classe, on rajoute un point devant.
Pour convertir des fichiers Gpx au format Kml, on peut utiliser des outils en ligne comme Gpx2Kml. Pour charger une trace sur la carte, on utilise la méthode « loadKml() » en lui spécifiant l’url du fichier à charger.
Dans un article ou une page, créer un bloc de type « Html ».
Récupérer le shortcode généré pour la carte, et le coller dans le bloc. Le plugin Navionics va lui même créer la div avec la class que vous avez défini dans le champs « Class Name ».
[nav-webapi item=945]Normalement, cela donne ça comme résultat :
Pas mal non ? Après, en explorant la documentation, vous pourrez laisser libre cours à votre imagination pour réaliser de belles cartes, pour le plus grand plaisir de vos lecteurs !
En bas de l’article consacré à notre croisière dans les Anglo-Normandes à bord de notre voilier First 32, on voit bien la différence de rendu entre Google Maps et Navionics.