Map basics

Designing an illustrated map

Anyone building maps All guides

An illustrated map — a hand-drawn festival site, a stylised campus, a playful park or trail map — can be far more inviting than a technical plan. It works beautifully in Mapvera, as long as you design it with the interactive layer in mind.

Draw it as vector where you can

Illustration tools like Illustrator, Inkscape, Figma and Affinity Designer export SVG, which stays perfectly crisp however far a visitor zooms in — ideal for detailed illustrations. Mapvera stores SVGs exactly as you save them, so your artwork keeps every clean line. If you paint in a raster tool (Photoshop, Procreate), export a high-resolution PNG instead.

Whichever tool you use, one flat image is what you upload — Mapvera adds the pins, labels, search and directions on top. You're designing the backdrop, not the whole interface.

Leave the interactive layer to Mapvera

  1. Draw places, not labels

    Illustrate each stall, building or feature, but let landmark pins carry the names — so they stay searchable and never clutter the art when a category is filtered.

  2. Give pins a clear spot

    Leave a calm area over each place a pin will land, so markers and their labels sit clearly rather than getting lost in busy illustration.

  3. Don't illustrate UI

    Skip drawing your own legend, compass, search box or buttons — Mapvera provides those.

Keep it readable when zoomed to fit

Illustrated maps are often viewed whole first. Make sure the big shapes — zones, paths, key landmarks — read clearly at fit-to-screen size, with tiny detail as a reward for zooming in rather than something essential you can only see up close.

Colour with the pins in mind

Coloured pins, highlights and the visitor's location dot sit on top of your illustration. Keep backgrounds from being so busy or saturated that markers vanish, and if you're using category colours, leave enough neutral space for them to read. Good contrast between your art and the interactive layer is what keeps the map usable.

Style, size and shape

Practical settings for illustrated maps

ChoiceRecommendation
FormatSVG for drawn/vector art; high-resolution PNG for painted art
BackgroundTransparent PNG/SVG to sit on your background colour, or a deliberate painted background
ShapeFrame to a sensible aspect ratio; trim large empty borders
Multi-area mapsIf it spans several zones or floors, keep each level image on the same canvas so they line up

Preview and refine

Upload on the Levels tab, then use the live preview to add a few pins and check they sit well against your art. Illustrated maps often need a round or two of tweaking — nudging detail so pins have room — which is quick to do by re-exporting and re-uploading the image.