3D Globe Map: A new way to experience the world

Introducing Mapbox Globe view for web and mobile

Guest

Guest

June 28, 2022

3D Globe Map: A new way to experience the world

Introducing Mapbox Globe view for web and mobile

Guest

Guest

June 28, 2022

Today, we’re excited to announce the availability of Mapbox Globe view. Globe view is an intuitive way to tell stories that span continents, from planning a holiday, to tracking shipments, to visualizing data like never before.

Show off your global footprint

Worldwide courier DPD uses Mapbox Globe view on their international shipping website to demonstrate their market position as a premier option for international shipping. The interactive globe map invites customers to search for a country and learn about shipping solutions DPD offers for that destination.

"We wanted our new dedicated International website to provide everything a customer needs to know to send their products abroad. While we wanted to use innovative and leading-edge technology, we also wanted it to be in a format that would be easy to use. The Mapbox Globe view has definitely delivered on that."
Claire Nicolas, Head of International Development at DPD

Engage international travelers

Visually delight and engage customers planning travel and booking a holiday while also making it easier for them to compare listings across larger regions.

With Mapbox Globe view, transform a flat list of travel search results into an exciting world of possibilities, customized to stay on brand, stand out from competitors, and increase customer engagement.

Before: flat list of travel search results on a travel website. After: an exciting world of possibilities mapped on a surface of a stylised 3D globe,

Visualize weather over larger geographical areas

Weather phenomena are often interconnected and span continents. Showing them in a global view provides context that is helpful and fascinating for viewers.

Consider how the direction and intensity of wind is affected by the sun, land masses, and water. With Mapbox Globe view, users can get a wider perspective on the factors influencing their local weather conditions.

Connect around the world

Sometimes it helps to remember that we’re all living together on the same planet. Whether showcasing the global reach of a game, exploring geo-tagged content, or sharing live updates from around the world, Mapbox Globe view reconnects the virtual world to our physical one.

How does Globe view work?

Mapbox Globe view works like any of our map projections and can be enabled in Mapbox Studio or using the setProjection method. Any map with globe enabled will transition smoothly to the spherical globe view once a certain zoom level has been reached. Because Globe view is a client-side feature, it is not necessary to modify custom data layers to work with it.

A world of styling possibilities

Five styling controls allow customizations to tailor the look and feel of any globe: adjust the color of space, visibility of stars, and the color of the atmosphere around a globe, available both in Studio and directly in the Mapbox web and mobile SDKs.

Styling the atmosphere in Mapbox Studio

Get started today with a few lines of code

Build with Globe view using the examples below, or connect with our Sales team about getting started with Globe today.

For GL JS applications:


// Using the map constructor
const map = new mapboxgl.Map({
    container: 'map',
    projection: 'globe'
});
// Switch at runtime
map.setProjection('globe');

For iOS applications:


try? mapView.mapboxMap.style.setProjection(StyleProjection(name: .globe))

For Android applications:


mapView.getMapboxMap().loadStyle(
 style(Style.SATELLITE_STREETS){
   +projection(ProjectionName.GLOBE)
 }
)

Related examples:

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

response = requests.get(

  "https://api.mapbox.com/v4/mapbox.temperature-raster-tileset/tilequery/40,-105.json",

    params={

        "layers": "temperature,wind_speed",

        "bands": "1708304400,1708311600",

    },

Optional caption
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod maximus porta. Pellentesque vitae augue elit. Nam semper eros leo, nec hendrerit nunc aliquet quis. Morbi ac sapien tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur porta imperdiet lorem, ut aliquet orci pellentesque quis. Donec magna augue, molestie aliquam enim eu, auctor feugiat metus."

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

No items found.
No items found.

Related articles