Customer Support

Map Editing for Wayfinding

Use the dedicated WayFinding module to edit and manage floor plans and maps with custom routes within complex buildings and structures, providing end users with accurate directions to exactly where they want to go.

The map editor doesn't allow you to create maps from scratch. Before using it, ensure you have a source map file in SVG format. You can create maps in any graphic design tool — Figma, Adobe Illustrator, Adobe XD, or others — and export them.

Note that Illustrator, in particular, includes features that can significantly increase file size for exported maps, which may prevent them from opening properly in our wayfinding system. We recommend avoiding these features when working in Illustrator. See the Source map guidelines below.

Adding a new map

  1. Navigate to WayFinding

  1. Click "Create".

  2. Fill in the map details:

  • Enter a name and description for the map.

  • Choose a cover image from the Media Gallery.

  • Select map languages and specify the default language (if more than one selected).

  • Click “Save”.

  1. Click "Add floor" and fill in the details for the new floor:

    • Select the floor number (from -5 to 15).

    • Enter the floor name as it will be displayed on the map.

    • For multilingual support, tick the checkbox and enter the floor names in your selected languages.

    • Enter the floor description.

    • Upload a source map image file in SVG format that will serve as the basis for building your final map.

    • Click “Save”.

  1. Open the map in Builder and click on "Save" to save the configuration.

Editing a map

In the map editor (Builder), you can modify your multi-floor maps, customize points of interest (POIs), and build routes in a simple interface with adjustable features, including object descriptions, indoor view photos, zooming, and multilingual capabilities.

Click "Open in Builder" in the Map Details view to access the editor.

Source map guidelines

Follow the guidelines below when creating map files to ensure compatibility with wayfinding systems and smooth performance in web-based viewers.

1. Format

  • All maps must be saved in SVG format.

  • Each floor must be saved as a separate SVG file (one file per floor).

2. Dimensions

  • The map size should be no smaller than 1500 pixels and no larger than 2500 pixels in either dimension.

  • All floors should be created at approximately the same scale, so they align visually when viewed together.

3. File Size

  • Each floor map should be no larger than 300 KB.

  • Larger files will significantly slow down file preview and rendering, especially on web platforms.

4. No Clipping Masks

  • The map should not contain any Clipping Masks.

  • Only use strokes and fills to define shapes.

5. Avoid Effects That Create Clipping Masks or SVG Artifacts

When using Adobe Illustrator, avoid the following operations or features, as they can automatically generate <clipPath> or <mask> elements in the exported SVG:

🔶 1. Use of Transparency

  • Any object with Opacity < 100%

  • Grouping objects with mixed opacity

🔶 2. Effects via Appearance Panel or Effects Menu

  • Drop Shadow

  • Outer Glow / Inner Glow

  • Gaussian Blur

  • Feather

  • Stylize → Scribble, Round Corners, etc.

These effects are often exported as <mask> or <clipPath> in SVG.

🔶 3. Opacity Masks

  • Created via the Transparency panel: Make Opacity Mask

These are directly converted into <mask> elements in SVG.

🔶 4. Grouping with Mixed Styles

  • Avoid grouping elements that combine:

    • Transparent objects

    • Effects

    • Normal vectors

Illustrator often wraps such groups in a clipPath on export.

🔶 5. Manual Clipping Masks

  • Object → Clipping Mask → Make

  • Or shortcuts Ctrl + 7 / Cmd + 7

This is the most direct source of <clipPath> elements.

🔶 6. Use of Symbols, Patterns, or Brushes

  • These elements may internally include masks or transparency.

  • Illustrator often adds a clipPath to preserve appearance in SVG.

🔶 7. Automatic Opacity Flattening

  • If transparency is not flattened before export, Illustrator may automatically apply a mask when saving the file as SVG.

🔶 8. Complex Groups with Stroke + Gradient + Transparency

  • Objects that combine strokes, gradients, and opacity are often wrapped in a mask or clipPath.

6. Do Not Use Direct SVG Exports from Construction Tools

  • Files exported directly from construction or CAD software (e.g., FinalCAD, AutoCAD, Revit, ArchiCAD, etc.) in SVG format are not suitable.

  • These files typically contain an excessive number of elements, unnecessary metadata, and large file sizes, which make them difficult to work with and slow to load in wayfinding systems.

Recommendation Before Exporting from Illustrator

  • Use Object → Expand Appearance and Object → Expand to convert effects to basic shapes.

  • Use Object → Flatten Transparency with vector priority and convert strokes and text to outlines if needed.

Examples of Good Maps

Examples of Bad Maps

PreviousContent Editing TipsNextContent Publishing

Last updated

Was this helpful?