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.3.0/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script>
<script type="text/javascript" src="http://streetsmart.cyclomedia.com/api/v16.1/Aperture.js"></script>
<script type="text/javascript" src="http://streetsmart.cyclomedia.com/api/v16.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>

All StreetSmartApi React components must be rendered within this component.

Extends React.Component

React Example:

// In your react components render function
render() {
    return (
        <Api>
            {
                // ...add all your Street Smart Components in here
            }
        </Api>
    );
}

Javascript Example:

//Not Applicable, you must use StreetSmartApi.addPanoramaViewer()

PanoramaViewer React Component.

Extends React.Component

React Example:

// In your react components render function
render() {
    // notice that to get the proper instance, you need to use the prop "viewerRef" instead of "ref"
    return (
        <Api>
            <PanoramaViewer viewerRef={(instance) => this.panoramaViewer = instance} />
        </Api>
    );
}

Javascript Example:

//Not applicable, You must use StreetSmartApi.addPanoramaViewer().

//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 current 'ready'-state of the API.

Returns the object containing the address search settings.

Returns the application name of the API.

Returns the used version of the API.

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 PanoramaViewers.

Initializing a StreetSmartApi.

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

// Set variables for initialisation.
let options = {
     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);

Object which contains event type constants for all components.

Coordinate definition

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

Returns all logs, including ones invisible to integrators.