LogoLogo
  • PlaceOS Documentation
  • Overview
    • Key Concepts
      • Drivers
      • Interfaces
      • Modules
      • Settings
      • Systems
      • Triggers
      • Zones
    • Languages
      • Crystal
      • TypeScript
    • Protocols
      • MQTT
      • SAML
      • OAuth2
  • How To
    • Configure PlaceOS for Microsoft 365
      • Step 1: Room Calendar Access
        • Create Azure App Registration (Application Permissions)
        • Exchange Calendar Group
        • Limit Application Permissions
        • Configure PlaceOS Calendar Driver
      • Step 2: User Authentication & Calendar Access
        • Create a PlaceOS Authentication Source
        • Create Azure App Registration (Delegated Permissions)
        • Configure PlaceOS Authentication Source
        • Add User Login Redirects
      • Concierge Access
      • Troubleshooting
        • Blocked or Blacklisted IP Error
    • Configure PlaceOS for Google Workspace
      • Google Configuration
        • Create Google Cloud Project & Enable API
        • Configure Google Cloud Service Account
        • Add Google Workplace Permissions
        • Create Google Marketplace App (optional)
        • Google Workspace Service User (RBAC)
        • Configure Access to Google Resource Calendars
      • User Authentication
        • Create a PlaceOS Authentication Source for Google
        • Create Google Cloud OAuth2 Client App
        • Configure PlaceOS Auth Source for Google
        • Add User Login Redirects
    • Deployment
      • Deploy AWS Fargate on Modular CloudFormation Stacks
      • Deploy AWS Fargate on Nested CloudFormation Stacks
      • Writing Import Scripts
    • Analytics
      • MQTT Integration
    • Backoffice
      • Add a Domain to PlaceOS
      • Backoffice File Upload
      • Configure Staff API
      • Calendar Driver
      • Enable Sensor UI
      • Bookings Driver
      • Configure a webhook
    • Authentication
      • Azure B2C
        • Azure B2C Custom Policy Framework
        • Configure PlaceOS for Azure B2C
        • 365 Room Resources on Azure B2C
      • Configure SAML SSO
        • Configure SAML2 with AD FS
        • Configure SAML2 with Auth0
        • Configure SAML2 with Azure AD
        • Configure SAML2 with Google Workspace
      • Configure OAuth2 SSO
      • X-API Keys
      • Bearer tokens
    • Location Services
      • Location Services
      • Area Management
      • Discovering User Devices
      • Locating Users on a Network
      • People Finding with Cisco Meraki on PlaceOS
      • People Finding with Juniper Mist on PlaceOS
    • Notifications
      • Catering Orders
    • User Interfaces
      • Booking Panel App
      • Workplace App
      • Native Booking Panel App
      • Deploy a Frontend Interface
      • Microsoft Outlook Plugin
      • Configure Endpoint Auto Login
      • SVG Map Creation
      • Configuring a default UI
  • Tutorials
    • Setup a dev environment
    • Backend
      • Troubleshooting Backend Failures
      • Import Bookable Rooms
      • Writing A Driver
        • Testing drivers
        • ChatGPT / LLM Capabilities
          • Native GPT Plugins
      • Testing Internal Builds
    • Backoffice
      • Adding Drivers & Modules
      • Add Zone Structure
    • Common Configurations
      • Asset Manager
      • Catering
      • Locker Booking
      • Webex Instant Connect
      • Desk booking
      • Sensor Data Collection
        • Configure Kontakt IO
        • Configuring Meraki
        • Configuring DNA Spaces
      • Elevated Privileges
  • Reference
    • API
      • Real-time Websocket
      • Rest API
      • Staff API
    • Drivers
      • PlaceOS
        • Bookings
        • Staff API
        • Visitor Mailer
        • Lockers
      • Microsoft
        • Graph API
    • PlaceOS Skills
    • Privacy Policy
    • Recommended Products
    • Supported Integrations
    • System Architecture
    • System Functionality & Requirements
    • Infrastructure Requirements
    • Security Compliance
      • FAQ
      • GDPR
      • Security
    • Microsoft Azure Permissions
  • Glossary
  • 🎯PlaceOS Roadmap
  • 🆘PlaceOS Support
  • 👩‍💻PlaceOS Github
  • 📝PlaceOS Changelog
Powered by GitBook
On this page
  • Intro
  • Step 1 - Get Floor Plans
  • Step 2 - File Set Up & Import Architecture Drawing To Adobe Illustrator
  • Step 3 - Creating Your Layers
  • Step 4 - Creating Floors
  • Step 5 - Floor Dimension
  • Step 6 - Outlining Floors aka "The Skeleton"
  • Step 7 - Space Highlights
  • Step 8 - Compare Floor Plans
  • Step 9 - Completing Layers
  • Step 10 - Adding Bookable Rooms
  • Step 11 - Booking IDs
  • Step 12 - Adding Text
  • Step 13 - Adding Icons
  • Step 14 - Checking Names/ID
  • Step 15 - Exporting
  • Checklist
Export as PDF
  1. How To
  2. User Interfaces

SVG Map Creation

Create SVG Maps for use with PlaceOS

PreviousConfigure Endpoint Auto LoginNextConfiguring a default UI

Last updated 2 years ago

Intro

Maps are where function meets form, and are the starting point of any conversation between a user and the platform.

A bespoke map is like a tailored suit or custom jewellery piece. You can elevate something plain by perfecting the details which takes the final product to the next level. The choices you make along the way will define the story you tell with the finished product. This guide will step you through the process in creating a map that is usable and visually effective.

When going custom you’ll get to choose from a range of details, such as linings, button colours and stitching choices. This is how PlaceOS designs maps for our clients - we take your average engineering map and we give it a makeover to impress the user.

We have also produced a video overview to walk through creating SVG Maps. You can view the video by .

Step 1 - Get Floor Plans

Get architectural floor plan from client and branding colours (if provided).

Step 2 - File Set Up & Import Architecture Drawing To Adobe Illustrator

When working in illustrator it's important to set your art-boards to pixels (px) for web form.

  • Drag drop a JPEG version of the floor plan into Illustrator

  • To get started with the right settings, navigate to Illustrator > Preferences > General

  • Select "scale corners" and "scale strokes and effects". This will ensures all your objects will scale to the stroke you set, which provides freedom in scalability

  • Select "Units" from the side options and double check everything is set to pixels as we are working in web

Step 3 - Creating Your Layers

Before getting started on design it's important to name and order your layers. The ideal way to create layers is to start from the bottom working your way up. For a floor plan that could mean:

  1. Main features such as the skeleton shape of a building

  2. Signage such as toilets, stairs, lifts

  3. Adding furniture and room statuses

Original floor plan should be locked to avoid it moving out of place while designing.

Step 4 - Creating Floors

In a new layer start outlining your architectural floor plan. Fill in the shape with color (as outlined by brand guidelines). Lock the layer and name layer “outline”

Step 5 - Floor Dimension

Copy and paste outline and fill in with color (new layer) and lock the layer - name layer bkd. To give a shadow or building structure effect to the “outline” layer, offset this layer from it. Shift this shape sideways or downward (building shapes vary).

Step 6 - Outlining Floors aka "The Skeleton"

Note that the floor plan walls and outlines do not need the exact thickness of each wall illustrated. The plan needs to define wall areas that are entrances to spaces and rooms. The outline shape of the floor should be a little bit thicker in point size compared to its inner walls to define boundaries.

To get started on the skeleton, select the "pen tool" and select a point size to outline walls. This can be anywhere from 2px-6px. Begin illustrating the custom map, ignoring any outlines that are not needed. For example, pipes near bathrooms or electrical rooms can have a darker blank color fill.

Step 7 - Space Highlights

Next, check the architectural floor plan to see which spaces need signage e.g. rest rooms, stairs or cafe spots. These spaces can have a filled space highlight that compliments the background color of the map.

Step 8 - Compare Floor Plans

Check the architectural floor plan to verify each room. Begin placing furniture and other features in designated spaces and rooms on your map. You may need to create your own designs according to the brand guidelines.

Step 9 - Completing Layers

Make sure furniture and other elements such as plants are proportional to the room size and layout. Ensure plants are block colors and are not composed of a gradient. Once complete, lock the layer and name it “plants and furniture”.

Step 10 - Adding Bookable Rooms

In a new layer, use the “rectangle tool” to create an overlay for room bookings (bookable rooms). Ensure the layer is between 40-60% black. This layer should be on a layer below lines (for appearances to look neater). Name layer “room bookings”.

Step 11 - Booking IDs

In the layer “room bookings” you will need to write room IDs. Clients may give room ID specifications, such as capitalized vs lower case, order of room/level number, etc. Generally, room labels should be in the following format: area-[level].[room number]-status.

All IDs MUST start with a letter (i.e. must not start with a number or other character). This is due to the CSS selector conventions.

Step 12 - Adding Text

Step 13 - Adding Icons

On the final new layer, add icons to your map. Icons should follow the branding guidelines e.g. style, colors, line weight/thickness etc. Ensure colors chosen for icons also stand out against the map background.

Step 14 - Checking Names/ID

Once all elements are on your map go back to the booking layer and be sure to check the name and number of each room. We recommend placing the names in order, to ensure there are no double ups. Remember the SVG map will not work on the frontend if two rooms have the same ID.

:::tip IMPORTANT All IDs MUST start with a letter (i.e. must not start with a number or other character). This is due to the CSS selector conventions. :::

Step 15 - Exporting

Go to File > Export As > SVG > Save to designated folder.

Ensure the following is correct:

  1. Styling > Internal CSS

  2. Font > SVG

  3. Images > preserve

  4. Object IDs > Layer names Decimal > 3

  5. Tick "minify" and "responsive"

  6. Select "OK"

Checklist

Once you have labeled each room layer, you can create another layer “text”. On it, you will label each room and section of the map. This text should be Arial and anything larger than 6pt text size. For rooms use Arial bold or medium for other sections of the map use Arial regular or light. Make sure text is a color that stands out against the map background. You can check that this is accessible with a .

contrast checker
clicking here
Base Building Floor Plan
Illustrator Preferences
Make sure scale corners and scale strokes and effects are selected.
Select "Units" and double check everything is set to "Pixels"
Layers
Floor Dimensions
Outlining Floors
Space Highlights
Compare floor plans
Completing Layer
Adding Bookable Rooms
Booking ID
Adding Text
Adding Icons
Checking Names and ID
Exporting