103

What are Leaflet and Mapbox, and what are the differences or usages of both? What are the main differences in their APIs?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
vetri02
  • 3,199
  • 8
  • 32
  • 43

5 Answers5

154

The other answer is good but a bit outdated, since Mapbox has changed significantly in two years.

Leaflet is a JavaScript API for making maps interactive on the internet. It can integrate with Mapbox, but also plenty of other tile sources, like OpenStreetMap, and other data sources, like GeoJSON overlays.

Mapbox is a company that provides map services and technology - one of those services, Map tiles, can be used in Leaflet as base maps - same as you'd use Google Map tiles in the Google Maps API. Mapbox also develops a Leaflet plugin called Mapbox.js that makes it simple to integrate with their tiles while still using all of the great functionality in Leaflet. We also support Leaflet's development, since the maintainer works here.

You can use Mapbox.js without using Mapbox tiles, and use Leaflet with Mapbox tiles - they're entirely mix-and-matchable. Mapbox.js's additions, like TileJSON and UTFGrid support, make it easier to integrate with Mapbox maps, but don't change the existing behavior of Leaflet.

tmcw
  • 11,536
  • 3
  • 36
  • 45
  • 5
    Mapbox now makes their own open source GIS library for the browser: [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/). One of the key differences now between them is that Mapbox GL JS uses WebGL whereas Leaflet does not. WebGL, for mapping, is much faster in rendering computationally heavy things (ie. animations, like weather layers, scrolling the map) but has less direct control than Leaflet's solution (ie. manipulating the DOM for styling). Also see [this related question](https://stackoverflow.com/questions/35069753/mapbox-gl-js-vs-mapbox-js) – Kieran101 Jun 17 '21 at 05:34
  • 3
    Mapbox GL JS is no longer open source – villasv Oct 31 '22 at 13:04
39

Update (2014-08-22):

My answer is slightly outdated. Please refer to @tmcw's answer for an up-to-date comparison between Leaflet and MapBox.

Original Answer (2012-09-05):

You're comparing apples and oranges.

Leaflet is "just" a map API. It doesn't provide data/maps itself. Mapbox is a service to design and publish maps, where the end-result is a bunch of generated map-tiles stored in the cloud (and some json files).

Thus, for example, you may consume Mapbox maps from Leaflet. Example

Anyway, Mapbox is developed by a company called DevelopmentSeed, and they have a map API which is indeed a Leaflet competitor, called Modest Maps, although much simpler and with less functionality.

So, to sum it up:

  • Leaflet -> map API , no data
  • MapBox -> design and publish maps
Community
  • 1
  • 1
psousa
  • 6,676
  • 1
  • 32
  • 44
  • 3
    Just want to add that MapBox recently released their own js api: http://mapbox.com/mapbox.js/api/v0.6.5/ – threejeez Sep 18 '12 at 22:37
  • 2
    Just to update things: The Mapbox API now uses Leaflet as its API, extended with a plugin to retrieve map tiles from their servers. – Mark Jun 04 '13 at 10:18
  • You'd only want Mapbox.js if you're using their Mapbox.com's map design/hosting service, correct? Put another way, if you're building a custom app that uses a non-Mapbox tile service, custom database, etc., you'd just use Leaflet instead? – clint Jan 30 '14 at 22:17
  • 4
    @ClintHarris. Actually, since I first wrote this, things have changed even further. Currently Mapbox.js is simply a library on top of Leaflet which provides some additional features and a smart plugin architecture. It can be used even if you're not using mapbox's design/hosting service. – psousa Jan 31 '14 at 08:39
  • hello. I saw leaflet is using reactive code, i want to use IOS/Android code for my project, how can i do it? – famfamfam Sep 10 '18 at 11:18
  • Thats really a bit too big of a question for a stackoverflow comment, famfamfam. Native IOS and Android apps are completely different domains than JS leaflet stuff. There are components/libraries available for both, with various levels of functionality, but you would not use leaflet for this. – Shayne Feb 11 '22 at 06:05
36

You can think of

  • Mapbox as the GitHub of the maps

  • OpenStreetMaps as git

  • Leaftlet as a git client

  • and mapbox.js as the 'GitHub for Mac'

Let me try to explain more:

OpenStreetMaps (OSM) is an open source project to create/display maps & geo-data; just like git allow to create commit trees for source control. They both are software that handle data.

Mapbox is a hosting company for OSM-based maps with some more power rather than just hosting; which is the same case of GitHub for git projects.

Leaftlet is a library to enable users to display/use OSM based maps on their browsers using OSM hosting service; just like any git client is doing with git hosting services.

mapbox.js is an enhanced library to display/use maps hosted at mapbox.com, which is already based on OSM; just like the "GitHub for Mac" client is made by GitHub to provide an interface to the projects hosted on their servers.

Hopefully this clarifies your doubts.

Kamafeather
  • 8,663
  • 14
  • 69
  • 99
Ahmed Mozaly
  • 1,454
  • 2
  • 15
  • 22
3

It is an old post, here is my update.

Mapbox now is using leaflet as their official JavaScript API (I don't know what's the internal working, but... I can't visit Modest Maps at all, and Mapbox doesn't mention anything about Modest Map on their current website).

Weijing Jay Lin
  • 2,991
  • 6
  • 33
  • 53
0

Leaflet is better I suppose. It gives you flexibility to choose your map source and edit the features as you'd like to! It's just a bit time-consuming to learn though! And the top reason: it's free!