Mapbox GL JS vs Mapbox.js

Depuis le glossaire Mapbox, Mapbox.js

Mapbox.js est une bibliothèque JavaScript qui vous permet d’append une carte interactive à votre site Web. C’est un plugin pour Leaflet, et c’est une bibliothèque open source gratuite.

et Mapbox GL JS

Mapbox GL JS est une bibliothèque JavaScript qui utilise Mapbox GL pour rendre des cartes interactives. C’est une bibliothèque open source gratuite. Vous pouvez append 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 utilisés avec Mapbox GL et les SDK iOS et Android natifs. Vous ne pouvez pas les utiliser avec le classique Mapbox JS. Mapbox JS prend en charge les tuiles raster, vous ne pouvez pas les styliser. Ce ne sont que des images. Mapbox GL et le SDK natif (peuvent) utilisent des tuiles vectorielles et celles-ci sont stylisées.

Je crois que je peux utiliser mapbox.js en remplacement des sources css et js du leaflet , mais puis-je faire la même chose avec mapbox-gl.js ?
Quelles sont les autres différences entre les deux bibliothèques?

Pour autant que je sache, Mapbox GL JS remplacera l’actuelle Mapbox JS qui utilise Leaflet en arrière-plan. Beaucoup de choses que fait Leaflet, GL peut aussi faire plus. Mais pas tout. La même chose va vice versa. GL peut faire des choses que Leaflet ne peut pas faire. Le grand avantage de GL est qu’il est construit autour de tuiles vectorielles 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 dynamicment les données avec la rapidité 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 optimise le JavaScript, permettant un style dynamic et une interactivité de forme libre. Les cartes vectorielles sont la prochaine évolution et nous sums ravis de voir ce que les développeurs construisent avec ce framework.

Si vous voulez vraiment une comparaison côte à côte des deux, je suis désolé qu’il n’y en ait pas autant que je sache. Il y a trop de choses à mentionner / à prendre en compte lors de la comparaison, il est donc préférable que vous fassiez vous-même une telle démarche en fonction de vos propres exigences. Un bon début serait de comparer les exemples pour chaque cadre car cela donne une bonne idée de ce que les deux peuvent faire:

Après cela, vous pouvez comparer leurs API:

Une chose à garder à l’esprit est que GL est une marque nouvelle et que, comme nous, développeurs, nous soaps tous que cela a un prix. Certains problèmes n’ont pas été corrigés. Quant à Leaflet, il est très mature, largement utilisé et très bien testé / éprouvé. Si vous souhaitez jeter un coup d’œil aux problèmes actuels de GL, vous pouvez consulter les problèmes de Github, dans le repository:

J’espère que ça aide, bonne chance!

La réponse de iH8 est géniale, pour append un peu plus de détails:

Pour les cartes de base , Mapbox.js affiche les fichiers de tuiles raster (PNG et JPEG) et les affiche en utilisant HTML et CSS. Mapbox GL JS affiche les tuiles vectorielles (tampons de protocole de fantaisie) et les affiche à l’aide de WebGL. Il peut également afficher des tuiles raster, mais ce n’est pas le but.

Mapbox.js et Mapbox GL JS prennent en charge les superpositions comme les couches et les marqueurs GeoJSON. Les deux sont open source, avec des licences similaires et quelques consortingbuteurs partagés.

Les styles des couches Mapbox.js sont stockés sur des serveurs et rendus avec la technologie du serveur. Les styles de Mapbox GL JS sont rendus dynamicment dans un navigateur, ce qui permet de les modifier en temps réel.

Leaflet prend davantage en charge les navigateurs, au prix de quelques é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 fonctionnant mieux sur les ordinateurs récents. Il a une version native, appelée Mapbox GL Native, qui 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 non-Mapbox.

Généralement, Leafletjs et Mapbox.js sont identiques , mais avec Mapbox.js ayant des plugins et des extensions qui encapsulent Leaflet et sont liés aux services de Mapbox (par exemple, les directions). Des plugins et fonctionnalités similaires existent dans d’autres sociétés ou produits et Leaflet peut les utiliser en plus ou à la place de Mapbox. Les bibliothèques basées sur Leaflet ont généralement une meilleure prise en charge du navigateur hérité, utilisent des tuiles raster, etc.

Mapbox-gl-js et la variante native mapbox-gl sont des bibliothèques open-source hautes performances, hautement optimisées autour des tuiles vectorielles (pbf, mvt) et webgl pour le rendu dans un élément canvas (pour la variante -js). C’est relativement nouveau, donc certaines choses faciles avec Leaflet peuvent être différentes ou difficiles (à partir d’avril 2016), elles sont très similaires et fonctionnent très bien, y compris sur les appareils mobiles (depuis quelques années, par exemple, l’iphone 5s). ). Un exemple d’une bizarrerie aléatoire est que les étiquettes en hébreu en Israël, qui se lisent de droite à gauche, sont en arrière et ressemblent à des bêtises (c’est un problème en cours de traitement).

Si la suppression de la prise en charge de navigateurs plus anciens est acceptable, l’itinéraire Mapbox-gl (-js) peut être un bon choix. Dans mon expérience limitée (en travaillant avec lui quelques mois), il possède la meilleure expérience utilisateur + développeur dans son ensemble et Mapbox a été cohérent dans son ingénierie / sortie. J’ai moins d’expérience avec leurs services payants et il est difficile de savoir à quel point leurs bibliothèques seront étroitement liées à ces services. Pour un projet mobile, je suis passé à 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 et une maîsortingse de HTML / CSS / JS dans Leaflet. J’ai trouvé que les bases et les exemples étaient utiles pour comprendre les détails techniques. Y compris comment la carte est stylée avec JSON (pas CSS). Examinons également les conditions de service, ce qui constitue un facteur de différenciation important, en particulier par rapport à Google. Les services de Mapbox ne disposent pas de la couverture la plus robuste en dehors des États-Unis, alors assurez-vous de donner également un aperçu de ces services (selon mon expérience, un autre fournisseur est généralement disponible, donc cela n’affecte pas nécessairement la décision d’adopter les bibliothèques). juste très étroitement couplé aux fonctionnalités ou normes Mapbox).

Je travaille actuellement sur le basculement d’un système cartographique basé sur Leaflet complexe vers Mapbox GL et je dirais que l’une des différences notables que j’ai trouvées concerne les outils de dessin et la gestion des couches GeoJSON. Leaflet dispose d’une suite d’outils de dessin qui incluent des marqueurs, des rectangles et des cercles non standard GeoJSON. Les développeurs de Mapbox GL ont pris la décision de se concentrer sur GeoJSON natif, ce qui signifie qu’il n’existe pas de support pour dessiner / rendre des cercles et des rectangles (par exemple, il n’ya rien de mieux que L.Circle dans Mapbox GL); il y a un marqueur mais le styliser pour qu’il ressemble à un marqueur traditionnel nécessite de créer vos propres sprites ou d’utiliser un SVG. Toutes ces choses sont encore possibles, mais elles prennent un peu plus de place chez le développeur que dans Leaflet.

De plus, la plupart des calques GL Mapbox sont rendus sous forme d’éléments de canevas. Cela signifie que, contrairement à Leaflet, aucun élément HTML n’est associé à vos différentes couches. Cela rend plus difficile de cibler les éléments avec CSS si nécessaire. Une exception que j’ai trouvée ici est celle des marqueurs qui sont rendus en tant qu’éléments HTML distincts.

Cela étant dit, j’ai pu reproduire presque entièrement les outils de dessin et les styles de rendu existants 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 comme un problème potentiel. Tout navigateur prenant en charge WebGL peut exécuter Mapbox GL. Cela inclut tous les principaux navigateurs. Le seul jeu de navigateur important qui n’a pas été compatible avec Mapbox GL était IE10 ou plus ancien, mais nos parsings ont indiqué que presque aucun de nos utilisateurs n’utilisait encore ces navigateurs. Votre kilométrage peut varier évidemment.

Dans l’ensemble, je suis satisfait du changement car je pense que Mapbox GL est plus facile à utiliser et offre une meilleure expérience utilisateur.