Overview

 Date created: 2010-08-02
 Date updated: 2011-09-29
 Latest version: 2.2.7
 2.2.7 : added public method "getLayoutId" to retrieve the current fanvenues layout ID.
 2.2.6 : updated logical bug in price filtering within sections on mouseout event.
 2.2.5 : added public function "getOriginalSectionNamesFor". Returns all original section names for a specific section.
 2.2.4 : resolved logical bug in price filtering within sections.
 		 prevent filtered out sections from being selected.
 2.2.3 : resolved price filtering bug where sections filtered became unfiltered after a mouseout event.
 		 changed use of 'for..in' to standard for-loop to loop through arrays.
 2.2.2 : resolved bug in IE9 ajax requests preventing calls to fanvenues server because of missing 'onprogress' function.
 2.2.1 : added bind event 'fvmapReady' - triggered when the map is loaded and ready to use.
 		 updated online documentation api.
 2.2.0 : worked out some browser compatibilities issues. now opens fine in Firefox 3.5 and above.
 2.1.9 : solved bug in IE9 ajax requests that is not consistent with XMLHttpRequest
 2.1.8 : change jsonp requests to post requests for quicker data transfer especially with extremely large ticket lists.
 2.1.7 : resolved bug - clear all previous event bindings before attaching new ones
 2.1.6 : changed spic and lpic to pic. Original image size is 1400x752. To get a resized image, append argument 'size=x'.
 2.1.5 : improved 3D views (better quality) for Fanvenues v2.1.5 and above.
 2.1.4 : fanvenues now using new tile server fanvenues3.
 2.1.3 : removed the 'arrow button' which appeared when action buttons (fullscreen, reset and print) are enabled.
 2.1.2 : added 'scrollWheelZoom' to options. Default set to 'false' to avoid zooming in and out with mouse scrollwheel.
		 added public methods 'getLargeImage', 'getSmallImage' and 'getAllSections'.
		 disabled right-clicking on the ticket row.
		 removed bind event 'fvmapSectionClick'.
		 added bind event 'fvmapSectionDeselect' (triggered when a section is deselected) and 'fvmapSectionSelect' (triggered when a section is selected).
 2.1.1 : changed 'rowsSelector' to 'rowSelector'.
         changed id 'priceSliderAmount' to class.
		 added private method for loading priceFilter.
		 changed priceFilterContainer from ul to div.
 2.1.0 : Added jQuery section and row selectors as options (removed the old way of interacting with ticket list).
		 Added public method wrappers for focusSection, blurSection, clickSection.
		 Changed all event names to camel-case: fvmapSectionBlur, fvmapSectionSelect, fvmapSectionDeselect, 
		 										fvmapSectionFocus, fvmapNotAvailable
		 Added ul elements as parents of li elements.
		 Removed 'fvmsg' div.
		 Changed price slider id to class.
		 Standardized class names for price slider.
		 Now passing current version to Fanvenues server for appropriate response.
 2.0.5 : added new bind event: 'fvmap-section-blur' for when mouse moves out of a section
 2.0.4 : convert ticket price to string
 2.0.3 : set streetViewControl to false
 2.0.2 : added new bind events: 'fvmap-section-selected', 'fvmap-section-deselect', 'fvmap-section-hover'
 2.0.1 : changed bind event from 'enlarge-image' to 'fvmap-enlarge-image'.
 2.0.0 : Fanvenues released.
				

$('#fvmap').fanvenues({
	mapSet:'fv',
	mapId:'1004',                                                                                           
	interactWithTicketList: false,                                                                                  
	ticketList:{                                                                                                    
		'items':[                                                                                           
			{id:'1231',section:'201',row:'10',price:'110.00',notes:'n/a'},  
			{id:'1232',section:'201',row:'12',price:'24.00',notes:'n/a'},   
			{id:'1233',section:'CL 202',row:'4',price:'150.00',notes:'n/a'},
			{id:'1234',section:'117',row:'4',price:'210.00',notes:'n/a'},   
			{id:'1235',section:'223',row:'4',price:'110.00',notes:'n/a'},   
			{id:'1236',section:'316',row:'4',price:'115.00',notes:'n/a'},   
			{id:'1237',section:'107',row:'4',price:'300.00',notes:'n/a'},   
			{id:'1238',section:'101',row:'4',price:'320.00',notes:'n/a'},   
			{id:'1239',section:'213',row:'4',price:'80.00',notes:'n/a'},    
			{id:'1240',section:'307',row:'4',price:'100.00',notes:'n/a'},   
			{id:'1241',section:'318',row:'4',price:'130.00',notes:'n/a'},   
			{id:'1242',section:'112',row:'4',price:'510.00',notes:'n/a'},   
			{id:'1243',section:'203',row:'4',price:'110.00',notes:'n/a'}	
		]                                                                                                           
	}                                                                                                               
})                                                                                                                  
.bind('fvmapReady', function() {                                                                   
	// fvmap is now loaded and ready to use                                                  
})                                                                                                                  
.bind('fvmapNotAvailable', function() {                                                                   
	$(this).replaceWith('Sorry! Map could not be found.');                                                  
})                                                                                                                  
.bind('fvmapEnlargeImage', function(obj, url, section) {
	// display large image section view                                                   
	$.slimbox(url, section, {overlayOpacity: 0.5})
})
.bind('fvmapSectionFocus', function(obj, smallImageUrl, section) {
	// display thumbnail section view
	$('#thumbnail')
		.html('<img src="'+smallImageUrl+'" />');
})
.bind('fvmapSectionBlur', function(obj, smallImageUrl, section) {
	// perform action when section loses focus (mouse out)
	// thumbnail image url and section name are passed in
})
.bind('fvmapSectionSelect', function(obj, smallImageUrl, section) {
	// perform action on section select
	// thumbnail image url and section name are passed in
})
.bind('fvmapSectionDeselect', function(obj, smallImageUrl, section) {
	// perform action on section deselect
	// thumbnail image url and section name are passed in
});

                                                                                                               
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/slimbox2.css" type="text/css" />
<link rel="stylesheet" href="styles/ui-lightness/jquery-ui-1.8.4.custom.css" type="text/css" />
<link rel="stylesheet" href="styles/fanvenues.css" type="text/css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/jquery.fanvenues.min.js"></script>
<script>
	$(document).ready(function() {
	 	$('#fvmap').fanvenues({
	 		mapSet:'fv',
	 		mapId:'1004',
	 		zoomMapButton: true,
	 		fullscreenMapButton: true,	
	 		resetMapButton: true,
	 		printMapButton: true,
	 		priceFilter: true,
	 		interactWithTicketList: false,
	 		ticketList:{
	 			'items':[
	 				{id:'1231',section:'201',row:'10',price:'110.00',notes:'n/a'},
	 				{id:'1232',section:'201',row:'12',price:'24.00',notes:'n/a'},
	 				{id:'1233',section:'CL 202',row:'4',price:'150.00',notes:'n/a'},
	 				{id:'1234',section:'117',row:'4',price:'210.00',notes:'n/a'},
	 				{id:'1235',section:'223',row:'4',price:'110.00',notes:'n/a'},
	 				{id:'1236',section:'316',row:'4',price:'115.00',notes:'n/a'},
	 				{id:'1237',section:'107',row:'4',price:'300.00',notes:'n/a'},
	 				{id:'1238',section:'101',row:'4',price:'320.00',notes:'n/a'},
	 				{id:'1239',section:'213',row:'4',price:'80.00',notes:'n/a'},
	 				{id:'1240',section:'307',row:'4',price:'100.00',notes:'n/a'},
	 				{id:'1241',section:'318',row:'4',price:'130.00',notes:'n/a'},
	 				{id:'1242',section:'112',row:'4',price:'510.00',notes:'n/a'},
	 				{id:'1243',section:'203',row:'4',price:'110.00',notes:'n/a'}					
	 			]
	 		}
	 	})
		.bind('fvmapReady', function() {                                                                   
			// fvmap is now loaded and ready to use                                                  
		})     
	 	.bind('fvmapNotAvailable', function() {
			$(this).replaceWith('Sorry! Map could not be found.');
	 	})
	 	.bind('fvmapEnlargeImage', function(obj, url, section) {
			$.slimbox(url, section, {overlayOpacity: 0.5});
	 	})
		.bind('fvmapSectionFocus', function(obj, smallImageUrl, section) {
			// display thumbnail section view
			$('#thumbnail')
				.html('<img src="'+smallImageUrl+'" />');
		})
		.bind('fvmapSectionBlur', function(obj, smallImageUrl, section) {
			// perform action when section loses focus (mouse out)
			// thumbnail image url and section name are passed in
		})		
		.bind('fvmapSectionSelect', function(obj, smallImageUrl, section) {
			// perform action on section select
			// thumbnail image url and section name are passed in
		})
		.bind('fvmapSectionDeselect', function(obj, smallImageUrl, section) {
			// perform action on section deselect
			// thumbnail image url and section name are passed in
		});
	});
</script>
</head>
<body>
<div id="fvmap"></div>
</body>
</html>

Options

• defaultZoom

  Type:

  Number

  Default:

  2

  Sets the original zoom level for the current map. Zoom level ranges from 1 (closest) to 3 (furthest).

  Code examples

  Initialize a map with the defaultZoom option specified.

  $( "#map-selector" ).fanvenues({ defaultZoom: 2 });
  		

• height

  Type:

  Number, String

  Default:

  500

  Sets the original height of the map (default is 500 px). CSS styling (see below) however takes priority over this value. It will also accept a string value of the format '500px'.

  Code examples

  Initialize a map with the height option specified.

  $( "#map-selector" ).fanvenues({ height: 500 });
  		

• width

  Type:

  Number, String

  Default:

  500

  Sets the original width of the map (default is 500 px). CSS styling (see below) however takes priority over this value. It will also accept a string value of the format '500px'.

  Code examples

  Initialize a map with the width option specified.

  $( "#map-selector" ).fanvenues({ width: 500 });
  			

• mapSet

  Type:

  String

  Default:

  'fv'

  The mapSet refers to the exchange code being used by the broker. This is a necessary option as exchange map IDs are converted to Fanvenues map IDs to retrieve the appropriate map.

  'fv' = 'Fanvenues map IDs',
  'ei' = 'EventInventory map IDs',
  'tn1' = 'TicketNetwork XML map IDs',
  'tt' = 'TicketTechnology map IDs'

  Code examples

  Initialize a map with the mapSet option specified.

  $( "#map-selector" ).fanvenues({ mapSet: 'ei' });
  							

• mapId

  Type:

  String

  Default:

  '1004'

  This option determines the map to be displayed based on its unique ID.

  For mapSet 'fv', mapId is '<fv map ID>'.
  For mapSet 'ei', mapId is '<ei venue ID>,<ei event ID>'.
  For mapSet 'tn1', mapId is '<tn map ID>,<tn event name>'.

  Code examples

  Initialize a map with the mapId option specified.

  $( "#map-selector" ).fanvenues({ mapId: '1004' });
  		

• ticketList

  Type:

  Object

  Default:

  null

  The list of tickets in JSON format. The ticketList object holds an 'items' array containing the list of tickets. Each ticket object has an 'id', a 'section', a 'row', a 'price' and some 'notes' if available.

  Code examples

  Initialize a map with the ticketList option specified.

  $( "#map-selector" ).fanvenues({ ticketList:{
  		'items': [
  			{id:'1241',section:'318',row:'4',price:'130.00',notes:'n/a'},
  			{id:'1242',section:'112',row:'4',price:'510.00',notes:'n/a'},
  			{id:'1243',section:'203',row:'4',price:'110.00',notes:'n/a'}
  		]}
  });
  							

• rowSelector

  Type:

  String

  Default:

  null

  This option specifies a jQuery selector string to select all rows within the ticket list.

  Code examples

  Initialize a map with the rowSelector option specified.

  $( "#map-selector" ).fanvenues({ rowSelector: '#tixlist div.tixlist-row' });
  		

• sectionSelector

  Type:

  String

  Default:

  null

  This option specifies a jQuery selector string to select all section names within the ticket list.

  Code examples

  Initialize a map with the sectionSelector option specified.

  $( "#map-selector" ).fanvenues({ sectionSelector: '.psection' });
  		

• rowsToHideOnFilterSelector

  Type:

  String

  Default:

  null

  This option specifies a jQuery selector string to select certain rows to be hidden (for e.g. table header rows) whenever ticket filtering occurs.

  Code examples

  Initialize a map with the rowsToHideOnFilterSelector option specified.

  $( "#map-selector" ).fanvenues({ rowsToHideOnFilterSelector: '#tixlist .pHeader' });
  		

• ssize

  Type:

  String

  Default:

  '175x94'

  Sets the size of the thumbnail image.

  Code examples

  Initialize a map with the ssize option specified.

  $( "#map-selector" ).fanvenues({ ssize : '175x94' });
  		

• lsize

  Type:

  String

  Default:

  '745x400'

  Sets the size of the large image.

  Code examples

  Initialize a map with the lsize option specified.

  $( "#map-selector" ).fanvenues({ lsize: '745x400' });
  		

• zoomMapButton

  Type:

  Boolean

  Default:

  true

  Sets the visibility of the zoom control buttons at the top left corner of the map. This button controls the zoom level of the map.

  Code examples

  Initialize a map with the zoomMapButton option specified.

  $( "#map-selector" ).fanvenues({ zoomMapButton: true });
  		

• fullscreenMapButton

  Type:

  Boolean

  Default:

  true

  Sets the visibility of the fullscreen / restore control button at the top right corner of the map. This button allows the map to be viewed in full screen.

  Code examples

  Initialize a map with the fullscreenMapButton option specified.

  $( "#map-selector" ).fanvenues({ fullscreenMapButton: true });
  		

• resetMapButton

  Type:

  Boolean

  Default:

  true

  Sets the visibility of the reset map control button at the top right corner of the map. This button centers the map and resets it to its original state (deselects any selected section if any).

  Code examples

  Initialize a map with the resetMapButton option specified.

  $( "#map-selector" ).fanvenues({ resetMapButton: true });
  		

• printMapButton

  Type:

  Boolean

  Default:

  true

  Sets the visibility of the print map control button at the top right corner of the map. This button allows the map to be printed out.

  Code examples

  Initialize a map with the printMapButton option specified.

  $( "#map-selector" ).fanvenues({ printMapButton: true });
  		

• priceFilter

  Type:

  Boolean

  Default:

  true

  Sets the visibility of the price filter control at the bottom of the map. This control allows sections to be filtered based on the price range.

  Code examples

  Initialize a map with the priceFilter option specified.

  $( "#map-selector" ).fanvenues({ priceFilter: true });
  		

• interactWithTicketList

  Type:

  Boolean

  Default:

  true

  Determines whether interactivity between the ticket list and the map is on or off. If set to true, ticketListStyle, ticketListId, ticketListRowClassName and sectionClassName need to be specified.

  Code examples

  Initialize a map with the interactWithTicketList option specified.

  $( "#map-selector" ).fanvenues({ interactWithTicketList: true });
  		

• custom3d

  Type:

  String

  Default:

  'fanvenues'

  If you requested customized 3D images with your own logo in them, change this value to one provided to you by Fanvenues team or leave the default value to 'fanvenues' for default 3D images to load.

  Code examples

  Initialize a map with the custom3d option specified.

  $( "#map-selector" ).fanvenues({ custom3d: true });
  		

Events

• fvmapReady

  This event is triggered when Fanvenues map is fully loaded and ready for use.

  Code examples

  Bind the fvmapReady event to handle the case when Fanvenues map is fully loaded and ready to be used.

  $( "#map-selector" ).bind('fvmapReady', function() {
  	$(this).replaceWith('Sorry! Map could not be found.');
  });

• fvmapNotAvailable

  This event is triggered when Fanvenues map is not available.

  Code examples

  Bind the fvmapNotAvailable event to handle the case when Fanvenues map is not available. Return the appropriate static map if necessary.

  $( "#map-selector" ).bind('fvmapNotAvailable', function() {
  	$(this).replaceWith('Sorry! Map could not be found.');
  });

• fvmapEnlargeImage

  This event is triggered when the user right-clicks on a section (on map or ticket list).

  Code examples

  Bind the fvmapEnlargeImage event to handle the case when user right-clicks on a section. Returns the url of the large image and the name of the section. (fyi: Fanvenues uses slimbox2 to load the larger image with a nice overlay effect).

  $( "#map-selector" ).bind('fvmapEnlargeImage', function(obj, url, section) {
  	$.slimbox(url, section, {overlayOpacity: 0.5});
  });

• fvmapSectionFocus

  This event is triggered whenever the cursor is hovered over a section (on map or ticket list).

  Code examples

  Bind the fvmapSectionFocus event to handle the case when the cursor hovers over a section. Returns the url of the thumbnail image and the name of the section.

  $( "#map-selector" ).bind('fvmapSectionFocus', function(obj, url, section) {
  	// perform action with thumbnail image
  });

• fvmapSectionBlur

  This event is triggered whenever the cursor moves out from a section.

  Code examples

  Bind the fvmapSectionBlur event to handle the case when the cursor moves out from a section. Returns the url of the thumbnail image and the name of the section.

  $( "#map-selector" ).bind('fvmapSectionBlur', function(obj, url, section) {
  	// perform action with thumbnail image
  });

• fvmapSectionSelect

  This event is triggered whenever a section is selected. A section becomes selected when user clicks on an unselected section on the map.

  Code examples

  Bind the fvmapSectionSelect event to handle the case when a section gets selected. Returns the url of the thumbnail image and the name of the section selected. If 'interactWithTicketList' is true, it also returns a list of tickets in this section from the ticket listing.

  $( "#map-selector" ).bind('fvmapSectionSelect', function(obj, url, section, *[tickets]) {
  	// perform action with thumbnail image
  	// this event can be used to allow user to compare views
  });

• fvmapSectionDeselect

  This event is triggered whenever a section is deselected. A section becomes deselected when user clicks on a selected section on the map.

  Code examples

  Bind the fvmapSectionDeselect event to handle the case when a section gets deselected. Returns the url of the thumbnail image and the name of the section.

  $( "#map-selector" ).bind('fvmapSectionDeselect', function(obj, url, section) {
  	// perform action with thumbnail image
  	// this event can be used to allow user to compare views
  });

Methods

• setZoom

  Signature:

  $( "#map-selector" ).fanvenues.setZoom( value )

  Sets the zoom level for the selected map. Zoom levels range from 1 (closest) to 3 (furthest).

• filter

  Signature:

  $( "#map-selector" ).fanvenues.filter( min-value, max-value )

  Filters the map to show only sections having tickets within the filtered price range.

• focusSection

  Signature:

  $( "#map-selector" ).fanvenues.focusSection( sectionName )

  Sets focus on desired section.

• blurSection

  Signature:

  $( "#map-selector" ).fanvenues.blurSection( sectionName )

  Removes focus from desired section.

• clickSection

  Signature:

  $( "#map-selector" ).fanvenues.clickSection( sectionName )

  Selects or deselects desired section.

• getLargeImage

  Signature:

  $( "#map-selector" ).fanvenues.getLargeImage( sectionName )

  Returns the url to the enlarged image section view (large size should be set by option value 'lsize').

• getSmallImage

  Signature:

  $( "#map-selector" ).fanvenues.getSmallImage( sectionName )

  Returns the url to the thumbnail image section view (thumbnail size should be set by option value 'ssize').

• getOriginalSectionNamesFor

  Signature:

  $( "#map-selector" ).fanvenues.getOriginalSectionNamesFor( sectionName )

  Returns a list of original section names for specific Fanvenues section passed as parameter.

• getAllSections

  Signature:

  $( "#map-selector" ).fanvenues.getAllSections()

  Returns an array of all available sections.

Theming

The jQuery Fanvenues plugin uses a combination of CSS and the jQuery UI CSS Framework to style its look and feel, including colors and background textures of the controls. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. Just include the jQuery UI css template in your html markup for styling to take effect.

Additionally, the following sample markup gives an example of how Fanvenues map can be styled:

	
/* map styling */
#fvmap { height:500px; width:500px; }

/* section styling */
#fvmap .section.focus { display: none; color: #cc3300; opacity:0.5; filter:alpha(opacity=50);	/* opacity for IE */ }
#fvmap .section.available { display:none; color: #ff9900; opacity:0.25; filter:alpha(opacity=25);	/* opacity for IE */ }
#fvmap .section.selected { display:none; color: #006699; opacity:0.50; filter:alpha(opacity=50);	/* opacity for IE */ }

/* map buttons styling */
#fvmap .zoomList { padding:10px; }
#fvmap .actionList { padding:10px; }
#fvmap .zoomList li { list-style:none; padding:3px; margin-bottom:2px; font-size:10px; font-family:Arial,sans-serif; text-align:center;}
#fvmap .actionList li { list-style:none; padding:3px; margin-bottom:2px; font-size:10px; font-family:Arial,sans-serif; text-align:center;}
#fvmap .zoomList li:hover { cursor:pointer; cursor:hand; }
#fvmap .actionList li:hover { cursor:pointer; cursor:hand; }

/* map price slider styling */
#fvmap .priceFilter { padding-bottom:10px; padding-left:25px; width:180px; height:10px; }
#fvmap .priceFilter p { font-family:Arial,sans-serif; font-size:10px; padding:0; margin:0; }
#fvmap .priceSlider{ width:150px; height:5px; }
#fvmap .priceSliderAmount { font-size:10px; width:80px; border:0; color:#f6931f; font-weight:bold; }

/* ticket list styling (DIV-based ticket list)*/
#tixlist div.active { color:#ffffff; background-color: #d5896a; }
#tixlist div.active:hover { cursor:pointer; cursor:hand; }

/* ticket list styling (TABLE-based ticket list)*/
#ticket-list tr td.active { background-color: #D6896C; }
#ticket-list tr td.selected { background-color: #D6896C; }	
	

Download

Fanvenues jQuery plugin v2.2.7 (compressed - 14Kb): download

Note: In order for Fanvenues map to load properly, we need to approve your domain name beforehand. Please send us a request and we'll let you know once you are able to use the plugin.