Ouvrir le menu principal

MacGeneration

Recherche

Avec MapKit JS, Apple s’attaque à Google Maps

Nicolas Furno

mardi 12 juin 2018 à 21:00 • 48

Logiciels

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. ↩︎

Rejoignez le Club iGen

Soutenez le travail d'une rédaction indépendante.

Rejoignez la plus grande communauté Apple francophone !

S'abonner

Le prochain CEO d’Intel pourrait diviser le fondeur en plusieurs entreprises

12/12/2024 à 21:45

• 0


Kernel Panic : dans l’arrière-boutique des réparateurs indépendants

12/12/2024 à 18:30

• 2


Après Safari, Firefox va abandonner à son tour l’option Do Not Track

12/12/2024 à 16:00

• 5


Mots de passe affiche les mots de passe en grand sous iOS 18.2 et macOS 15.2

12/12/2024 à 14:37

• 16


Orion, Chrome, Firefox : Apple Pay arrive doucement sur les navigateurs tiers

12/12/2024 à 13:08

• 4


Apple aurait abandonné une puce surpuissante pour les Mac, en faveur d’une puce pour l’IA

12/12/2024 à 11:45

• 42


Promo : un MacBook Air 16 Go sous les 950 € 🆕

12/12/2024 à 11:10

• 4


Cadre centré, Desk View : le MacBook Air M4 pourrait avoir une webcam améliorée

12/12/2024 à 10:34

• 7


Apple Music est désormais distribué via Canal+ avec une remise de 30 %

12/12/2024 à 09:39


Apple célèbre la créativité (presque) infinie des Genmojis avec une publicité

12/12/2024 à 09:20

• 19


visionOS 2.2 disponible en version finale : le Vision Pro devient un moniteur ultra large pour le Mac

12/12/2024 à 08:57


Safari 18.2 peut créer un lien vers un passage spécifique sur une page web

12/12/2024 à 08:20

• 13


Correctifs de sécurité pour macOS Ventura, Sonoma et iPadOS 17

12/12/2024 à 07:10

• 0


Une panne massive en cours chez Meta

11/12/2024 à 21:15

• 29


Apple confirme les MacBook Air M4 dans la mise à jour de macOS

11/12/2024 à 21:00

• 19


Google lance Gemini 2.0, et vient embêter OpenAI

11/12/2024 à 20:30

• 21