Mapbox GL JS vs. Mapbox.js
Dans le glossaire Mapbox, Mapbox.js
Mapbox.js est une bibliothèque JavaScript qui vous permet d'ajouter une carte interactive à votre site Web. C'est un plugin pour Leaflet, et c'est une librairie open source libre d'utilisation.
et Mapbox GL JS
Mapbox GL JS est une bibliothèque JavaScript qui utilise Mapbox GL pour générer des cartes interactives. C’est une bibliothèque open source qui est libre d’utilisation. Vous pouvez ajouter un style Mapbox ou un style personnalisé créé avec Mapbox Studio à votre application Mapbox GL JS.
et de cette réponse
Les styles Mapbox sont destinés à être utilisés avec Mapbox GL et les SDK natifs iOS et Android. Vous ne pouvez pas les utiliser avec Mapbox JS classique. Mapbox JS prend en charge les mosaïques raster, vous ne pouvez pas les styler. Ce ne sont que des images. Mapbox GL et le SDK natif (peuvent) utilisent des tuiles vectorielles et sont stylables.
Je crois que je peux utiliser mapbox.js pour remplacer les sources leafletcss et js, mais puis-je faire de même avec mapbox-gl.js?
Quelles sont les autres différences entre les deux bibliothèques?
Pour autant que je sache, Mapbox GL JS remplacera le Mapbox JS actuel, qui utilise Leaflet en arrière-plan. Leaflet fait beaucoup de choses GL peut faire aussi et plus. Mais pas tout. La même chose va vice versa. GL peut faire des choses que Leaflet ne peut pas faire. Le gros problème GL est qu’il est construit autour de mosaïques vectoriels utilisant WebGL. De l'article d'introduction:
Annonce de Mapbox GL JS - un nouveau système rapide et puissant pour les cartes Web. Mapbox GL JS est un moteur de rendu côté client. Il utilise donc JavaScript et WebGL pour dessiner des données de manière dynamique à la vitesse et à la fluidité d'un jeu vidéo. Au lieu de fixer les styles et les niveaux de zoom au niveau du serveur, Mapbox GL met le pouvoir en JavaScript, permettant un style dynamique et une interactivité de forme libre. Les cartes vectorielles sont la prochaine évolution, et nous sommes impatients de voir ce que les développeurs construisent avec ce cadre.
Si vous voulez vraiment une comparaison côte à côte des deux, je suis désolé, il n'y en a pas à ma connaissance. Il y a trop d'éléments à mentionner/prendre en compte lors de la comparaison, il est donc préférable de le faire par vous-même en fonction de vos propres besoins. Un bon point de départ serait de comparer les exemples de chaque cadre, car cela donne une bonne idée de ce que chacun peut faire:
Après cela, vous pourrez comparer leurs API:
Une chose à garder à l'esprit est que GL est tout nouveau et que, comme nous le savons tous les développeurs, nous en avons pour notre part un prix. Certains problèmes n'ont pas été résolus. Quant à Leaflet, il est très mature, largement utilisé et très bien testé. Si vous souhaitez jeter un coup d'œil sur les problèmes qui existent actuellement GL vous pouvez consulter les problèmes sur Github, dans le référentiel:
J'espère que ça aide, bonne chance!
la réponse de iH8 est excellente, pour ajouter un peu plus de détail:
Pour cartes de base , Mapbox.js affiche les fichiers de mosaïques raster (PNG et JPEG) et les affiche à l'aide de HTML et CSS. Mapbox GL JS affiche les tuiles vectorielles (tampons de protocole fantaisie) et les affiche à l'aide de WebGL. Il peut également afficher des tuiles raster, mais ce n'est pas le focus.
Mapbox.js et Mapbox GL JS prennent en charge les superpositions telles que les calques et les marqueurs GeoJSON. Les deux sont open source, avec des licences similaires et quelques contributeurs partagés.
Les styles des couches Mapbox.js sont stockés sur des serveurs et rendus avec la technologie serveur. Les styles de Mapbox GL JS sont rendus dynamiquement dans un navigateur, ils peuvent donc être modifiés en temps réel.
Leaflet prend davantage en charge les navigateurs, au détriment de certains éléments que certains navigateurs ne peuvent pas prendre en charge, tels que l'inclinaison et la rotation des cartes. Mapbox GL prend en charge les navigateurs prenant en charge WebGL et fonctionne mieux sur les ordinateurs les plus récents. Sa version native, appelée Mapbox GL Native, fonctionne très bien sur tous les téléphones mobiles.
Malgré les noms, vous pouvez utiliser Leaflet avec Mapbox et Mapbox.js et Mapbox GL avec des styles autres que Mapbox.
Généralement Leafletjs et Mapbox.js sont identiques, mais Mapbox.js ayant des plug-ins et des extensions qui englobent Leaflet et sont liés aux services de Mapbox (par exemple, des directions). Des plugins et fonctionnalités similaires existent auprès d'autres sociétés ou produits et Leaflet peut les utiliser en plus ou au lieu de Mapbox. Les bibliothèques basées sur Leaflet prennent généralement mieux en charge les navigateurs existants, utilisent des mosaïques raster, etc. Cela dit, de nouvelles fonctionnalités, telles que des mosaïques vectorielles (pbf, mvt, etc.) et divers moteurs de rendu (y compris webgl), ont été ajoutées.
Mapbox-gl-js et la variante native mapbox-gl sont des bibliothèques à code source ouvert qui sont hautement performants, hautement optimisés autour des mosaïques vectoriels (pbf, mvt) et webgl pour le rendu dans un élément canvas (pour la variante -js). Il est relativement nouveau et certaines choses simples avec Leaflet peuvent être différentes ou difficiles (au mois d’avril 2016). Elles disent qu’elles sont très semblables et fonctionnent assez bien, y compris sur les appareils mobiles} (du passé quelques années, par exemple iphone 5s). Un exemple de bizarrerie aléatoire est que les étiquettes hébraïques en Israël, qui se lisent de droite à gauche, sont rétrogrades et ressemblent à des bêtises (c'est un problème ouvert qui est en cours de traitement).
Si abandonner la prise en charge des anciens navigateurs est acceptable, la route Mapbox-gl (-js) peut être un choix judicieux. Dans mon expérience limitée (travail avec quelques mois), il a la meilleure expérience utilisateur + développeur et Mapbox a été cohérent dans leur ingénierie/sortie. J'ai moins d'expérience avec leurs services payants et on ignore à quel point leurs bibliothèques seront étroitement liées à ces services. Pour un projet mobile, je me suis tourné vers mapbox-gl-js après avoir consulté Google Maps, Leaflet v0.7 et v1 et cela semble avoir été une bonne décision.
J'ai commencé à utiliser Mapbox-gl-js avec une expérience antérieure de Leaflet et une maîtrise de HTML/CSS/JS et j'ai trouvé l'amorce et exemples tous deux utiles pour comprendre les détails techniques. Y compris le style de la carte avec JSON (pas CSS). Jetez également un œil attentif aux conditions d’utilisation, c’est un facteur de différenciation positif important surtout par rapport à Google. Les services de Mapbox n’ont pas la couverture la plus solide en dehors des États-Unis, alors assurez-vous de les examiner également (selon mon expérience, un autre fournisseur est généralement disponible, ce qui n’affecte pas nécessairement la décision d’adopter les bibliothèques. couplés très étroitement aux fonctionnalités ou normes de Mapbox).
Je travaille actuellement sur le basculement d'un système cartographique complexe basé sur Leaflet vers Mapbox GL et je dirais que l'une des différences notables que j'ai constatée concerne les outils de dessin et la gestion des couches GeoJSON. Leaflet propose une série d’outils de dessin comprenant des marqueurs, des rectangles et des cercles non conformes à la norme GeoJSON. Les développeurs de Mapbox GL ont décidé de se concentrer sur GeoJSON en natif, ce qui signifie qu’il n’ya pas de prise en charge immédiate du dessin/rendu des cercles et des rectangles (par exemple, rien ne ressemble à L.Circle dans Mapbox GL); il existe un marqueur, mais pour le faire ressembler à un marqueur traditionnel de type Leaflet, vous devez créer vos propres sprites ou utiliser un fichier SVG. Toutes ces choses sont encore possibles, mais elles nécessitent un peu plus d’installation de la part du développeur que dans Leaflet.
En outre, la plupart des couches Mapbox GL sont rendues sous forme d'éléments de la toile. Cela signifie que, contrairement à Leaflet, aucun élément HTML n'est associé à vos différents calques. Cela rend plus difficile de cibler les éléments avec CSS si nécessaire. Une exception que j'ai trouvée ici concerne les marqueurs qui sont rendus sous forme d'éléments HTML distincts.
Tout cela étant dit, j'ai pu reproduire presque complètement les outils de dessin existants et les styles de rendu avec quelques petites différences. Si vous avez besoin d’outils de dessin hautement personnalisés, Mapbox GL peut être frustrant pour vous.
La prise en charge du navigateur a également été mentionnée. Tout navigateur qui prend en charge WebGL peut exécuter Mapbox GL. Cela inclut tous les principaux navigateurs. Le seul ensemble de navigateurs important que nous avons vu qui ne prenne pas en charge Mapbox GL était IE10 ou une version antérieure, mais nos analyses indiquaient que presque aucun de nos utilisateurs n'utilisait encore ces navigateurs. Nous avons donc officiellement abandonné leur assistance. Votre kilométrage peut varier évidemment.
Globalement, je suis satisfait du changement, car je pense que Mapbox GL est plus facile à utiliser et offre une meilleure expérience utilisateur.
Pour les développeurs expérimentés dans la création de cartes Web avec Mapbox.js ou Leaflet, le remplacement de vieux projets par Mapbox GL JS peut considérablement améliorer les performances de vos applications existantes. Mapbox GL JS utilise le rendu côté client WebGL pour afficher vos cartes, ce qui permet un chargement plus rapide, des transitions plus douces lorsque vous effectuez un zoom ou un panoramique et une plus grande souplesse pour modifier les données et les styles de carte à la volée. Ces améliorations font que le passage à Mapbox GL JS en vaut la chandelle. J’ai donc récemment converti la démo de Peter’s Courier de Mapbox.js en GL
Mapbox.js est obsolète, utilisez Mapbox GL JS comme indiqué sur leur site Web :
Mapbox.js
- N'est plus en développement actif
- Prend en charge les carreaux raster
- Les tuiles sont générées par le serveur
- Les styles de carte ne peuvent pas être modifiés dans le navigateur, mais les superpositions de carte peuvent être stylées de manière dynamique.
Mapbox GL JS
- En développement actif - nous ajoutons de nouvelles fonctionnalités, améliorons des fonctionnalités existantes et corrigeons des bugs.
- Prend en charge les tuiles vectorielles
- Les cartes sont rendues côté client par le navigateur
- Les données de carte et les styles peuvent être modifiés dynamiquement
L'article contient également des exemples de différences et de similitudes entre les deux.
Si vous envisagez de générer plus de 10 cartes par page, je vous recommande de ne pas utiliser mapbox-gl. Mapbox-gl utilise WebGl pour dessiner des cartes de manière dynamique. Bien que tous les navigateurs modernes prennent en charge WebGl, nous avons rencontré des problèmes lorsque nous avons ouvert trop de contextes WebGl. Trop nombreux sont subjectifs et dépendent du navigateur utilisé par votre client. Le nombre de contextes semble également être indépendant des onglets. Par conséquent, si votre client a un onglet ouvert qui utilise déjà "trop de" contextes, vos cartes pourraient ne pas être rendues en conséquence.
Voir ci-dessous pour quelques problèmes liés:
https://github.com/mapbox/mapbox-gl-js/issues/6312
https://github.com/mapbox/mapbox-gl-js/issues/7332
Je n'ai jamais utilisé mapbox.js ou un dépliant pour cette question, mais pour les pages nécessitant 10 cartes ou plus, je vous recommande fortement de ne pas utiliser mapbox-gl.