World maps for designers with taste.

Mappo is a JS library to create beautiful geo visualizations on a globe or flat map. It's one single line of HTML, weighs only 22 KB, and looks like eye candy on any homepage.

See the demos

22 KB, the whole Earth inside

The core is 22.2 KB gzipped and carries the engine, Earth's land and 160 cities by name. The globe, coastlines, arcs and other worlds load only if you use them.

One line of HTML

Drop <mappo-world> on any page. No build step, no framework, no bundler. Colours follow your CSS variables, so dark mode costs nothing.

Moon and Mars included

Earth ships in the box. The Moon is 9.5 KB, Mars 6.9 KB, and any world you can describe as a function draws with the same tag.

Flat maps too? Flat maps too.

The same map, unrolled. Dots or coastlines, pins by city name, arcs between them, on a page that never spins.

 
00:00

The clock that knows where the sun is

A dot field, and the night computed from the real position of the sun, drawn on a canvas the map keeps over itself so it can never lag the geography by a frame.

Open →

Where your users are

Every country as its own shape, shaded by a number. The choropleth every dashboard wants.

Open →

Every place you're in, joined up

Pins by city name, arcs between them, and the map lying down at forty degrees. The hero look, with no globe involved.

Open →

Your homepage needs a planet. Whichever it is.

We've got you covered for when you open your first office on Mars. Or when you have to ship packages to the first Moon settlement.

Your users, live, on a card

A blue spike wherever someone is sending right now, a pink arc for every message on its way, landing with a ring where it's read. This card is the full demo running, not a copy of it.

Open →

Earth, Mars and the Moon, to scale

Same component, same attributes, three bodies, at their true relative size.

Open →

Precise enough for NASA data. Loose enough for a fantasy map.

Earth comes from Natural Earth, the Moon from the Clementine mosaic, Mars from MOLA topography, each in its own coordinate convention, and a point lands where the ephemeris says it should. Or hand mappo a function and it draws a world that never existed. Space missions, science demos, videogames, novels.

A planet that doesn't exist

One function decides land from sea, and every press writes a new one: new continents, new colours, new tilt. Yours can be your game's terrain, a novel's continents, or a dataset nobody has mapped yet.

Open →

Lowlands, MOLA · Equal Earth · planetocentric · 10 landings, 1976–2021

Every landing on Mars, where it stopped

Ten spacecraft on an equal-area map of Mars, the projection global science maps are drawn in, with the northern lowlands from MOLA topography. Coordinates are planetocentric, as the IAU defines them, and every pin lands where the record says, to double precision.

Open →

Maria, Clementine · drag to turn · 9 landings, 1966–2024

Everywhere we've landed on the Moon

Nine soft landings on a Moon you can turn, with the maria from the Clementine mosaic, and the same Moon unrolled in the corner so the far side shows too. Apollo's six sit on the side that always faces us; Chang'e 4 and 6 landed where the Earth never rises.

Open →

No three.js. No WebGL. No build step.

Just simple, boring, reliable web technologies. Mappo rejects complexity: drop mappo.js from any CDN into your website and start building without downloading half of the internet to make it work.

The Earth's orbit around the Sun and the planet as the Sun sees it, drawn on mappo

The Earth's orbit, Kepler solved in the page

Everything on that page is HTML, CSS and plain JavaScript on top of mappo. No framework, no bundler, no third library. View the source.

Open →

Up and running in a minute.

One script tag from a CDN, or an npm install. No build step, no framework, nothing to configure. Then one tag wherever you want a world.

  1. Install

    One script tag from a CDN, and the whole library is on the page.

    <script type="module" src="https://unpkg.com/[email protected]/dist/all.js"></script>

    or

    npm install mappo
    import "mappo/all"; // or "mappo" alone: the 22 KB core

  2. Add the tag

    Anywhere in your HTML. That is a spinning globe with three pins on it.

    <mappo-world mode="globe"
  places="Lisbon, Tokyo, São Paulo"
  rotate-speed="2">
</mappo-world>

  3. Make it yours

    Flat or globe, dots or coastlines, your colours from your CSS variables, another planet if you like.

    <mappo-world mode="flat" tilt="36"
  figure-color="var(--brand)"
  places="Berlin, Nairobi, Jakarta">
</mappo-world>

    Every attribute is documented in the README. The globe, the coastlines, the arcs and the other worlds are modules a map loads only when it asks for them.

What's in the box

Everything below is one tag and a few attributes.

  • Flat map or globe, the same tag and the same attributes: mode="flat" or mode="globe".
  • Dots, fills or coastlines. A dot field, a solid figure, or Natural Earth's outlines and borders.
  • Places by name. 160 cities in the box, or any lat,lon; markers that pulse and answer to hover.
  • Arcs and spikes between places, animated by a range you set, over the globe or the flat map.
  • Other worlds. The Moon and Mars as packs, or your own planet from one function that says land or sea.
  • Projections. Equirectangular, Equal Earth, polar stereographic, or any d3-geo projection.
  • Your HTML on the map. Children with data-lat and data-lon ride the geography; a canvas layer draws over it every frame.
  • The glass globe. A perspective camera, fog, tilt, roll and a Fibonacci lattice.
  • Colours from your CSS variables, so dark mode costs nothing. 22 KB core, zero dependencies, MIT.

What it isn't

So you know before you start.

  • Not a slippy map. No street tiles, no zooming into a city block. Leaflet and MapLibre do that; mappo draws the world.
  • Not WebGL. SVG for the flat map, canvas for the globe: fast at the sizes a homepage uses, and a WebGL renderer is on the roadmap for the very large.
  • Not an astronomy library. The satellite and orbit demos carry their own math; the package knows surfaces, outlines, regions and places.
  • No geocoding. You bring coordinates, or use the names in the box.
  • Filled land on the globe comes from a mask, not from the vectors. Outlines are exact everywhere; fills on the sphere follow the grid.

World maps your competitors will screenshot.

Free and open source. The whole install is one line on your website.

<script type="module" src="https://unpkg.com/[email protected]/dist/all.js"></script>
Read the docs