Map Editing for Wayfinding
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
Navigate to WayFinding
Click "Create".
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”.
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”.
Open the map in Builder and click on "Save" to save the configuration.
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.
Follow the guidelines below when creating map files to ensure compatibility with wayfinding systems and smooth performance in web-based viewers.
All maps must be saved in SVG format.
Each floor must be saved as a separate SVG file (one file per floor).
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.
Each floor map should be no larger than 300 KB.
Larger files will significantly slow down file preview and rendering, especially on web platforms.
The map should not contain any Clipping Masks.
Only use strokes and fills to define shapes.
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.
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.
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.
