Introducing Mapbox GL

By Eden Halperin on June 04 2014
GL

We just released Mapbox GL — a new framework for live, responsive maps in every iOS app. Now developers can have the most detailed maps sourced from ever-updating OpenStreetMap data, as well as the ability to fully control the style and brand to design maps that perfectly match their app. This is all done using our new on-device vector renderer, which uses OpenGL ES 2.0 technology for pixel-perfect map design, from antialiased fonts to polygon blurring, all hardware-accelerated and optimized for mobile devices — and all on the fly.

We just released Mapbox GL — a new framework for live, responsive maps in every iOS app. Now developers can have the most detailed maps sourced from ever-updating OpenStreetMap data, as well as the ability to fully control the style and brand to design maps that perfectly match their app. This is all done using our new on-device vector renderer, which uses OpenGL ES 2.0 technology for pixel-perfect map design, from antialiased fonts to polygon blurring, all hardware-accelerated and optimized for mobile devices — and all on the fly.

Maps render at a super high framerate — it's this speed that opens up a whole new class of apps with highly detailed maps featuring terrain and hillshades, seamlessly fading between different designs such as day and night views. The data is super lightweight for offline caching and totally dynamic — interacting with phone sensors like pedometers, heartrate monitors, iBeacon proximity, Apple's new HealthKit, and others — and changing the design on the fly. Our new toolkit is fully open source - all the code is on GitHub and we are actively writing documentation for developers to easily add maps to every app.

Better maps for iOS

We're not only making better maps for iOS, our platform is designed to let developers and designers customize everything - from the data to the look and the feel.

Fully vector

Mapbox GL renders the map on the fly and on the user's device, so you can rotate the map and zoom in and out fluidly, all with the text staying upright and the labels flowing smoothly between zoom scales.

Design control

Mapbox GL gives you the power to customize every aspect of your map, from tweaking the colors, to hiding or showing specific layers, to deciding what information you want to present on your map by rearranging our worldwide starter data or bringing your own. And the style is able to be manipulated live at runtime.

Seamless scrolling necessitates new ways of styling maps. While previously you could just define discrete values for all zoom levels in CartoCSS and TileMill, now you can define the road width or building opacity as a function that changes smoothly as you zoom in or out.

Since everything is rendered on the fly, you can instantly change the stylesheet — plus animated transitions between two different stylesheets are just as easy as adding and removing classes.

Design control extends to data layers, allowing smooth animation effects.

Open format

Mapbox GL is based on the same vector tile format that powers Mapbox Streets. This means that you can use our global basemap, fully or in part, as well as create your own vector tiles to interleave data from different sources. Much like in TileMill, our open source map design studio, you can create a custom map by composing the various roads, parks, water areas, buildings, and more from lines, points, and polygons, then style them flexibly.

Technology

We built Mapbox GL in C++11 using OpenGL ES 2.0, a subset of OpenGL that is available on mobile devices and that can also run on desktop hardware with very minor changes. We use protocol buffers via pbf.hpp to implement a lazy vector tile parser, plus we've implemented custom code for text display and layout.

Mapbox GL is open source under a permissive BSD license, so you can check out all of the code right now. It currently runs on iOS, OS X, and Linux.

First-class iOS citizen

For our first preview release, we're focusing on the iOS platform. On top of Mapbox GL we've built Mapbox GL Cocoa, a layer of Objective-C Cocoa bindings for native iPhone and iPad development. Changing the color of buildings is as easy as:

NSDictionary *buildingStyle = @{ @"stroke" : @{ @"type"  : MGLStyleValueTypeColor,
                                                @"value" : [UIColor purpleColor] } };

[self setStyleDescription:buildingStyle forLayer:@"buildings" inClass:@"default"];

Developing in the open

All of the development of Mapbox GL, from the current code to architecture discussions by our team and our ecosystem of contributors, will happen in the open on GitHub.

Here are a few ways we're looking to improve in the immediate future — direct links to GitHub where the development will happen:

A starting point

We've been hard at work on Mapbox GL and the technologies involved throughout our systems, but this is only the beginning. And we would love to have you help us decide where the renderer should go and what sorts of new applications should be made possible by it. Hit us up on GitHub or on Twitter @Mapbox and help us make the future of immersive, interactive maps.