Avec MapKit JS, Apple s’attaque à Google Maps

Nicolas Furno |

Parmi toutes les nouveautés présentées cette année à la WWDC 2018, plusieurs concernent les développeurs web. Dans le lot, on trouve MapKit JS, une API JavaScript qui permet d’afficher les cartes de Plans dans un navigateur, sur n’importe quel site. Avec ce nouvel outil, Apple positionne ses cartes en confrontation directe avec Google Maps qui domine le secteur.

Apple utilisait déjà MapKit JS en interne, par exemple pour afficher la position de ses boutiques.

Mais plutôt que de proposer exactement la même chose, Apple met en avant davantage d’options et un prix qui défie son principal concurrent. Combien ça coûte, qu’est-ce que c’est et comment l’utiliser ? On fait le point sur MapKit JS.

Une API payante, mais pas chère

Pour utiliser MapKit JS, il y a une première barrière qui risque d’en refroidir plus d’un : un compte développeur Apple payant est indispensable. Facturé 99 $ par an, il permet de publier des apps sur les App Store, d’obtenir un certificat pour signer une app macOS distribuée par vos propres moyens, ou encore signer une extension Safari. Ce même compte développeur est nécessaire pour intégrer MapKit JS sur un site, même si vous n’avez pas d’app iOS ou macOS par ailleurs.

Cette barrière n’en est pas vraiment une néanmoins, puisqu’Apple vise évidemment les développeurs qui créent déjà des apps pour ses plateformes. De fait, ces 99 $ ne représenteront pas des frais supplémentaires pour bon nombre d'utilisateurs. Mais si vous pensiez utiliser MapKit JS sur votre site et que vous n’avez pas de compte développeur, le service vous coûtera au minimum 99 $ par an.

Une fois l’abonnement annuel pris en compte, MapKit JS n’est pas un service gratuit, mais c’est tout comme pour les petits besoins. Apple offre gratuitement 250 000 affichages de carte et 25 000 requêtes par jour. Au-delà, le prix n’est pas connu, mais Apple a mis en ligne un formulaire de contact pour les personnes qui en veulent plus.

Ces chiffres peuvent sembler bas, mais Apple fait mieux que tous ses concurrents, en particulier le plus gros service de cartographie sur internet, Google Maps. Depuis le mois de mai, Google a modifié ses tarifs et réduit considérablement l’offre gratuite. La nouvelle grille tarifaire de Google est nettement plus complexe que celle de MapKit JS, mais comparons un cas simple : vous voulez afficher une carte dynamique sur votre site, agrémentée de quelques marqueurs pour indiquer des lieux importants.

Chez Apple, vous pouvez le faire 250 000 fois par jour sans payer ; chez Google, la limite est de 28 500 par jour avant de devoir payer. Pour atteindre le quota offert par MapKit JS, Google Maps vous demandera quasiment 1 400 $1 avec les tarifs qui sont désormais en vigueur. Et là, on ne parle que d’afficher une carte, pas des requêtes pour calculer un itinéraire ou chercher un lieu. Pour celles-ci, les tarifs de Google sont encore plus élevés et MapKit JS creuse davantage l’écart avec son quota quotidien gratuit.

À moins d’être un service de la taille d’un Yelp ou Airbnb, cette offre gratuite devrait suffire dans la majorité des cas, surtout pour la cible visée par Apple, c'est-à-dire en priorité des développeurs iOS ou macOS qui ont aussi besoin d’un composant web. Précision importante : MapKit JS est actuellement en bêta. Le nombre de clés est limité, et on ne connaît pas la limite, et surtout, on ne sait pas si les tarifs et conditions évolueront avec la version finale.

Une API déjà très complète et rapide

Pour être crédible face à Google Maps et les autres, Apple devait proposer toutes les fonctions attendues dans le domaine. Bonne nouvelle, la première version de MapKit JS est déjà très complète, avec à la fois de quoi réaliser des cartes simples ou complexes. Les développeurs pourront facilement ajouter des marqueurs ou même des formes sur les cartes, permettre à leurs utilisateurs de déplacer un marqueur, chercher un lieu ou encore calculer un itinéraire.

Deux exemples proposés par Apple

La page dédiée à MapKit JS contient quatre exemples assez simples, mais il est possible d’aller plus loin encore. Vous pouvez dessiner des formes sur les cartes d’Apple, que ce soit une ligne pour un itinéraire, un rond pour signaler une zone, ou même des polygones pour transformer l’API en outil de cartographie interactive. L’expérience d’utilisation peut aussi être finement gérée, avec plusieurs options, notamment pour modifier l’affichage de marqueurs, surtout quand ils sont trop nombreux.

Exemple donné par Apple dans sa session technique dédiée à MapKit JS : une carte interactive qui représente, ici, la population américaine par État.

Par défaut, l’API d’Apple est très sophistiquée et les cartes affichées par son biais reprennent au maximum l’expérience que l’on peut avoir dans l’app Plans sur iOS et macOS. Toute l’interface est d’ores et déjà traduite dans 32 langues, et le développeur peut forcer l’une d’elles. Par défaut la langue sélectionnée est celle définie par le navigateur. Précisons que l’interface entière s’inverse pour les langues qui s’écrivent de droite à gauche.

L’ergonomie suit celle que l’on a sur mobile, avec la prise en charge de tous les gestes tactiles : on peut pincer pour zoomer, tourner avec deux doigts pour changer l’orientation. Par défaut, les contrôles sont masqués sur mobile pour économiser de la place, mais ils s’affichent automatiquement quand ils sont nécessaires. Par exemple quand l’utilisateur modifie l’orientation de la carte, la boussole est affichée à la fois pour rappeler que le Nord n’est pas en haut comme le veut la convention, et pour offrir un moyen simple et rapide de revenir au défaut.

Par ailleurs, Apple a fait le choix d’un rendu vectoriel et local, du moins tant que c’est possible. MapKit JS repose au maximum sur le navigateur et sur WebGL pour offrir une expérience similaire à celle que l’on a en natif. Quand ce n’est pas possible, sur les navigateurs trop anciens par exemple, l’API bascule automatiquement sur un mode généré sur le serveur, avec des images affichées à la place des vecteurs dans le navigateur.

Quand WebGL est disponible, on obtient une interface riche et fluide, avec notamment les labels qui se déplacent sur la carte quand on la tourne, et qui apparaissent et disparaissent automatiquement. C’est le cas sur cet exemple réalisé pour les besoins de l’article ; quand le marqueur est ouvert et qu’il est affiché en grand, une partie des textes affichés autour sont automatiquement masqués.

Tout cela se fait automatiquement, sans que les développeurs n’aient à configurer quelque chose. En comparaison, Google Maps est nettement plus simple, on ne peut pas faire tourner les cartes et les marqueurs que vous ajoutez sur le fond viennent en superposition. Le service de Google se contente d’afficher le texte sur un fond opaque.

Par ailleurs, MapKit JS est optimisé spécifiquement pour les produits d’Apple et donc son navigateur web. La version actuelle n’est pas plus rapide que Google Maps sur un ordinateur, elle est même souvent plus lente, mais il faut rappeler qu’il s’agit d’une bêta et qu’Apple n’a peut-être pas encore fait le travail d’optimisation nécessaire. Par ailleurs, nous avons noté que Safari affichait toujours un fond de carte sous la forme d’images et non de vecteurs, seuls les labels étant vectoriels.

Sur les appareils mobile d’Apple, le mode WebGL est utilisé seul, c'est-à-dire que le rendu est entièrement réalisé en local. Dans ce cadre, les performances sont bien meilleures et cette démonstration technique qui calcule un itinéraire entre deux points qui peuvent être déplacés par l’utilisateur est un bel exemple de ce qu’il est possible d’obtenir.

Démonstration technique complète de MapKit JS. La Suisse est délimitée par un polygone, les deux marqueurs peuvent être déplacés par l’utilisateur et l’API d’Apple calcule automatiquement un itinéraire entre les deux.

Comment utiliser MapKit JS ?

Utiliser MapKit JS est plus compliqué que l’API Google Maps. Apple utilise un système de clé privée que vous devez générer sur le site du constructeur et stocker en lieu sûr. Pour que votre site web soit reconnu par les serveurs, il doit être authentifié en utilisant un jeton généré en fonction de cette clé privée, soit à la volée sur votre serveur, soit en amont. Une vidéo est spécifiquement dédiée à ce sujet, si vous voulez essayer vous-même.

Graphique du système d’authentification de MapKit JS. C’est compliqué, mais plus sûr, personne ne pouvant normalement exploiter vos identifiants à votre insu.

Apple recommande d’intégrer un module de création de jeton dynamique sur le serveur, avec des jetons qui expirent rapidement pour des raisons de sécurité. Néanmoins, pour des besoins plus légers ou des tests rapides, il est également possible de générer un jeton qui n’expire pas rapidement, ce qui est bien utile notamment dans le cadre d’un site statique.

Pour cela, vous pouvez utiliser ce site en remplissant le header, le payload et en saisissant le contenu de la clé privée dans le champ dédié. Vous obtiendrez un code, à placer dans le code source de la page pour l’authentification, comme expliqué dans la vidéo. Si tout va bien, vous pourrez ensuite charger MapKit JS et créer une carte personnalisée en JavaScript.

Pour tester l’API, nous avons créé cet exemple extrêmement simple, avec une carte en pleine page et un marqueur pour indiquer la position de la rédaction. Au-delà de l’essai côté utilisateur, vous pourrez surtout récupérer le code source à cette adresse et partir de cette base pour vos expérimentations. Pensez à bien modifier le jeton utilisé dans le projet, puisqu’il est associé à un nom de domaine et que vous ne pourrez pas l’exploiter directement pour vos projets.

Exemple très simple de projet MapKit JS.

Pour aller plus loin, vous pouvez commencer avec la vidéo de présentation de MapKit JS, qui évoque à la fois les principaux points forts du service et qui explique comment créer un site assez simple avec les cartes d’Apple. Pour le reste, la documentation complète est disponible sur cette page.


  1. On part sur une base de 28 500 affichages gratuits. Pour les 221 500 affichages restants, les 100 000 premiers sont facturés 7 $ pour mille, puis les suivants 5,6 $ pour mille. Ce qui donne environ 1380 $ par jour. ↩︎


avatar arekusandoro | 

Reste un soucis : Apple map est toujours moins à jour que Google ...

avatar mmmathieu | 

@arekusandoro

Bof

avatar armandgz123 | 

@arekusandoro

Pour avoir fait un tour d’Europe, Apple plan est inutilisable dans plein de pays comparé à Google Maps...

avatar pecos | 

Même constat ici.

J'ai essayé pendant 10 minutes la carte fournie par macg et comparé avec google maps.

Mes constatations :
- c'est très fluide et joli.
- il n'y a pas le 1/4 des infos présentes avec google maps (il manque les 2/3 des maisons ici à marne la vallée)
- c'est lent comme un veau à charger les dalles en webGL. LENTISSIME.

Conclusion : c'est bien du Apple, quoi.
Ça fait un bon moment qu'ils ont oublié ce que le mot "rapidité" veut dire.
Comme développeur je vais sagement continuer avec Google maps et l'IGN, qui chacun de leur côté m'apportent satisfaction.

avatar marc_os | 

@ arekusandoro
Si c'est pour des « points d'intérêt » tous moisis qui ne font qu'encombrer les cartes en masquant les bâtiments essentiels, c'est pas grave.

avatar xDave | 

on peut les masquer avec GMaps... mais c'est payant!

avatar glaglasven | 

Vu comme les mais de Google sont complètent comparé à Apple Mais, gratuit ou pas en tant que dev on va rester chez Google, de la même manière qu'on achète un téléphone à 800$ au lieux d'un Android à 200$

avatar tylerdurden13 | 

Pas d’affichage possible en vue satellite?

avatar Malum | 

En gros Apple bien moins chère et en avance.

avatar madaniso | 

En avance sur quoi ?

avatar Mamdadou | 

@Malum

Pouvez vous expliquez sur quel point Appke est en avance, mis à part sur les tarifs ?

avatar Malum | 

Éh bien c’est écrit dans l’article : c’est beaucoup plus complet.

avatar byte_order | 

@Malum
Non, l'article dit que c'est déjà "très" complet, pas "beaucoup plus" complet que l'API de Google Maps.

avatar Malum | 

Apprenez à lire. Cadeau :
Tout cela se fait automatiquement, sans que les développeurs n’aient à configurer quelque chose. En comparaison, Google Maps est nettement plus simple, on ne peut pas faire tourner les cartes et les marqueurs que vous ajoutez sur le fond viennent en superposition. Le service de Google se contente d’afficher le texte sur un fond opaque.

avatar byte_order | 

> Tout cela se fait automatiquement, sans que les développeurs n’aient à configurer
> quelque chose.

Sauf qu'un rapide test de la page de démo de l'article avec Firefox et Chrome montre que nan, les textes ne s'effacent pas pour faire la place au popup du marker.
Et que cela ne gère pas par défaut le zoom à la molette.

> En comparaison, Google Maps est nettement plus simple, on ne peut pas faire
> tourner les cartes

Si, si, y'a setHeading() pour ça, mais c'est vrai que c'est pas dispo directement sans programmation.

> et les marqueurs que vous ajoutez sur le fond viennent en superposition.

Euh, ben là aussi hein.

> Le service de Google se contente d’afficher le texte sur un fond opaque.

Euh, ben là aussi hein.

avatar Dimemas | 

Toi on te dirait qu’apple T’offre ton poids en diamants, tu les croirait sur parole hein !

avatar Malum | 

Et vous votre argument ne vaut même pas un kilo de carton pâte. Il est éculé, minable, stupide et ne vaut pas un pêt de lapin. Il est le reflet du vide sidéral de votre argumentation et de votre capacité à ne pas se couler dans la doxa ambiante anti Apple et anti Plans.

avatar en ballade | 

@Malum

"la doxa ambiante anti Apple et anti Plans."

??????

avatar Ali Ibn Bachir Le Gros | 

Apple akbar ! Apple akbar ! À mort les infidèles ! Qu'on leur coupe la tête ?

avatar PiRMeZuR | 

Deux autres acteurs qu’il aurait été intéressant de mentionner :
- HERE qui a toujours une offre gratuite assez simple a utiliser et pas trop restrictive
- OpenStreetMap via des frameworks comme Leaflet qui est devenu le standard de facto pour toutes les grandes entreprises et les agences gouvernementales qui ne peuvent se compromettre avec Google

Ce dernier a l’avantage de pouvoir être auto-hébergé ou proposé par une myriade d’hébergeurs à des tarifs divers. Il évite d’avoir à implanter un mouchard Google dans son site (même si beaucoup utilisent encore Google Analytics). Mais le plus important est probablement la cohérence pour les gouvernements. Nombre d’entre eux en ont fait le réceptacle de leurs données géographiques publiées en open data (IGN est par exemple le plus grand contributeur d’OpenStreetMap France).

OpenStreetMap est aussi beaucoup plus utilisé dans l’humanitaire où des bénévoles mettent à jour les cartes aussi vite que possible pour faciliter le travail des équipes sur place, chose que les GAFA n’ont aucun intérêt économique à faire.

Bref, l’avenir n’est ni Google, ni Apple Maps, mais bien une base ouverte dont la license garantit la pérennité et la gratuité (des données).

avatar NerdForever | 

@PiRMeZuR

Bravo ?

avatar jackhal | 

Oui pour OpenStreetMap sur le principe, mais niveau développement, j'ai tourné en rond en cherchant comment faire ce que je voulais, et j'ai abandonné. Du coup c'est toujours Google Maps que j'utilise, à regret.
Si tu as une bonne page avec des exemples, et surtout des thèmes graphiques cool (je trouve les couleurs de base assez ignobles) sans que ça fasse appel à un serveur tiers qui utilise OSM et dont on ne sait pas trop ce qu'il fait de ses logs, je suis preneur !

avatar AirForceTwo | 

À moins de créer ton propre serveur, tu dois passer par un serveur tiers.

avatar pat3 | 

@PiRMeZuR

Merci pour l’info, tu réponds exactement à la question que je me posais en lisant l’article : quid d’Open Street Map

avatar lll | 

Apple ou Google, même combat. Je suis d'accord avec Pirmezur : OpenStreetMap mérite davantage d'attention !

avatar cenker | 

Personnellement je commence à quitter Maps pour OPSM - leaflet. Il faut bien chercher, par exemple pour le geodesic mais dans les faits il est très bien ! Le seul souci c’est que contrairement à Maps et mapkit lorsque vous placez un marker, ce dernier ne sera présent que sur une map, ainsi si vous dezoomez vous ne verrez votre marker que sur une map et pas les autres. Lorsque vous faite des trajets du Japon vers LA ca pose souci .. bref essayer OPSM avec leaflet !

avatar anon8029 | 

Bien joué Apple, vu la fuite vers des alternatives à gmap à cause de la nouvelle politique tarifaire de google, ça tombe à point !

avatar Mike Mac | 

Mapbox comme alternative avec de l'OpenStreetMap inside !

avatar eastsider | 

En balade, fais moi gerber !

avatar en ballade | 

@eastsider

?????

avatar AirForceTwo | 

Il serait intéressant de savoir si cette solution est conforme à la RGPD, si des cookies sont installés, etc.
Car cette solution semble élégante, et auto-héberger OpenStreetMap a un coût significatif.

avatar xDave | 

Enfin!
Je me demande si Apple va s'en servir pour améliorer Plans avec les données collectées comme Google le fait. On a des informations à ce sujet?

avatar Maitre muqueux | 

Il est temps car plan c’est toujours de la merde

avatar byte_order | 

Mapkit-js va rien changer à cela, hein.

C'est juste une API web, derrière la qualité ou pas de la base cartographique, des points d'intérêts et du calcul d'itinéraires ne va pas changer comme par magie parce que c'est du code Javascript qui le demande...

avatar xDave | 

Je crois que google est très au fait des requêtes qui sont faites avec son API JS justement.

En tout cas Apple peut utiliser son propre kit pour faire un site où on pourrait remonter les informations plus facilement. à suivre.

avatar Malum | 

Votre expérience de la science scatologique n’est pas du tout partagée par la grande majorité des utilisateurs comme le prouve tant son taux d’usage que de satisfaction. Votre auto nombrilisme vulgaire ne vaut ni preuve ni universalité.

avatar Maitre muqueux | 

@Malum

Merci pour ton retour ramolli du bulbe progressiste

avatar Dimemas | 

Plans ... ou comment se perdre by Apple !
Ils sont pas prêt de rattraper Google !

Ce truc est inutilisable ! La seule bonne nouvelle de la WWDC : l’utilisation de waze dans CarPlay que j’attendais depuis longtemps

avatar Malum | 

Le taux d’erreurs de Google est significativement le même que celui de Plans. De nombreux tests aux USA ont prouvé la supériorité de Plans sur GM et Waze. La différence est que les hurleurs s’expriment infiniment plus, bien que minoritaires, contre Plans que ceux qui pourraient le faire contre GM qui bénéficie d’une incroyable indulgence.

avatar en ballade | 

@Malum

"tests aux USA "

Tu vis aux USA, si tu étais en France tu verrais que plans c’est ??

avatar AirForceTwo | 

Montre-nous les tests !
En attendant, Waze est plus efficace que les autres, sa gestion du trafic et des fermetures de routes est un atout immense, et c'est LE GPS qui permet de slalomer dans le trafic du matin.

avatar xDave | 

ah bon? Je n'ai aucun souci avec Plans.
Le bashing c'est bien mais faut pas exagérer par posture

avatar Vostorn | 

À ses débuts (2013-14), plans était clairement à la ramasse. Je me suis en effet retrouvé à 50km de ma destination à cause de plans. J'avais mis le nom d'un village, je me suis retrouvé au milieu de nulle part, en plein milieu d'une route de campagne. Après avoir vérifier sur la carte (Apple), il n'y avait même pas le nom du village aux alentours. J'ai donc utilisé GM qui m'a amené rapidement à ma destination.

Je n'ai plus eu du problème depuis.

La seule chose que j'aurais à reprocher, c'est l'absence de transports en communs en Belgique. C'est la seule raison qui me fait continuer à utiliser GM. Je trouve d'ailleurs scandaleux qu'après presque plus de 5 ans, la capitale de l'Europe ne fasse toujours pas partie des villes avec les transports en communs alors que d'autres villes, bien plus petites, en profitent.

avatar Spinaker | 

Utiliser GM c’est aimer dire au monde entier ce que vous faites. Demandez l’historique de vos données à Google pour voir. Je pense qu’après vous choisirez autre chose que GM.

avatar webHAL1 | 

@Spinaker

Il est parfaitement possible d'utiliser Google Maps sans avoir un compte Google ou, si on en possède un, sans être identifié avec celui-ci.

avatar xDave | 

Parce que tu crois franchement que les serveurs de Google n'analysent pas les requêtes qui lui sont faites depuis des cartes générées par l'API?
Que les recherches de trajets, les placements de POI et cie ne sont pas analysées?

Je bossais pour une boîte dans le tourisme il y a quelques années. Il n'a pas fallu longtemps pour avoir un contact de Google très intéressé par notre travail …

avatar webHAL1 | 

@xDave
« Parce que tu crois franchement que les serveurs de Google n'analysent pas les requêtes qui lui sont faites depuis des cartes générées par l'API?
Que les recherches de trajets, les placements de POI et cie ne sont pas analysées? »

Je n'ai aucun doute sur le fait que Google analyse les requêtes qui lui sont envoyées. Comme d'ailleurs la grande majorité des serveurs Web, sans parler de fournisseurs d'accès (je me demande s'il n'y a d'ailleurs pas une obligation légale dans certains pays).
Mais cela ne lui permettra pas de m'identifier, si par exemple je fais une requête avec mon ordinateur et ensuite une autre avec mon smartphone.
Pour rappel, Apple collecte les données envoyées par l'iPhone, cela lui avait d'ailleurs valu de devoir fournir des explications au Congrès américain.

« Je bossais pour une boîte dans le tourisme il y a quelques années. Il n'a pas fallu longtemps pour avoir un contact de Google très intéressé par notre travail … »

Oui, Google contact fréquemment des entreprises et des commerces. Par exemple pour connaître les heures d'ouverture ou s'assurer que des données sont correctes (typiquement l'emplacement géographique).
Que vous avait dit ce contact ? Vous avait-il parlé des requêtes que vous faisiez sur Google Maps avec des détails précis ?

avatar Gepat | 

On a chacun ses propres expériences d'utilisation... la mienne c'est qu'en Belgique je trouve plan parfait, fluide et naturel (comparé au côté robotisé de GM); et au Japon où j'ai passé mes dernières vacances, GM était juste indispensable et fabuleux.

CONNEXION UTILISATEUR