How to Create and Embed a Custom Map with uMap

uMap lets you build a custom map on top of OpenStreetMap background layers and embed it on your own website, without writing code. You can start creating a map anonymously — no account required — and the interface is a graphical one, so markers, lines, polygons, and imported data layers are added by clicking rather than coding. The steps below cover choosing an instance, building the map, importing data, and embedding the result.

Choose an instance and start a map

uMap is run on several public instances. The homepage presents a choice of servers, and the one you pick determines whether real-time collaboration is available:

If you want several people editing the same map live, choose the main instance where real-time collaboration is activated. Otherwise any instance works for anonymous, single-editor use.

From the homepage, select Create a map to open the editor. Because anonymous usage is activated, you can begin immediately; creating an account is optional but useful if you want to keep and manage your maps over time.

Add markers, lines, and polygons

Inside the editor, the base layer is OpenStreetMap. You draw on top of it using the built-in drawing tools:

• Markers for points of interest.
• Lines for routes or linear features.
• Polygons for areas.

A documented example is drawing lines and polygons to find roofs with potential solar panel sites — the polygon marks the roof area, and the geometry is what makes the map useful rather than just a picture.

Import data layers and overlay them

Beyond hand-drawing, uMap supports importing information layers and placing them over the tile layer. The project shows several use cases:

• Importing the public transportation network for a city.
• Importing data and drawing on top of a tile layer to make a flooding hazards plan more understandable.
• Using a heatmap to represent densities (the example given is pubs in a neighborhood).
• Using the cluster feature when there is too much information to display at once, so points appear step by step as you zoom in.

If your dataset is dense, reach for clustering or a heatmap instead of plotting every point individually.

Tell a story with the slideshow feature

uMap includes a slideshow feature that lets you insert photos, texts, sounds, and videos and display them in a specific order. This turns a plain map into a guided narrative — useful for walking a viewer through a sequence of locations rather than presenting everything at once.

Embed the map on your website

uMap is designed so you can integrate the maps you build on your own website. Once your map is ready, use the embed option in the editor to generate the code for your site. The project's own description states that uMap "lets you quickly build custom maps with OpenStreetMap's background layers and integrate them on your own website," and the interface is graphical, so no coding is needed to produce the map itself.

What to know before you rely on it

• It is free and open-source, described as "free (as in speech and beer)," maintained by a community of contributors, with 10+ years of improvements and 60+ contributors to the codebase.
• Scale is real: the project reports 190,194 user accounts, 1,561,209 maps created, and 9,890 edited maps per week.
• It is actively developed: the latest release listed is 3.4.2 (2025-11-26), with commits as recent as 2025-12-02 and 1,400+ GitHub stars.
• Support and documentation exist: the site links to documentation, a forum, and GitHub, and notes sponsors and a way to support development.

If you need live multi-user editing, confirm you are on an instance where real-time collaboration is activated before inviting collaborators.