Gestion des Cartes sur les PWAs: choisissez votre fournisseur

Ecrit par le Mardi 4 Décembre 2018

Gestion des Cartes sur les PWAs: choisissez votre fournisseur
Vous ne le savez peut être pas, mais depuis quelques mois Google a modifié sa politique tarifaire concernant ses services cartographiques. Auparavant totalement gratuite, l'utilisation de Google Maps est désormais soumise à une tarification qui peut vous impacter si vous atteignez un certain taux d'utilisation sur votre PWA.

Explications.

Afficher une carte, comment ca marche?

Lorsque que vous affichez une carte dans votre app, vous affichez en fait deux éléments:
- les points que vous avez créés grâce au CMS GoodBarber
- le fond de carte, qui provient d'un prestataire externe

Le prestataire externe peut être différent en fonction de la façon dont vous allez distribuer votre application: iOS, Android ou Web. Du côté natif, pour iOS les cartes sont  gérées de façon totalement indépendante par Apple, et pour Android, il faut évidemment passer par Google Map. Pour les Progressive Web Apps en revanche, il est possible de choisir parmi différents prestataires de service et c'est justement la nouveauté que nous vous proposons aujourd'hui.

Les fournisseurs de cartes ne sont pas nombreux sur le marché et les nouveaux usages donnent à la donnée cartographique de plus en plus de valeur. Si ces services étaient autrefois gratuits, une tarification est désormais appliquée dans la grande majorité des cas. Dans ce contexte, il était indispensable pour nous de vous laisser la possibilité de choisir le fournisseurs qui convient le mieux parmi deux institutions du marché: Google Maps et Mapbox.

Voyons de plus prêt ce qui différencie ces deux fournisseurs de carte.

Google Maps

Google Maps est le grand leader du marché des fournisseurs de carte avec une dizaine d'années d'existence à son actif. Jusqu'a aujourd'hui il s'agissait de l'unique fournisseur de carte disponible sur GoodBarber pour votre PWA.

Google Maps utilise le principe de la carte glissante, pour l'affichage de ses cartes qui repose sur l'assemblage de "tuiles" pour afficher la carte. La carte est découpée en petits fichiers d’images de 256px de côtés appelés et générés au fil de l’eau en fonction du niveau de zoom et de la navigation de l’utilisateur.  Il s'agit de la manière classique d'afficher des cartes sur le web.


Pour afficher les cartes de votre PWA, nous utilisons l'API Dynamic Maps qui est désormais devenue payante. Comme vous pouvez le voir sur l'image ci-dessous, la tarification s'applique sur le nombre de chargements de vos cartes. Google vous offre d'ores et déjà un avoir de 200$ mensuel ce qui équivaut à 28 000 chargements. Au-delà, Google vous prélèvera de 7$ pour 100 000 chargements supplémentaires.

28 000 chargements, cela représente déjà un bon quota pour une app avec une base d'utilisateurs moyenne. Mais nous voulions vous laisser la possibilité de pouvoir choisir un autre fournisseur de cartes, qui propose des tarifs qui diffèrent quelque peu de ceux de Google.

Selon Google voilà comment sont comptabilisés les chargements:

"Une fois qu'une page ou une application web charge une carte [...] les interactions de l'utilisateur avec celle-ci, telles que le panoramique, le zoom ou le changement de couche, ne génèrent pas de chargement de carte supplémentaire et n'affectent pas les limites d'utilisation."
Intégralité ici

Mapbox

Mapbox est un service de cartographie qui, à la différence des maps de Google, est grâce à des tuiles vectorielles, donnant un aspect plus fluide et rapide à l'affichage des cartes. Les tuiles ne sont plus sous la forme d’images, mais des fichiers contenant pour chaque emprise géographique, les données permettant de décrire les éléments qui la compose avec des tracés vectoriels.

Concernant les tarifs, on parle ici de vues et non de chargement et 50 000 vous sont offertes par mois. au delà, Mapbox vous prélevera de 0,50$ pour 1 000 vues supplémentaires.

Selon Mapbox, une vue est comptabilisée lorsque "quatre tuiles sont chargées simultanément sur la même fenêtre."



Vous l'aurez compris chaque fournisseurs de carte est différents, tant au niveau des techniques utilisées pour l'affichage des cartes, que des services proposées mais aussi des conditions de tarification. Nous vous proposons donc de pouvoir changer de fournisseur à votre guise, en un seul clic depuis le back office. 

Comment choisir votre fournisseur de carte?

Dans votre back office, rendez vous dans le menu:

Paramètres > Options de l'app > Paramètres généraux

puis choisissez l'onglet Connexions Externes. Vous trouverez ici un menu déroulant vous permettant de choisir entre Google Maps et Mapbox.
Gestion des Cartes sur les PWAs: choisissez votre fournisseur

Une fois votre fournisseur sélectionné, il vous faudra renseigner sa clé d'API  et de mettre à jour votre PWA. Votre fournisseur de cartes sera alors modifié pour l'intégralité des cartes potentiellement présentes dans votre PWA c'est à dire: dans la section Lieux (map), dans la section Agenda (dans le détails de vos évènements), dans le widget Carte de la Home.



Entrez votre adresse email