Skip to main content

Creating Synoptic Maps for PowerBI

Purpose

To produce accurate, data-ready floorplan overlays for Power BI dashboards.


 

This process ensures consistency between InDesign visuals, Vantage Space data points, and Synoptic regions.


Responsible Party

Data Analyst or Research Associate preparing spatial visualizations for integration into Power BI dashboards.


Interdependencies

Before starting:


  • Floorplans and base visuals are finalized in InDesign.  

  • Vantage Space has the corresponding floor and room points created and cleaned.  

  • Vantage Space usability study has been performed, data is downloaded and cleaned.

    • Ensure data has a floor-point combined column. This prevents issues where the same point number is assigned to multiple floors.


After completion:


  • SVG overlays are ready for Power BI integration.  

  • The Power BI file is verified for correct relationships between points for both data and the map. and presentation background.


Directions

1. Export Visual Assets from InDesign

Retrieve the Synoptic-ready floorplans from the client’s Box project folder. - Location: Box/Projects/[Client]/1 - Project Launch/Floorplans - Ensure you have the most recent version of the file. Open Vantage Space and locate the floorplans associated with the current project.


 

For each floorplan:


 

  • Export two visuals:   

1. Production-ready background — full artwork with all visual layers.   

2. Stripped flood-fill version — only the layers:      - Floor Plan      - Synoptic Guides


 

IMPORTANT :: If “Synoptic Guides” do not exist, they must be created before proceeding. These lines serve as clean region boundaries for the svg_map generator.


 

Save both exports as high-resolution .png files. Ensure they are the same resolution.


2. Generate the SVG Region Map

Install Firefox, if it is not already installed.

Use the Firefox extension (Save #map as SVG) to export Vantage Space markers.


 

  • This can be added by visiting about:debugging#/runtime/this-firefox in Firefox and loading a temporary addon (select manifest.json).

  • For Chrome visit chrome://extensions and perform the same actions.

  1. Open the Vantage Space page for the desired floor.

  2. Ensure the correct map is visible on screen.

  3. Run the extension (toolbar icon).      - The exported file will contain all the point marker data (floorplan__.html).


 

Save the resulting file as <FloorName>.html in the Box project folder.


3A. Using the Graphical User Interface (GUI) (Recommended)

The svg_map GUI provides a simple interface to generate SVGs without using the command line.


 

  1. Double-click svg_map.exe to open the GUI.

  2. Use the Browse buttons to select:

  • Points HTML → exported from Vantage Space.

  • Fill Image → stripped InDesign export (Floor Plan + Synoptic Guides).

  • Presentation BG → production-ready InDesign visual.

  • (Optional) Reference CSV and Colors CSV for data-driven fills.

    • Reference CSV should be the data only from the given floor

    • Colors CSV is optional, it will default to the DORIS usability colors.

  • Enter values for:

  • Tolerance – how loosely colors are grouped (default 18).

  • Simplify – shape simplification (default 1.5).

  • Smooth iterations – edge rounding passes (default 0).

  • Floor Prefix – (e.g., east_campus_b_1), used to create unique IDs per floor.

    • Floor Prefixes are generated by slugifying the building + floor together.

  • Press Generate SVG.


The output file will appear in the same folder as the selected files, ready for Power BI integration.


3B. Run the svg_map CLI

Move svg_map.exe into your working directory.


 

In a terminal from your working directory run:



.\svg_map.exe <FloorPlan.html> <fill-image> <out.svg>   --presentation-bg <presentation.png>   --reference-csv <reference.csv>   --colors-csv <colors.csv> --floor "<floor-prefix>"



 

Where:


  • <FloorPlan.html> → the file exported by the browser extension.  

  • <fill-image> → your stripped flood-fill visual (Floor Plan + Synoptic Guides).  

  • <presentation.png> → the production-ready visual from InDesign.  

  • --reference-csv and --colors-csv → optional for data-driven fills (refer to the standard color bands CSV used in Power BI).  

    • Insure --reference-csv only contains the data from the floor you're generating. (This will change in future updates.)


 

This command flood-fills each area defined by the stripped visual, matches it to the points from Vantage Space, and outputs a fully bound out.svg overlay.


4. Verify Output

  • Open the generated SVG in a browser or image viewer.  


  • Confirm that:


  •   - Each polygon corresponds correctly to its marker ID.


  •   - The embedded background (presentation.png) is visible and correctly aligned.


  •   - No rooms are missing or misaligned.


If misalignments occur:


  • Adjust tolerance (--tolerance) or smoothing (--smooth) values and rerun.

  • Ensure points in Vantage Space are aligned properly with the Synoptic Guide visual, as any deviation will cause overflow.


5. Upload to Power BI

  1. Add the Synoptic Panel visual.  


  1. Import the generated SVG.  


  1. Bind the “floor-points” column from the dataset to the SVG’s area IDs.  


  1. Verify hover and selection interactions.  


  1. Once validated, store the completed .pbix file in the designated project workspace.


Data Structure and Keys

To prevent overlap between multiple floors within the same building, the usability dataset should include a compound primary key:



 

floor_point = floor + point



 

This concatenated key must be unique across all records and will later align with the SVG’s optional compound ID argument.


 

The Rust generator (svg_map) will eventually support this as an optional feature, allowing per-floor differentiation while maintaining consistent bindings in Power BI.


Outputs

  • FloorPlan.html — exported from Vantage Space.  


  • flood.png — stripped version with only structural guides.  


  • presentation.png — final aesthetic background.  


  • out.svg — fully bound, Power BI-ready synoptic floorplan.


Notes

  • The Firefox add-on is temporary (MV2) and must be reloaded each session via about:debugging#/runtime/this-firefox.  


  • Can be added to chrome similarly by visiting chrome://extensions


  • When exporting from InDesign, ensure layer naming consistency across all floors.  


  • For curved rooms or round edges, increase --smooth to 2–4 for a cleaner result.  


  • svg_map embeds the presentation image inline for portability.


Resources

  • Box Project Folder: Folder

  • SVG_Map program: I don't have this configured yet.

  • Synoptic Panel License: Available from Marie or Katie

  • Vantage Space: Vantage Space

Back to top