Build your first map (10 minutes)
This tutorial walks you through building an interactive map from scratch — from a blank canvas to a published, embeddable map.
You’ll need a Mapplic account. If you don’t have one yet, start with Cloud hosting and come back here.
Create a map
From your maps dashboard , click Add new map. You can either upload your own file — an SVG, PNG, or JPG — or pick one of the built-in geographic maps. An SVG gives you clickable vector shapes (rooms, zones, seats); a raster image works well for maps where markers sit on top.
Check the base layer
The builder opens on your new map. In the Layers panel, confirm the file uploaded correctly and that the map dimensions look right. A map can have several layers — the floors of a building, for example — but one is all you need to start.
See the Layers guide for multi-layer maps.
Add locations
Locations are the interactive points and shapes on your map. Add them two ways:
- In the Locations panel, click the + button. A new location is added at the center of the map — drag it into place.
- On an SVG, use the recognizer to turn the file’s named vector elements into locations automatically.
Every location needs an id — that’s the only required field. Everything else (title, description, image, link, and more) is optional. On vector maps the id should match its SVG element id so the shape becomes interactive.
The Locations guide covers every field, the recognizer, and bulk CSV import.
Settings and modules
Two panels control how your map behaves:
- Settings — core map behavior: zoom and pan, fullscreen, the hover tooltip, deeplinking, and breakpoints.
- Modules — larger features you switch on as needed: the directory, search & filters, the legend, localization, opening hours, and wayfinding.
Every setting is documented in the map data schema.
Publish & embed
When you’re happy with the result, publish the map and copy its embed snippet onto your site. Publishing & embedding walks through the embed code, version pinning, and what each subscription tier serves.
Your map is live. Continue with the Multi-language map tutorial, or browse the editor panels for individual features.