Example : Open photo

Example : Open photo

This example assumes you have successfully embedded the component and validated the license.

Opening the startup location

You can open the startup location by using the applyStartupParameters() function.

client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
    function(e)
    {
        client.applyStartupParameters();
    });

Opening a photo

You can open a photo by using one of the Panorama.openPhotoXXX() functions :

openPhoto : Load a photo by instance.
openPhotoByID : Load the photo with the given ID.
openPhotoByXY : Load the photo closest to a given location.
openPhotoByLatLon : Load the photo closest to a given wgs84 coordinate.

Open mode

These functions all have an openMode argument that can be used to add a viewer or replace the photo in an existing viewer. The default value of this parameter is to 'add' a viewer.

add : Open photo by opening a new viewer.
replace : Open photo by replacing the opened photo in an existing viewer if possible (else add a new viewer).

client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
    function(e)
    {
        /* Open a photo by replacing the photo in an existing viewer if possible. */
        client.getPanorama().openPhotoAtXY(x,y,crs,null/*options*/,"replace");
    });

Options

When opening a new panorama viewer using the Panorama.openPhotoXXX() or PanoramaViewer.loadPhotoXXX() functions, you can pass an argument with extra options.

Panorama loading options

Explicit viewer angles

pan : The pan angle or heading.
tilt : The tilt angle.
fov : The horizontal field-of-view.

After the photo has been found and loaded, the options above will let you specify viewing angle values to apply. Only the options that are specified will be applied.

client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
    function(e)
    {
        /* Open with pan set to 33° */
        client.getPanorama().openViewerAtXY(x,y,crs,{pan:33});
        /* Open with pan set to 180° and tilt looking up 20° */
        client.getPanorama().openViewerAtXY(x,y,crs,{pan:180,tilt:20});
    });

Looking at a coordinate

lookAt : Enables looking at a coordinate after the photo has been loaded.
lookAtCoordinate : A coordinate to look at.
lookAtCoordinateCRS : The CRS of the coordinate to look at.

After the photo has been found and loaded, the options above will let you specify that the viewer should be looking in the direction of a coordinate. You can also specify an explicit coordinate by using the lookAtCoordinate setting. If you don't specify a coordinate that way, the viewer will look in the direction of the coordinate that was used to open the viewer. If no coordinate was used (for example when a photo object was used) nothing will happen.

client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
    function(e)
    {
        /* Open a photo and look at the specified coordinates. */
        client.getPanorama().openPhotoAtXY(x,y,crs,{lookAt:true});
        /* Open a photo and look at the specified coordinate (100,200). */
        client.getPanorama().openPhotoAtXY(x,y,crs,{lookAt:true,lookAtCoordinate:{x:100,y:200}});
    });

Complete Example

<html title="My Publication">
 <head>
  <script type="text/javascript" src="<server>/api/<version>/webclient_api.js"></script>
  <script type="text/javascript">
 
    var client;
 
    function addClient()
    {
        // Create the client.
        client = new orbit.webclient.Client(document.getElementById('clientElement'));
        client.addEventListener(orbit.webclient.ClientEvent.READY,
            function()
            {
                // Check license.
                client.setDeveloperId(<DeveloperID>);
                client.setProductId(<ProductID>);
                client.checkLicense();
            });        
 
        client.addEventListener(orbit.webclient.LicenseEvent.GRANTED,
            function(e)
            { 
                client.setServer("http://publisher.orbitgt.com/service");
                client.setCredentials("dev","dev");
                client.loadPublication("dev.publication");
            });
 
        client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
            function(e)
            {
                client.getPanorama().openPhotoAtXY(133860,206211,"31370",{pan:180,tilt:20},"replace"); 
            });
    }
 
  </script>
 </head>
 <body onload="addClient()">
  <div id="clientElement"/>
 </body>
</html>

Result

Please open the JavaScript Console of your browser to see debug messages.

Table of Contents