How to build a 2D/3D seat map from static images

Required tools/devices:

• Camera/drone to take photos of your venue
• Image editing tools: Adobe Illustrator is highly recommended
• Notepad++

Details:

Step 1 : Decide how many polygons in your seat map

A 3D seat map in SecuTix can be divided into different polygons.

It is recommended to map a block with a polygon.

In this guide, the sample seat map has 1 area with 3 blocks, there are various options of mapping:

• one unique polygon for the whole area
• 3 polygons for 3 blocks
• 1 polygon for 1 block (so 2 other blocks are not sold online)
• 2 polygons for 2 blocks –> we go with this option

Step 2 : Take photos of your venue

Depending on the decision in step 1, you will know how many images are needed, basically:

• 1 main image showing where each polygon is → this will be used for top view SVG

• [optional] 1 image for each polygon, showing clearly where each seat is → this is used for seat view SVG

Arrange to go to the a venue and take pictures from a high stand-point (like the ceiling), or arrange for a professional photographer to do such a thing. Be aware that lighting is often reduced in such places, and may not create the best of ambiences in the venue. Hint: using a drone might allow to create a unique rendering in opera-type places.

Here is the image used in this guideline (1 image for both top view and block SVG):

Step 3 : generate SVG Files from your static images

Use a vector graphic editor, Adobe Illustrator is a great one, to build your SVG files. Pay attention to layer name.

In any cases, the scale of image must be 1380 x 1000 (width x height).

Avoid using '-' in the polygon name.

3a - Top view SVG

The image must have layers strictly named (case sensitive) and ordered as below:

• 'venue-preview' layer: this layer is optional, it can be a copy of 'venue' layer
• 'full' layer: this is a copy of 'normal' layer, polygon is renamed with suffix '-full'. P1 → P1-full, P2 → P2-full.

This layer is visible when there is no available seat in polygon.

• 'hover' layer: This is a copy of 'normal' layer, polygon is renamed with suffix '-hover'. P1 → P1-hover, P2 → P2-hover.

This layer is visible when you hover the mouse on a polygon with available seats.

• 'normal' layer: draw your polygons in this layer.

Each polygon must be named starting with letter 'P'. For example P1, P2,...

This layer is visible in the seat map by default if polygon has available seats.

• 'venue' layer: width="1380" height="1000", contains the background for venue (static image) 

'normal','hover' and 'full' layers should have opacity < 1 (0.7 ~ 0.8 is recommended) so that the background is always visible. 

3b - Seat view SVG (optional)

Each block SVG must have 2 layers strictly named (case sensitive) and ordered as below:

• 'svg-seats': draw your seats in this layer, each seat must be named following this format "S_[areaCode/blockCode]_[rowNum]_[seatNum]
• 'venue' layer: width="1380" height="1000", contains the background for venue (static image)

Example: block A, seat 10, row 1 → seat id = "S_A_1_10"

Step 4 : Modify SVG files to add different properties

Use an editor tool (Notepad++ ) to modify the SVG files generated in step 3.

4a - Top view SVG:

• Remove title (if any)

• Change fill color if needed. It is recommended to have different color for each layer normal/hover/full so contact can easily see the availability in ticket shop
• Change href of background image for 'venue' layer – it'd be better to use an URL rather than embeding the image in SVG

<g id="venue">
    <image id="Image" width="1380" height="1000" transform="scale(1 1)" xlink:href="http://s3.eu-central-1.amazonaws.com/content-secutix-com/DEMO/img/Seating-sample.jpg"/>
</g>

4b - Seat view SVG (optional)

• Remove title (if any)
• Change href of background image for 'venue' layer – it'd be better to use an URL rather than embeding the image in SVG

<g id="venue">
    <image id="Image" width="1380" height="1000" transform="scale(1 1)" xlink:href="http://s3.eu-central-1.amazonaws.com/content-secutix-com/DEMO/img/Seating-sample.jpg"/>
</g>

• Add style for seat: replace the current style tag with following lines of code and set color at your choice:

<style type="text/css">
	<![CDATA[
	#svg-seats * {
		opacity:0.8;fill:#38ff00;
	}
	#svg-seats [status="visible"] {
		display:inline;opacity:0.8;fill:#09ff00;
	} 
	#svg-seats [status="hovered"] {
		display:inline;opacity:0.65;fill:#006B33;
	}
	#svg-seats [status="selected"] {
		display:inline;opacity:0.8;fill:#392854;
	} 
	]]>
</style>

• Add rule for seatLocator - this is actually the naming format used in step 3b : insert following parameter to 'svg-seats' layer (remember to replace areaCode or blockCode in the chosen format with real value)

seatLocator="#S_A_[rowNum]_[seatNum]"

<g id="svg-seats" seatLocator="#S_A_[rowNum]_[seatNum]">
  <circle id="S_A_A_1"  cx="637.45" cy="877.79" r="23.11"/>
  <circle id="S_A_A_3"  cx="566.85" cy="877.79" r="23.11"/>
....
</g>

Sample SVG files after modification: 

Top view SVG 

Seat view SVG - Polygon P1

Step 5 : apply SVG files to logical configuration

• Open Organization > Venue > Logical Configuration > Visualization, insert top view SVG file to 'Venue visual'. Once saved, the list of polygon will be populated under 'Venue polygons' section.
• [Optional] Open each line in the generated list of polygons, map a polygon with an area/block as you defined in step 1. Use the seat view SVG for 'Block view image'. If this step is skipped, the system will fallback to displaying the seat detail view of the default seat map.

To test this visualization, use this logical configuration for a performance (remember to set seat selection mode = Choice on seat map), sell this performance in ticket shop.

Here is the result of sample seat map used in this guideline: https://thecube-l-cube.demo-shop.secutix.com/selection/event/seat?perfId=10228303122147&productId=466507546