Globe Projection
Display the map as a 3D globe with atmosphere effects Each library has its own approach: here's how they compare.
Quick Recommendations
MapLibre GL JS — A strong fit when you need full control over globe projection settings, atmosphere blend, and the transition zoom level to Mercator.
MapTiler SDK — Works best for the simplest globe setup: the SDK wraps the same MapLibre projection API with built-in MapTiler style support.
At a Glance
| MapLibre | SDK | |
|---|---|---|
| Coordinates | [lng, lat] | [lng, lat] |
| Rendering | WebGL (GPU, 60fps) | WebGL (GPU, 60fps) |
| Bundle size | ~250 KB gzipped | ~280 KB gzipped (includes MapLibre) |
| Learning curve | Moderate (source/layer model, expressions) | Easy (MapLibre API with convenience helpers) |
| 3D support | Full: terrain, fill-extrusion, globe, sky | Full (same as MapLibre) |
| Code lines | 10 | 8 |
Code Snippets
Click a library to expand its code. Each snippet shows only the core logic: the scaffold handles HTML boilerplate.
MapLibre GL JS10 linesShow code
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/satellite/style.json?key=YOUR_MAPTILER_KEY',
center: [0, 20],
zoom: 1.2
});
map.addControl(new maplibregl.NavigationControl());
map.on('style.load', () => {
map.setProjection({ type: 'globe' });
});MapTiler SDK8 linesShow code
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'
});Things to Know
Implementation-specific details that matter for globe projection.
Globe projection must be set via map.setProjection() after the style.load event when using external style URLs, not in the constructor.
Same setProjection() timing requirement as MapLibre: call it after load when using URL-based styles.
Which Library to Use?
Display the map as a 3D globe with atmosphere effects using MapLibre GL JS setProjection API.
A strong fit when you need full control over globe projection settings, atmosphere blend, and the transition zoom level to Mercator.
Display a 3D globe view using the globe projection in MapTiler SDK.
Works best for the simplest globe setup: the SDK wraps the same MapLibre projection API with built-in MapTiler style support.
Build Maps with AI
Generate code like these examples using mapping library skills in your IDE.