Comment afficher des cartes marines avec Navionics Web API v2

Comment afficher des cartes marines avec Navionics Web API v2

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');
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace1.kml');
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace2.kml');
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace3.kml');
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace4.kml');
webapi.loadKml('https://www.voilier-first32-tomiak.fr/kml-maps/2019/trace5.kml');

webapi.setCenter([  -2.05, 48.95 ]);
webapi.setZoom(6);

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 ».

Créer une « div » avec le même Id que la propriété « tagId » du code javascript.
Récupérer le shortcode généré pour la carte, et le coller en dessous de la div.

<div class="test_map_div"></div>
[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, on voit bien la différence de rendu entre Google Maps et Navionics.

Croisière familiale dans les Anglo-Normandes

Laisser un commentaire

Fermer le menu
%d blogueurs aiment cette page :