Globe Projection with MapTiler SDK
MapTiler SDKDisplay a 3D globe view using the globe projection in MapTiler SDK.
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.SATELLITE,
center: [0, 20],
zoom: 1.2,
projection: 'globe'
});How it works
Set projection: 'globe' in the Map constructor to render the map as a 3D sphere. The MapTiler SDK handles the projection setup internally: unlike raw MapLibre where you need to call setProjection() after style load, the SDK applies it automatically.
The satellite basemap looks particularly effective in globe mode. As the user zooms in past level 5-6, the projection transitions from the curved globe to flat Mercator for detail viewing.
You can switch projections at runtime with map.setProjection({ type: 'mercator' }) to go back to flat, or map.setProjection({ type: 'globe' }) to re-enable the globe.
Key APIs
| API | Description | Docs |
|---|---|---|
projection |
Constructor option: 'globe' or 'mercator' |
docs.maptiler.com/sdk-js/api/ |
map.setProjection() |
Switch projection at runtime | docs.maptiler.com/sdk-js/api/ |
FAQ
Does globe projection affect performance?
Slightly. The 3D sphere rendering adds GPU overhead at low zoom levels. Performance is identical to Mercator once zoomed in past ~zoom 5.
Can I combine globe with 3D terrain?
Yes. Add terrain as usual: the SDK’s terrain: true option works alongside globe projection.
Common mistakes
- Setting zoom too high in globe mode: the globe is visible at zoom 0–4, then transitions to flat
- Confusing SDK’s constructor
projectionoption (works directly) with MapLibre’ssetProjection()(needs style.load event)
Build maps using MapTiler SDK with AI
Generate code like this globe projection with maptiler sdk example using the MapTiler SDK skill in your IDE.
Related Examples
- Initialize a Map with MapTiler SDK
- 3D Terrain with MapTiler SDK
- See how to do this in MapLibre GL JS