How to create a custom 3D globe

An interactive 3D globe is a modern way of presenting your online map. MapTiler has all the tools you need to create a map and apply the globe projection to it, turning a flat surface into a more accurate spherical shape. You can choose any of our ready-made maps and use MapTiler SDK JS to turn on the globe projection with a single line of code, and voilà! Get a 3D globe in the selected map design.

In this tutorial, we’ll teach you something a bit more advanced: creating a 3D globe with custom texture, using an image of your choice. As an example, we’ll use Cassini’s terrestrial globe from David Rumsey’s website. If you follow along, you’ll get this beautiful 18th century globe up and running:

Before you start

Before you dive into globemaking, make sure that:

• You’re signed in to your MapTiler Cloud account. If you don’t have one, create it—it’s fast and free.
• You have MapTiler Engine installed on your computer. It’s free for non-commercial use.

Get source data

The source data for your historical globe is the image of its surface. Here’s how to get it:

1. Download the texture of Cassini’s terrestrial globe here. Note that some web browsers may consider the file suspicious, because it’s a ZIP archive. If the download gets blocked, allow it manually. For your ease of mind, scan the file with an antivirus program before opening it.
2. Unpack the ZIP archive. It contains a single GeoTIFF file named CassiniWorldGlobe1790.tif.

Alternatively, you can use any picture with side ratio 2 : 1 (fits the total 360 degrees of longitude and 180 degrees of latitude). The bigger the size and resolution of the image, the more you’ll be able to zoom in without the globe surface going blurry.

Prepare source data

Before you can use the texture image, you’ll need to transform it into map tiles. That’s the raw map-ready material for a zoomable map. The map tiles come in a container file called a tileset.

To prepare your tileset, run MapTiler Engine and open your texture image in it. MapTiler Engine will guide you through the whole tiling setup, step by step. Here’s the information you’ll need along the way:

1. On the first screen, open your texture image.
2. The next step depends on whether the image contains geodata or not. If it does, you get a preview of the image with the geodata displayed next to it. If not, MapTiler Engine asks you to specify it. Use these settings:
   • For Geolocation, select Bounding box and enter the values -180 -90 180 90 to cover the whole world.
   • For Coordinates, enter the EPSG code 4326 to look up and use WGS84. That’s the standard system.
3. On the Output format screen, select GeoPackage.
4. On the Output settings screen, check the box Non-commercial use. Otherwise keep the recommended values.
5. Select where to save the resultant file on your local drive.
6. On the Upload options screen, select MapTiler Cloud.
7. On the Upload screen, you can edit the name which your new tileset will have in MapTiler Cloud.
8. If you’re using MapTiler Engine for the first time, you’ll be asked to sign in to your MapTiler Cloud account as the last step.

When all the tiling parameters are set, MapTiler Engine automatically starts processing your image. Once it’s done, you’ll find your new tileset in MapTiler Cloud in the Tiles section, ready for use.

Create map in Customize

You’ve got the material ready, let’s use it to create the globe. If you’re a seasoned developer, you can do it programmatically with the help of MapTiler SDK JS: first add the tiled image as a raster source, then turn on the globe projection. If you prefer a no-code approach, use our Customize tool:

1. In MapTiler Cloud, go to Maps > New map > Create blank map. Give a name to your map. MapTiler Cloud then takes you to a page with the map preview (which is now, as expected, blank).
2. Use the Customize button to open the map design editor.
3. In the menu panel, go to Data sources and add a new map data source using the plus button. From a list of all data sources available in your MapTiler Cloud, select your globe texture tileset. If you kept the default name, it will be listed as CassiniWorldGlobe1790.
4. The data source is now associated with the map, but not actually used yet. Go to Layers and add a new map layer. You’ll get a list of data sources to choose from, including the one you added in the previous step. Select the layer in the source (there will be only one) and add it to the map. This should fill the editor with your texture image.
5. Now go to Settings, section Projection, and switch the type to Globe. The flat texture image transforms into a sphere. Rotate it around and enjoy!
6. Before you leave Customize, don’t forget to Save and Publish your work. Publishing means that the globe is ready to be shared with the world, but it’s not actually visible to anyone unless you take further steps.

Get map source code

To use the prepared 3D globe in your web application, you’ll need the source code. Here’s how to get it:

In MapTiler Cloud, go to Maps and open your new globe map. The page lists ready-to-use examples, API calls and links to code snippets, so it depends on where and how you want to showcase your globe.

Here are the two most common options:

• Get a link to your globe. Copy it in the Embeddable viewer section. This is the simplest option. Note that it’s very basic, no background etc. You can just configure the link to set the initial display of your globe to a specific zoom and location.
• Get a complete HTML code. Go to Prepared examples and click on MapTiler SDK JS. On the page that opens, scroll down to the preview of your custom globe. Copy the source code below and use it for your web app. This gives you many more possibilities, like adding sky, animating your globe, and other effects—see examples.

If you prefer the Cesium JS library, you can build your globe with Cesium JS instead.

Useful links

• Globe vs Mercator (flat) projection
• How to turn on the globe projection
• More globe examples and tutorials