Maploom tutorial

How to make a clickable floor plan with Maploom

A floor plan can show where a room is while leaving visitors guessing what happens there. Add a hotspot to each room so a visitor can select it, read a short description, and open a relevant page.

This walkthrough uses Maploom, Nishvault’s free clickable image map generator, to turn a single floor plan image into an HTML viewer. You draw overlays on your artwork, save an editable project, and export the viewer. You do not need an account or an API key.

What you need before drawing

Use a PNG, JPEG, WebP, GIF, or SVG image that you have permission to use. Maploom accepts images up to 8 MB and dimensions up to 20,000 by 20,000 pixels. Start with readable room labels and enough contrast to distinguish room boundaries.

You can open the Maploom editor or download the editor from its product page, unzip it, keep the app folder together, and open app/index.html. JavaScript must be enabled. If your organization restricts local files, use an approved opening method.

The included Cedar Court plan is a synthetic demonstration. Its example.com destinations are placeholders. Explore the sample viewer to see how a selected region opens its details.

Plan three useful hotspots

For an original practice scenario, imagine Pine Hall, a fictional community venue with a welcome desk, a gallery, and a workshop room. This is an illustrative example, not a customer project or a building safety plan. Sketch three labeled areas on your own image, or use equivalent areas in an image you already own.

Pine Hall hotspot content to enter in the editor
Area and shape	Hotspot title	Description	Practice destination
Welcome desk: marker	Start at the welcome desk	Ask about today’s activities before exploring the gallery.	`https://example.com/pine-hall/welcome`
Gallery: rectangle	Explore the gallery	Read about the current display and check visiting information.	`https://example.com/pine-hall/gallery`
Workshop room: rectangle	Plan a workshop visit	Review the activity description before choosing a session.	`https://example.com/pine-hall/workshops`

The URLs above are demonstration values only. Replace each one with an existing page you control before sharing a map. Write descriptions that help a visitor choose what to do next; do not invent opening hours, accessible facilities, or booking availability.

1. Import your image and draw the regions

Choose Upload image / SVG and select your artwork. Importing a new image starts a new map, so save any previous project first. Check that the image looks correct before adding hotspots.

Choose Marker and select the welcome desk location. Choose Rect and drag diagonally across the gallery, then repeat for the workshop room. Use Ellipse for a rounded area or Polygon for an irregular boundary. A polygon needs at least three corners; choose Finish polygon or press Enter to finish it.

SVG import treats the illustration as background artwork. It does not turn existing source paths into editable hotspots. Scripts, external assets, and unsupported SVG content are removed during sanitization, which can change an illustration’s appearance.

2. Add details and check the placement

Select a region on the image or in the region list. Enter its title, description, destination, and color, then choose Apply changes. The three rows above give you practice text. Invalid values show an error and preserve the prior region.

Use Select to move a region or drag its handles to resize it. Image-coordinate fields let you refine its position. For keyboard adjustment, arrow keys move the selected region one image pixel; Shift plus an arrow moves it ten. Choose Undo if you move the wrong region.

Keep the destination related to the selected area. A gallery hotspot should lead to gallery information rather than a general page that makes the visitor start over. Maploom accepts HTTP, HTTPS, mailto, tel, and fragment links; a destination still needs to exist and work on the final site.

3. Preview the map and save an editable backup

Choose Preview and select each region. Read the detail panel, then check the destination you entered. Use Tab and Enter to test keyboard selection. The viewer also includes text choices below the image, which are useful when a shape is small.

Phone width constrains the editor canvas to 390 pixels or the available width. It helps you inspect a narrower layout, but you should also test your exported viewer on the devices and browsers your visitors use.

Choose Save project to download a .maploom.json file. Reopen it with Open project and confirm that the artwork, regions, and details return. Keep this file for future edits. Browser recovery storage can be unavailable or cleared; the downloaded project is the dependable backup.

4. Export the viewer and embed it on your site

Choose Export HTML and open the downloaded file. It contains the image, region data, details, and viewer code in one HTML document. The viewer does not require a Maploom backend or a CDN. External destination pages still require a connection when a visitor opens them.

After checking it, upload your exported file to an approved location on your website. For example, if you publish the file at /maps/pine-hall.html, you can embed it with:

<iframe src="/maps/pine-hall.html"
        title="Explore the Pine Hall floor plan"
        style="width:100%;height:900px;border:0"
        loading="lazy"></iframe>

That path is an example you would create on your own site. Adjust the height to show the details panel, and check your site’s embedding policy. Exporting a file does not publish it or configure your hosting. To revise the content later, reopen the saved JSON, edit it, export a new HTML file, and replace the viewer at your chosen location.

Check these items before sharing

Select every hotspot and confirm its description matches the right room.
Replace all example.com links and check each real destination.
Use the exported text choices with a keyboard and inspect the detail panel on a narrow screen.
Reopen the downloaded project and viewer, then check the actual page where you embed the viewer.
Share only artwork and content you have permission to publish. Do not include private visitor or other sensitive information.

What Maploom includes, and where its scope ends

Maploom provides a local editor and an exported interactive image viewer. It does not provide a hosted account, multi-floor route navigation, a CMS installer, or an analytics service. It is useful for explaining areas on a drawing; it does not establish measurements, code compliance, or emergency routing.

The documented build has local functional and browser checks, including saved-project reopening and HTML output. Those checks do not establish compatibility with every browser or a full accessibility certification. The recorded mobile observations used a 390 by 844 viewport with pointer and keyboard input; physical-device touch and pinch were not verified. Test your own final content in its actual setting.

The free editor permits personal and commercial use. You may export, share, embed, or sell the outputs you create, including the embedded viewer runtime. Redistribution or resale of the editor or complete package is restricted. Read the full Maploom use terms; rights in uploaded artwork remain with its rights holders.

Optional branding or website integration requires a separately agreed scope. No paid checkout, recurring charge, guaranteed support, or update schedule is included in the free offer.

Get Maploom and its editable example · Read the complete usage guide