Table of Contents

Example : Search Panorama Photos

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

Steps to take :

  1. Wait for the publication to load.
  2. Search for panorama photos inside a boundingbox.
  3. Search for panorama photos close to a location.
  4. Open a panorama photo.

1. Wait for the publication to load.

Before we can start retrieving panorama photo's we must first wait for the publication to be loaded.

The example below shows how to wait for a publication to load succesfully. Note that we use the second argument of the loadPublication() to prevent the initial panorama viewer from being opened. 

client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
    function(e)
    {
        console.log("Publication is loaded.");
    });

2. Search for panorama photos inside a boundingbox.

The example below shows how to search for photo positions using a geometrical bounding-box. The searchPhotoPositions() method takes 5 arguments :

Photo positions are returned in the Publication CRS or in a custom CRS if one was set using the setCRS() function. 

client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
    function(e)
    {
	client.getPanorama().searchPhotoPositions(133810,206161,133860,206211,"31370",
            function (result)
            {
                console.log("Found photo positions: ", result);
                client.getPanorama().openViewer(result[0]);
            },
            function(fault)
            {
            });  
    });

3. Search for panorama photos around a position

The example below shows how to search for photo positions close to a specific position. The searchPhotoPositionsAround() method takes 4 arguments :

Photo positions are returned in the Publication CRS or in a custom CRS if one was set using the setCRS() function.

Photo positions are sorted on distance, with the first photo being the closest to the provided coordinate. 

client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
    function(e)
    {
	client.getPanorama().searchPhotoPositionsAround(133810,206161,"31370",30,
            function (result)
            {
                console.log("Found photo positions: ", result);
                client.getPanorama().openViewer(result[0]);
            },
            function(fault)
            {
            });  
    });

4. Open a panorama photo.

The returned panorama photo objects can be used directly to open a photo : 

client.getPanorama().openViewer(result[0]);

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()
    {
          client.addEventListener(orbit.webclient.ClientEvent.GRANTED,
            function(e)
            {
                client.setServer("http://developer.orbitgis.com/service");
                client.setCredentials("dev","dev");
                client.loadPublication("Sint-Niklaas_31370",false);
            });
 
            client.addEventListener(orbit.webclient.LoadPublicationEvent.SUCCESS,
                function(e)
                {
                    client.getPanorama().searchPhotoPositions(133810,206161,133860,206211,"31370",
                        function (result)
                        {
                            console.log("Nearby photo positions: ", result);
                            client.getPanorama().openPhoto(result[0]);
                        },
                        function(fault)
                        {
                        });     
                });
            });
    }
 
  </script>
 </head>
 <body onload="addClient()">
  <div id="clientElement"/>
 </body>
</html>

Result

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