Mapbox 3D launches today using our new web SDK, GL JS v2. All maps are now 3D, and we’ve launched a Camera API, the free form low-level API for controlling the camera and its view of the map. This increases the map’s maximum pitch from 60 to 85 degrees, and combined with the new Sky API, allows the map to simulate the sun’s position based on geographic location and time of day. All previously built applications, styles, and custom designed maps continue to work with GL JS and are now 3D ready.
%2520(1).png)
%2520(2).png)
30% Faster Map Load Performance
30% Faster Map Load Performance with prioritization of resource loading and task distribution: GL JS has improved map load by 30% on average, and in some styles more than 50%. With improved prioritization of resource loading and task distribution, maps load faster and leave more CPU resources available for the web application. Sites that load quickly have better engagement, conversion rates, and customer retention. The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds, and mobile sites that load in two seconds or less have a 15% higher conversion rate.
“We observed [that] a 0.1s site speed improvement resulted in 10.1% increase in conversions with travel consumers, and a slight increase in average order value of 1.9%” — Deloitte’s study on how improvements in mobile site speed positively affect a brand’s bottom line “Milliseconds make Millions”
Camera API
Providing access to the low-level camera code allows developers to fine-tune details where the map can be tightly coordinated with other UI elements, transitioning smoothly and precisely, framing the right content in the viewport. The Camera API provides direct programming of Camera values (position and rotation) in three dimensions, specifically:
- Simplified finding complex camera orientation with a new 'lookAt' function".
- Increased map pitch from 60 to 85 degrees.
- Integration with platform-specific or other animation toolkits.
The free form camera enables moving and animating the camera without requiring an exact latitude and longitude in the center of the scene. This is useful for motions that ignore a focal point, have multiple foci, or dynamically update the focal point. Imagine being able to fly over and follow the route of your favorite run through a canyon in your fitness app, or follow a plane's path by flying just behind in an aircraft tracking app. It's also useful for smooth, relative motions of the view direction, like in sweeping rotations, flying, or easing among multiple focal points. The camera can follow along an aerial path, track ground-based objects with constant camera velocity, or build turntable animations rotating around a fixed point of interest.
3D Terrain
Every map feature works seamlessly with the new 3D terrain rendering capability: existing layer types are automatically adjusted and aligned with terrain and markers clamp to the ground; touch and mouse gestures adjust for 3D terrain to provide a smooth and predictable user interaction.
Introducing the ` exaggeration` factor
Setting terrain on the map with an optional `exaggeration` factor acts as an extrusion scale. The higher this value, the more extruded the terrain will be. Note that it can also be used dynamically across zoom levels using an interpolation expression:
High Performance DEM (Digital Elevation Model)
The new Mapbox Raster Data API service provides high performance DEM tiles to power terrain elevation and hillshade rendering. Terrain tile sizes are now reduced by 50% on average compared to the legacy terrain-rgb data, corresponding to a 35% improvement in hillshade layer rendering.
Sky API
As the Camera API increases map pitch and exposes the horizon, the Sky API simulates the sun’s position based on geographic location and time of day. The sky is procedurally generated with atmospheric defaults and can be customized using gradient expressions.
%2520(1).png)
The sky layer provides low level access to set the sun direction and sky colors. The gradient sky is centered right above the camera, with color stops set to fade as the sky goes toward the horizon. Gradient sky layers use color ramps, starting at a distance of 0 from the sky center, and 1 at the sky’s farthest extent. Here the fading is set between 0.8 and 1 to ramp within the visible range.
Progressive Map Rendering
The new GL JS introduces progressive rendering of the map, radically improving perceived map load time. Progressive loading of map content allows layers like land and water to be rendered earlier for both the initial load and during zooming, panning, and animations. This improves the experience of map interactions (zooming and panning) and animations. In addition to the maps not only technically rendering and loading fast, progressive rendering makes the page feel faster and lets users interact with the map before it has fully loaded.
Initial load time in GL JS is decreased significantly by improving prioritization of resource loading and task distribution. Map loading also takes up less time on the browser’s main Javascript thread, leaving more resources for the rest of the web application to load. We measure load time in two ways: initial load time measured as the time to render all map content and achieve an idle state, and speed index a measurement of the average time at which parts of the map are first displayed.
%2520(2).png)
Pricing and Availability
Like all Mapbox APIs and SDKs, GL JS is available to developers on pay-as-you-go — no commitments needed. GL JS usage is billed by Map Load, which correlates to page load metrics. In v2, a map load occurs whenever a `Map` object is initialized on a webpage. Each map load includes unlimited vector tiles, raster tiles, and terrain tiles for the length of the map session. Map Load pricing includes a generous free tier to get started. Updating to v2 has no pricing impact for 99% of Mapbox customers. Pricing is published for all services, including volume discounts that automatically trigger as usage increases. Use of the new GL JS is governed by the Mapbox Service Terms, available at https://www.mapbox.com/legal/tos/. Developers just need a Mapbox account and access token.
Code and Collaboration
v2 is available in the same way as v1 -- the project source code is available on Github at https://github.com/mapbox/mapbox-gl-js for open collaboration with the community. All new features and improvements will only be available in v2. SDK bundle and source code are distributed in ways that make it easy for developers to include the library in their javascript build system and integrate with their tool chain. Old versions of GL JS remain publicly available via NPM and our CDN endpoints. Updates to the v1 releases will be made only for critical browser compatibility or security issues for a limited time.
Community
Developers can fork the public Mapbox GL JS repository and make modifications to the code as long as they do so under the conditions of the Mapbox Terms of Service, including prohibitions on breaking the law or violating human rights.
Get Started with GL JS
Jump straight to the examples and start building today. We’re excited to see what you build.
Like this article? Share it.
Maps feature data from Mapbox © Mapbox, OpenStreetMap © OpenStreetMap and their data partners, including Maxar (if applicable, © Maxar).
.png)
