Map basics

Aspect ratio: how your map fills the screen

Anyone building maps All guides

The aspect ratio of a map image is its width compared with its height — a wide landscape plan, a tall portrait one, or a square. Mapvera sizes the map from this ratio, so framing your artwork well makes the difference between a map that fills the space and one that leaves awkward gaps.

How Mapvera uses the ratio

The viewer is responsive: it takes the width available and works out the height from your map's aspect ratio (width × ratio), then re-checks whenever the window changes size. A wide map gets a short, wide frame; a tall map gets a taller one. Your image's proportions, in other words, drive the shape of the map on the page.

Because the height follows the image, an image with lots of empty space around the edges wastes screen — the useful part ends up small and boxed-in. Crop to the map itself.

Portrait, landscape or square?

Which shape suits your space

ShapeGood forWatch out for
Landscape (wider than tall)Most site plans, campuses, wide floors, embeds in a page columnOn a narrow phone it can become quite short — check labels are still legible.
Portrait (taller than wide)Tall buildings shown as a section, narrow sites, phone-first mapsOn a wide desktop it may leave space either side.
Square-ishSingle rooms, compact areas, a safe all-round choiceRarely a problem — a balanced fit on both phone and desktop.

Keep the ratio consistent across levels

If your map has several levels, give each level image the same aspect ratio. Then the frame doesn't jump in shape as visitors switch floors, and everything feels like one building. See the guide on aligning multi-level images for the full method.

Framing tips

  1. Crop to the content

    Trim empty borders so the map fills its frame. A small, even margin for breathing room is fine; a large blank border is wasted space.

  2. Match the ratio to where it'll be seen

    A map that mostly lives embedded in a page column suits a landscape shape; a map people will open on their phones can suit something closer to square or portrait.

  3. Preview as you go

    The editor's live preview shows the real shape. Resize your browser window to see how it reflows — that's exactly what a visitor's phone or laptop will do.

  4. Avoid extreme ratios

    Very long, thin maps (either direction) become hard to read on the opposite-shaped screen. If your map is extreme, consider splitting it across levels or sections.