Mapbox GL

Vector maps unleashed

Create responsive vector maps with Mapbox GL, a client-side renderer with implementations in both native and web platforms utilizing OpenGL. Take full control over map styles for dynamic, interactive visual effects and custom branding.

Instant on-device rendering with realtime GPU hardware-acceleration using OpenGL.
Reads directly from lightweight vector tiles for streamlined loading and storage. No more bulky image tiles.
Cross-platform styling language for powerful map branding and visualization capabilities.

Get started in minutes

Include the mapbox-gl.js library in your HTML header:

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.6.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.6.0/mapbox-gl.js'></script>

Authorize

Then, authorize your usage with an API access token and initiate your map:

<script>
// Provide your access token
mapboxgl.accessToken = '<your access token here>';
// Create a map in the div #map
new mapboxgl.Map({
  container: 'map',
  style: 'path/to/style.json'
});
</script>

Style

Define vector sources and style your map with a JSON style or grab an example.

Fork mapbox-gl-js on Github

We are developing iOS (Objective-C & Swift) and Android (Java) bindings for easy use of the library. Visit the mapbox-gl-native repository if you'd like to contribute to these or the underlying C++ project.

Android API coming soon

iOS API

  • Follow the instructions in the project README for iOS, which creates a static build of the library.
  • Add the header files in Headers to your project.
  • Add MapboxGL.bundle to your app target's Copy Bundle Resources build phase.
  • Add libMapboxGL.a to your project's linked libraries.
  • Get a Mapbox API access token on your account page.
  • Import the necessary headers (like MGLMapView.h) into your project.
#import "MGLMapView.h"

MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:myFrameRect
                                            accessToken:myAccessToken];
[mapView setCenterCoordinate:myCenterCoordinate
                   zoomLevel:myZoomLevel
                    animated:NO];

[self.view addSubview:mapView];

Style

Define vector sources and style your map with a JSON style or grab an example.

Fork mapbox-gl-native on Github