Map and compass demonstration.

A map and compass direction can be added to the virtual tour to give the user a sense of spatial awareness. When moving between panoramas the compass will move to the active hotspot to show the user where they are on the map. Users can also navigate by selecting hotshots on a map to go to that location.

panorama.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="panorama.xsl"?>
<config>
<main>
	<pageTitle>Map Demo</pageTitle>
	<theme_enabled>true</theme_enabled>		
	<numConnections>3</numConnections>																
	<retryItem>5</retryItem>																										
	<qualityMotion>low</qualityMotion>										
	<loresFolder>pano/pano_lo</loresFolder>						
	<defaultRes>low</defaultRes>	
	<panoType>spherical</panoType>																		   											
	<sphereSize>5000</sphereSize>													
	<segments>high</segments>															
	<loaderImage>images/loader.png</loaderImage>
	
	<singleFloorMap>true</singleFloorMap>	
	<map>true</map>	
	<mapVisiblity>true</mapVisiblity>		
	<mapImage>images/map.png</mapImage>	
	
</main>
<panorama>
	<frameId>demo_room_1</frameId>
	<sphere>grid.jpg</sphere>	
	<roomTitle>Demo Room 1</roomTitle>
	<startX>0</startX>
	<startY>0</startY>
	<startAuto>0.1</startAuto>
	<startDelay>10</startDelay>
	<zoomMin>1</zoomMin>
	<zoomMax>4</zoomMax>
	<zoomStart>1</zoomStart>
	<zoomSteps>0.1</zoomSteps>
	<stepsKeyboard>75</stepsKeyboard>
	<stepsMouse>60</stepsMouse>
	<friction>0.2</friction>
	<threshold>0.001</threshold>
	
	<mapRoom_btn_PosX>65</mapRoom_btn_PosX>
	<mapRoom_btn_PosY>150</mapRoom_btn_PosY>
	<mapRoomAltTag>Demo room 1</mapRoomAltTag>
	<roomRadarStartAngle>0</roomRadarStartAngle>
	
	<hotspot>
		<hotspotType>Bitmap</hotspotType>		
		<hotspotBitmapOn>arrow_on.png</hotspotBitmapOn>
		<hotspotBitmapOff>arrow.png</hotspotBitmapOff>
		<placementX>2160</placementX>
		<placementY>720</placementY>
		<lookatCamera>true</lookatCamera>
		<sizeWidth>500</sizeWidth>
		<sizeHeight>500</sizeHeight>
		<actionType>room</actionType>
		<actionGoto>demo_room_2</actionGoto>		
		<altTag>Hotspot:bitmap   Action:room</altTag>
		<targetX>90</targetX>
		<targetY>0</targetY>
	</hotspot>
</panorama>
<panorama>
	<frameId>demo_room_2</frameId>
	<sphere>grid2.jpg</sphere>	
	<roomTitle>Demo Room 2</roomTitle>
	<startX>0</startX>
	<startY>0</startY>
	<startAuto>0.1</startAuto>
	<startDelay>10</startDelay>
	<zoomMin>1</zoomMin>
	<zoomMax>4</zoomMax>
	<zoomStart>1</zoomStart>
	<zoomSteps>0.1</zoomSteps>
	<stepsKeyboard>75</stepsKeyboard>
	<stepsMouse>60</stepsMouse>
	<friction>0.2</friction>
	<threshold>0.001</threshold>
	
	<mapRoom_btn_PosX>230</mapRoom_btn_PosX>
	<mapRoom_btn_PosY>50</mapRoom_btn_PosY>
	<mapRoomAltTag>Demo room 2</mapRoomAltTag>
	<roomRadarStartAngle>220</roomRadarStartAngle>
	
	<hotspot>
		<hotspotType>Bitmap</hotspotType>		
		<hotspotBitmapOn>arrow_on.png</hotspotBitmapOn>
		<hotspotBitmapOff>arrow.png</hotspotBitmapOff>
		<placementX>2160</placementX>
		<placementY>720</placementY>
		<lookatCamera>true</lookatCamera>
		<sizeWidth>500</sizeWidth>
		<sizeHeight>500</sizeHeight>
		<actionType>room</actionType>
		<actionGoto>demo_room_1</actionGoto>		
		<altTag>Hotspot:bitmap   Action:room</altTag>
		<targetX>180</targetX>
		<targetY>0</targetY>
	</hotspot>
</panorama>
</config>

config.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<config>
<themeDir>themes/demo</themeDir>
</config>

theme.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<config>
<theme>
	<canvasWidth>700</canvasWidth>						
	<canvasHeight>513</canvasHeight>					
	<tourWindowWidth>700</tourWindowWidth>		
	<tourWindowHeight>513</tourWindowHeight>	
	<tourWindow_PosX>0</tourWindow_PosX>		
	<tourWindow_PosY>0</tourWindow_PosY>
	<cameraFocus>300</cameraFocus>	
	
	<loadingTxt>Loading</loadingTxt>					
	<mainLoader_PosX>200</mainLoader_PosX>
	<mainLoader_PosY>250</mainLoader_PosY>
	<loader_PosX>200</loader_PosX>
	<loader_PosY>250</loader_PosY>
	
	
	
	<altTagFontName>Verdana</altTagFontName>
	<altTagFontSize>11</altTagFontSize>
	<altTagFontColour>0xFFFFFF</altTagFontColour>
	<altTagFontBold>false</altTagFontBold>
	<altTagBackground>true</altTagBackground>
	<altTagBackgroundColor>0x462c64</altTagBackgroundColor>
	<altTagHeight>5</altTagHeight>
	
	<panoTransitionType>random</panoTransitionType>
	<panoTransitionColour>0x333333</panoTransitionColour> 
	<panoTransitionEffect>all</panoTransitionEffect> 	
	<panoTransitionBlurEffect_percentage>30</panoTransitionBlurEffect_percentage>
	<transitionDuration>1</transitionDuration>
	
	<mapImage_PosX>400</mapImage_PosX>											
	<mapImage_PosY>10</mapImage_PosY>	
	<activeMapHotspotColour>0x00FFFF</activeMapHotspotColour>
	<activeMapHotspotOpacity>1</activeMapHotspotOpacity>  					
	<activeMapHotspotRadius>5</activeMapHotspotRadius>
	<mapHotspotColour>0xFF00FF</mapHotspotColour>
	<mapHotspotOpacity>1</mapHotspotOpacity> 												
	<mapHotspotRadius>5</mapHotspotRadius>
	
</theme>
</config>