Best practices for designing floor plan graphics? What kind of map images are needed for indoor routing setup (RouteInside)?

Modified on Thu, 23 Jul at 1:53 PM

EventPilot Pro and certain Subscription levels include interactive floor plans that display an animated pin drop when the location button is tapped or clicked for a session or an exhibitor. You can upload your own map images and pin the different locations. 


Use the design guidelines outlined below for your map images. 


With EventPilot Pro projects, you can take your interactive floor plans a step further by purchasing the RouteInside add-on. The RouteInside technology allows you to offer your attendees indoor navigation through your venue across multiple floors and even between buildings. This means that attendees can see how to get from point A to point B and how long it may take. 


For RouteInside Users - Attention: Routing for Convention Centers

If you need to set up routing for a convention center, please contact your Project Manager to provide you with prepared floor plan graphics that we create for you. You will receive Adobe Illustrator .ai files that can be edited on the unlocked “customization” layer:
  • You may add/edit custom elements to this layer, add an arrow to emphasize on a specific room
  • You may move text around or change colors
  • Additional charges apply if you:

• Unlock or edit the locked layers

• Change the Illustrator Artboard

• Change, move, crop, scale up or down the floor plan graphic within the layer in any way since the routing is set to this layer and any edit to it would break the routing setup


Left graphic: correct. Right graphic: cropped, scaled, Artboard changed - incorrect. 



Return your edited .ai file to our team to update the graphics.


If you need help updating the graphics, please let us know, we are happy to assist.

In that case, you can use a basic image editing program or Adobe Acrobat to add change requests that we can apply for you.




One Floor Plan per Image*

Do not include multiple floors in a single graphic. Each floor must be displayed on its own image. 


Incorrect for Routing
Correct for Routing



For RouteInside, a "floor" must also be a contiguous area: Attendees must be able to walk between any two points on that floor plan without needing to transfer to another floor. 


For example, in New Orleans, to get from rooms in the 330-350s to rooms in the 380-380s, attendees must take an escalator down to the second floor, cross over, and go back up. For this convention center, the separate wings of the third floor are separate "floors" for routing purposes and require their own floor plan graphic. 


Aspect Ratio

If you have a long and skinny floor, add margins to your graphic to achieve close to a 3:4 or 4:3 aspect ratio for best results to display in the app. Utilize the white space to provide additional details about the floor and its location or venue.


Image too Narrow
Correct Ratio



Birds Eye View*

Avoid perspective for the floor plan to make it easier for attendees to grasp your event layout. RouteInside is not supported for graphics that are designed with perspective or 3D designs.



Incorrect for Routing
Correct for Routing



Display Entrances, Elevators, Stairs, Escalators*

If you upload an image especially for your expo or poster hall, ensure to include sufficient building structure to display entrances/stairs/and elevators to your expo hall or to individual booths.

This not only helps your attendees navigate your event, it also enables the RouteInside setup, if you wish to add that later.


Expo Missing Access
Correct with Entrances



Include a building/structure graphic

Your facility provider may be able to send you a basic building graphic outline that can be added as a thumbnail on each floor plan. Highlighting the floor as in the example image below gives users a visual clue which building floor the map image refers to. 


Example floor plan with building thumbnail



Display Venue Name and Floor Plan Level

If you need to display multiple different venues in the app, ensure to include the venue name and the floor's level in each graphic. This ensures that users will always know exactly which floor plan they are looking at without feeling lost.


Example floor plan with venue name and floor level



Include orientation

Ensure your graphic includes an indication where North is, as highlighted in the example graphic below. This helps your attendees orientate in large convention centers. 


For the RouteInside Add-On: If multiple elevators, escalators, or stairs are available in the graphic, the orientation becomes critical as the step by step routing instructions may include to use the "South Elevator."  



Map image example with North orientation


Important - all graphics must have the same orientation including the expo hall and poster hall graphics. 




Expo Hall

For your expo hall, upload a separate graphic following the best practices above. Ensure to indicate North on the expo hall image and the main entrances to the expo hall, so that attendees have a quick orientation where booths are located in relation to the entrance. 


RouteInside Add-On: Our team will set up routing from the convention center floor image to your expo hall graphic. 

For very large expos, check with your exhibits vendors if it's possible to receive the x/y coordinates for the booths as a spreadsheet. Our team can often import the these coordinates for you so that all exhibit booths are pinned on the map and updates become very easy. The coordinates should be in decimal form rather than mixed units, where applicable.



Image Size and Compression*

Your attendees will likely install the app once they arrive. This means, your graphics need to download via your WiFi onsite. Ensure the graphics are as small as possible in size. 


Recommended width: 2000 pixels

Recommended height: 1500 pixels


Do not use a transparent background! 


Before uploading the graphic, compress it via https://tinypng.com/. It's a free site where you can upload your graphic and their service will apply an excellent compression on the file. Download the file and open the Conference App Builder > Maps > Floor Plans > upload your map image files. 


After upload, give each map a label and assign it to their venue.

If you have not yet set up your venue, go to Conference App Builder > Maps > Venues



For RouteInside Setup Only

Upload Floor Maps for Entrances and Connectors*

While you may only use the 5th floor of a hotel for your event, you will need to include a floor plan for the ground floor that contains the building entrance. For routing to work, at least on floor plan to connect to the venue entrance must be included. This enables your users to be routed from the entrance to a specific room. 

Any floor plans with rooms that are not easily or logically accessible should have connector floor plans included. For example, an event in Ballroom X may only be accessible via a walkway from the third floor. In this case, you would upload the first floor of the building with the building entrance. Then upload the third floor which is accessible from the first floor via an elevator. Finally upload the floor plan for Ballroom X which attendees would reach via the walkway from the third floor. 

  1. Upload the floor graphic that includes the building entrance for each venue
  2. Upload special floor plans (connecting walkways) that are required for successful routing to the final destination



Provide Dimensions*

In order to set up routing, our team needs to know the scale of each graphic. Ask your facilities provider to send you the dimensions for meeting rooms and exhibit halls. 


Do not include room dimensions on the graphic itself. Dimensions are only used as a reference for setting up RouteInside.


Room Dimension Example



Include Orientation*

Display where North is for all graphics, including the expo hall image. 

All floor plans must have the same orientation



Use Lighter Colors

If your floor plans are very colorful, lighten the image to ensure that your users can still easily see the navigation on top of the graphic. 


Image too Dark
Light Colors Better for Routing




* required



FAQ

I have my map image only in PDF format. How do I size it and add it as a floor plan image?

  1. Convert PDF to an image
    1. Open the link https://pdf2png.com
    2. Upload your PDF
    3. Download the converted image
  2. Scale it down if needed to be below 5 million pixels
    1. Determine your image width and height (on most computers, you can right click the image file to see the dimensions. On Mac, you can use Preview > Tools > Resize to see the image width/height).
      Multiply width by height to determine the total pixels, which must be below 5 million. E.g. if your image is 3,000 wide by 1,600 tall, the total pixels are 4.8 million. If your image is 4,000 pixels tall by 5,000 pixels wide, your total number of pixels is 20 million. You must now scale the image to be below the 5 million mark.
      1. Open the downloaded image in any image editor on your computer and scale it down below 5 million pixels (multiply width by height)
      2. Save the scaled image to your computer
  3. Compress the image
    1. Open the link http://tinypng.com
    2. Upload your scaled image
    3. Download the compressed version
  4. Upload the image to the Conference App Builder
    1. Log in to the Conference App Builder 
    2. Open the menu Maps and upload your image 
    3. Remember to give your image a label


Is there a max pixel size when multiplying width and height? 

Yes. The max size is 5 million pixels. Multiply width and height - if over 5 million, resize the image until you are under 5 million.



Are there color limitations or recommendations for map or floor plan images?

Since the animated pin drop is displayed in red, avoid red colors to ensure the red pin drop is nicely visible on your graphic.



Can I have gradients of background graphics? 

Avoid gradients to keep file size as small as possible. Avoid background graphics to keep the actual floor plan map as clean and easy to read for attendees as possible. 



What aspect ratio should the graphic be? 

If you have a long and skinny image, add margins left and right to achieve close to a 3:4 or 4:3 aspect ratio for best results. 

Include:

  • Name of the location (e.g. South Level 5 or Hilton Lobby
  • Thumbnail of the overall building that shows the particular floor highlighted for easier orientation (see example below)

Avoid:

  • unnecessary architectural information such as width/height indications
  • anything that is not meaningful or useful for your attendees to see



I have to change a room location after my maps have been pinned. How do I make sure the room is mapped?

  1. Log into the App Builder > select the Maps menu > select Floor Plans

  2. Select the floor plan that requires the location update. 
    1. If you see a pin in the room already, ensure the room location exactly matches this pin name so the functionality works correctly in the app. 
    2. If the location has not been pinned, click the center of the room or booth that is to be pinned, enter the exact name of the location (e.g. Room 201 or 201 or Booth 201) and press the enter key (return).  When you publish a data update, you will see the location available in the app.



I need to make a small change to my map graphic but the locations have been pinned already?

You can replace your map graphic at any time. As long as the image in the graphic has not changed (other than your small modification), you can simply replace the image and the pins will appear in the same locations. 


If you however scale the image, change the size in any way, etc. so that locations between your old graphic and the new graphic do not exactly overlap, then you must pin all your locations again. 


Tip for making small changes while maintaining scale and existing mapped pins

  1. Download the existing floor plan image from the Conference App Builder > Maps > Floor Plans > select the download button next to the graphic you want to update
  2. Update the downloaded image in any graphic editor with your small change
  3. Save the graphic with a different name - ensure your file size did not increase and that you did not change the dimensions of the image. 
  4. Back in the Conference App Builder, click the pencil icon for the graphic you want to update. Replace the image with the new one you just edited.