How Mapbox Works

Welcome to Mapbox! This guide will introduce you to the building blocks of Mapbox and how you can design, publish, and extend your map application. Onward!

What does Mapbox do?

Mapbox is a developer platform for creating and using maps. Our tools are used across industries to solve problems with maps, data, and spatial analysis.

products

Mapbox’s tools are building blocks that support every part of the web and mobile map-making process. Whether your goal is to build a beautiful map to match your website or to build a full-featured geoprocessing application, we have you covered.

Use Mapbox to:

  • design and style your map down to the smallest details
  • upload custom data or use one of Mapbox’s robust tilesets
  • build and publish full-featured web applications with custom interactions
  • create static maps programmatically
  • develop native mobile applications for both iOS and Android
  • extend your app’s functionality with web services for geocoding, directions, spatial analysis, and more

Let’s dive in and take a look at the tools that make all of this creation possible.

Design a map

Custom map design is one of the core functions of the Mapbox toolset, and we provide a super awesome platform for putting this customization at your fingertips: Mapbox Studio.

Mapbox Studio

Mapbox Studio is a full-featured map editor that gives you total control over the style of your map directly in your browser. Whether you start with a Mapbox template style or start from scratch, the styling possibilities are virtually endless.

studio design

With the Mapbox Studio style editor, you can:

  • enable dynamic styles based on zoom level
  • use custom fonts
  • dynamically place labels
  • easily select colors, weights, and opacity for data
  • filter tilesets based on attributes
  • create, import, and edit datasets in the Mapbox Studio dataset editor

You can use both default Mapbox tilesets and tilesets you created with your own data in your map styles.

The style editor is built on WebGL, a graphics library designed for modern browsers that renders vector data at 60 frames per second – it’s like a video game experience for your maps! The Mapbox Studio style editor comes with several template styles to start with as well as some fully-designed styles.

Your custom map styles are stored in the Mapbox Style Specification and can be used with our Mapbox GL JavaScript library or included in your mobile applications.

Data and imagery

You can choose to work with a default tileset, create your own from a dataset, import an existing tileset, or use a combination of sources.

Datasets and tilesets are two different types of data. Datasets provide access to feature geometries and properties (attributes), both of which can be edited in the Mapbox Studio dataset editor or through the Datasets API. Tilesets are lightweight collections of vector data that are optimized for rendering and are not editable. Mapbox Studio allows you to export your dataset in to a tileset for use in the Mapbox Studio style editor.

Dataset editor

You can use the dataset editor in Mapbox Studio to import, create, and edit GeoJSON point, line, and polygon features and their properties.

Mapbox tilesets

The template map styles that come with the Mapbox Studio style editor contain one or more of our core tilesets: Mapbox Streets, Mapbox Terrain, and Mapbox Satellite. You can find a full list of layers available in the Mapbox Streets and Terrain sources in our Vector Tiles overview.

streets Mapbox Streets. Streets, buildings, areas, water, and land data based on OpenStreetMap, updated as frequently as every five minutes.
terrain Mapbox Terrain. A worldwide elevation data set complete with contours, hillshade, and elevation data.
satellite Mapbox Satellite Global satellite imagery from a range of sources, processed and seamed together by Mapbox.

Custom data and imagery

You can also upload your own data sources to your account as either tilesets or datasets. To upload as a tileset, you can upload directly in the Mapbox Studio style editor, on the Tilesets page, or using the Uploads API. To upload as a dataset, you can upload directly in the Mapbox Studio dataset editor, on the Datasets page, or using the Datasets API.

With the Mapbox Studio dataset editor, you can upload GeoJSON and CSV files for editing. Once you’ve finished working with your dataset, you can export your dataset to a tileset for use with the Mapbox Studio style editor.

Tilesets can be created by uploading SHP, KML, GPX, CSV, GeoJSON, or GeoTIFFs files. Or, they can be imported from a dataset created with the Mapbox Studio dataset editor.

On upload, these data files are converted to vector tilesets and can be styled in the Mapbox Studio style editor, added to maps and given interactions in Mapbox GL JS, and used in mobile applications created with our iOS and Android SDKs.

Build web applications

Once you’ve created, designed, and added data to your map, we provide multiple tools for publishing your maps on the web.

Mapbox GL JS

Mapbox GL JS is a JavaScript library for creating interactive maps with Mapbox styles. This API harnesses the power of GL-driven maps, including smooth zooming, map bearing and pitch, and vector data available for interaction and styling in the browser. You can use your custom styles created in the Mapbox Studio style editor or the styles we provide, plus add any additional data you want programmatically – including GeoJSON, images, and even video!

GL js

Be sure to check out the Mapbox GL JS examples to see the power of this amazing library.

Mapbox.js

Mapbox.js is a JavaScript web mapping library that extends the popular Leaflet.js library. Mapbox.js can be used to create interactive maps with classic styles.

Mapbox.js API

Mapbox Static API

Mapbox also provides a Static API for creating static images from your map styles. Provide your style ID, access token, and a few more parameters and you can display static images directly by making requests in your application.

Build native mobile applications on iOS and Android

Mapbox provides both an iOS SDK and an Android SDK for publishing your maps in native applications. The iOS SDK works just like Apple’s MapKit and the Android SDK works just like Google Maps – switch out just one line in either to gain access to Mapbox’s customizable interactions and beautiful map designs.

mobile splash

Each SDK comes bundled with five Mapbox-designed map styles with the capacity for handling any custom design created with the Mapbox Studio style editor. Every developer also has access to the data dashboard that provides a continuously updated view of map usage, from what neighborhoods are popular to map usage metrics.

mobile dashboard

Check out these guides to get started:

Extend your map application

In addition to designing maps and publishing mapping applications, Mapbox also has tools for interacting with data, locating addresses, conducting spatial analysis, and wayfinding. Our web services APIs are building blocks you can use to make your maps interactive and dynamic.

Geocoding API

Integrating place searching is possible through our Geocoding API. You can pass latitude and longitude values to be converted to addresses, or you can pass addresses to return coordinate locations. You can use the Geocoding API within your web or mobile application or as a standalone service.

geocoding example

Directions API

The Directions API provides point-to-point directions for walking, cycling, or driving based on the wide network of paths in OpenStreetMap. The API returns text instructions, alternative routes, geometry (for drawing routes), and maneuvers. See the Directions API documentation for more response types to include in your application.

directions example

Distance API

The Mapbox Distance API returns all travel times between many points (also known as a “distance matrix” or “distance table”) and is calculated by the Directions API. The Distance API allows you to build tools that efficiently check the reachability of locations from each other, filter points by travel time, or run algorithms for solving optimization problems. When using the API, you can specify driving for car travel times, walking for pedestrian and hiking travel times, and cycling for bicycle travel times.

distance example

Map Matching API

For those of us who track our runs with Strava or map our hikes with AllTrails, the GPX tracks we get back can be a little wiggly and wobbly. The Mapbox Map Matching API lets you use these recorded traces (from your phone while driving or from a GPS tracker while hiking) and snap them to the OpenStreetMap road and path network. This is helpful for aligning noisy traces and displaying them cleanly on a map.

Analyze with Turf.js

Turf.js is an open source JavaScript library for conducting spatial analysis. Turf includes traditional spatial analysis operations, helper functions for creating GeoJSON data, and data classification and statistics tools. You can add Turf to your website as a client-side plugin, or you can run Turf server-side with Node.js.

turf example

Attribution and Terms of Service

Regardless of whether you’re creating a custom style with Mapbox Studio or building a mobile app with the Android SDK, all Mapbox tools are governed by our attribution requirements and our terms of service. For more information about either of these requirements, contact Mapbox Support.

Get started!

Now that you’ve gotten the lay of the land, it’s time to get building! Check out the Products and Industries pages for some examples of what’s possible, head to the Developers page for links to all of our developer documentation, and check out the Help page for a whole suite of FAQs, how-to guides for getting started, and links to example code. As always, feel free to contact us if you have any questions!

Additional questions? Ask our support team or learn more about How Mapbox Works.