Below is a small example to get you started. For a more in depth example, go to : https://www.cyclomedia.com

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.1.0/ol.js"></script>
<script type="text/javascript" src="http://streetsmart.cyclomedia.com/api/v17.1/StreetSmartApi.js"></script>
<script>
   // Here you can now call StreetSmartApi.init(), StreetSmartApi.addPanoramaViewer(),
   // or use event contents like this: StreetSmartApi.Events.panoramaViewer.RECORDING_LOADED
</script>

Provides a common base class to use for internationalized components. Wraps the component using injectIntl.

ObliqueViewer component. Do not create this component directly; use the open function.

Extends IntlComponent

PanoramaViewer component. Do not create this component directly; use the open function.

Extends IntlComponent

//Having StreetSmartApi intialized:
let viewer = streetSmartApi.addPanoramaViewer(viewerDomElement);
// Now open the address]
viewer.openByAddress("Van Voordenpark 1B, Zaltbommel", "EPSG:29882").catch(function(err){ console.log(err.message)});

Adds a PanoramaViewer to a specified DOM-element.

Add a panoramaViewer to a DOM element.

<div id="panoramaTarget"/>

// Add a PanoramaViewer to the above div. Set variable as reference.
let panoramaViewer = StreetSmartApi.addPanoramaViewer(document.getElementById('panoramaTarget'), panoramaViewerId);

Destroys panorama viewer

Returns the object containing the address search settings.

Returns the current 'ready'-state of the API.

Returns the application name of the API.

Returns the used version of the API.

Returns all logs, including ones invisible to integrators.

Returns the object containing functionalities that are currently permitted to use by the user.

Initializes the API using the inserted values. Required to use functional viewers.

Initializing a StreetSmartApi.

<script type="text/javascript" src="src/StreetSamrtApi.js"></script>

// Set variables for initialization.
let options = {
     targetElement: document.getElementById('streetsmartApi'),
     username: "username",
     password: "password",
     srs: "EPSG:29882",
     apiKey: "XXXX-XXXX-XXXX-XXXX",
     locale: "en-US",
     addressSettings: {
         locale: "nl",
         database: "CMDatabase"
     }
};

// Initalize
StreetSmartApi.init(options).then( successCallback, errorCallback);

Open a panorama and/or oblique viewer using a query. The query can be a coordinate, an extent, an address or a panorama/oblique ID.

Open a panorama viewer by ID:

StreetSmartApi.open('5D4KX5SM', {
  viewerType: [StreetSmartApi.ViewerType.PANORAMA],
  srs: 'EPSG:28992',
}).then(
  function(result) {
    if (result && result[0]) {
      console.log('Opened a panorama viewer through API!', result[0]);
    }
  }
).catch(
  function(reason) {
    console.log('Error opening panorama viewer: ' + reason);
  }
)

Open a panorama viewer and oblique viewer by address:

StreetSmartApi.open('Van Voordenpark 1, Zaltbommel', {
  viewerType: [StreetSmartApi.ViewerType.PANORAMA, StreetSmartApi.ViewerType.OBLIQUE],
  srs: 'EPSG:28992',
}).then(
  function(result) {
    if (result && result[0] && result[1]) {
      console.log('Opened a panorama viewer and oblique viewer through API!', result[0], result[1]);
    }
  }
).catch(
  function(reason) {
    console.log('Error opening viewers: ' + reason);
  }
)

Start measurement mode for the given panorama viewer.

Start measurement mode

StreetSmartApi.startMeasurementMode(panoramaViewer);

Stop measurement mode

Stop measurement mode

StreetSmartApi.stopMeasurementMode();

Object which contains event type constants for all components.

Coordinate definition

Type: Array<Number>

Definition of oblique viewer UI elements

Type: Object

Definition of panorama viewer UI elements

Type: object

Array of length four with four elements. r, g, b, a, respectively.

Type: Array

Definition of viewer types

Type: Object