Projections

Loading terrain…

Pick a projection to morph the same ETOPO1 terrain into it. Drag to orbit the globe or pan a flat map.

Choose a projection

import {
  glyphMapGlobe, glyphMapEquirectangular,
  glyphMapMercator, glyphMapOrthographic,
} from "@glyphcss/maps";

const projection = glyphMapGlobe({ radius: 1, exaggeration: 24 });
glyphMapEquirectangular({ exaggeration: 24 });
glyphMapMercator({ maxLat: 85.05112877980659, exaggeration: 24 });
glyphMapOrthographic({ lon0: 0, lat0: 0, exaggeration: 24 });

Projection	Use	Defaults / limits
`glyphMapGlobe`	Orbit a sphere	`radius: 1`; far hemisphere hidden
`glyphMapEquirectangular`	Flat longitude/latitude map	Full world
`glyphMapMercator`	Flat map with enlarged polar regions	`maxLat: 85.05112877980659`; poles excluded
`glyphMapOrthographic`	Fixed hemisphere on a flat disc	`lon0: 0`, `lat0: 0`; far hemisphere excluded

All options are optional. exaggeration defaults to 1 (true-scale relief); 24 makes terrain easier to see. Built-in building extrusions keep true-metre heights regardless of exaggeration.

Custom projections

import { geoMollweideRaw } from "d3-geo-projection";
import { glyphMapFromD3Raw } from "@glyphcss/maps";

const mollweide = glyphMapFromD3Raw(geoMollweideRaw, { exaggeration: 24 });

Install d3-geo-projection separately. The adapter accepts id, domain, and exaggeration; defaults are "glyph-map-d3-raw", the full world, and 1. The raw projection needs .invert for unprojection; otherwise unproject throws TypeError.

For your own GlyphMapProjection, supply id, domain, exaggeration, project(lon, lat, elev), and unproject(world). Coordinates use degrees; elevation uses metres. Return non-finite coordinates outside the domain. Optional visible, cameraForCenter, and centerForCamera support hemisphere visibility and orbit navigation.

Animated transitions

await map.setProjection(glyphMapGlobe({ exaggeration: 24 }), { durationMs: 900 });

The current centre stays anchored. Use durationMs: 0 for an immediate change. Changing projection leaves walk mode.