Getting started

Below is a small example to get you started. For a more in depth example, go to : https://www.cyclomedia.com/en/service-and-support-for-developers/codeexamples

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

Local installation

Some customers of CycloMedia have the imagery that they bought hosted on an internal website. For this reason the API can connect to this local imagery. For more information, go to : http://localinstallation.cyclomedia.com There you can also find information about how to simulate a local installation for development purposes.

Breaking changes

Version 17.3

  • Removed previously deprecated functions addPanoramaViewer and destroyPanoramaViewer. Please use StreetSmartApi.open.
  • addOverlay function distinct parameters changed to a single options object.

ObliqueViewer

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

Instance Members
applyViewingFilter(mapLayer)
getButtonEnabled(buttonId)
getNavbarExpanded()
getNavbarVisible()
getTimeTravelExpanded()
getTimeTravelVisible()
toggleButtonEnabled(buttonId, enabled?)
toggleNavbarExpanded(value?)
toggleNavbarVisible(visible?)
toggleTimeTravelExpanded(expanded?)
toggleTimeTravelVisible(visible?)
zoomIn()
zoomOut()

PanoramaViewer

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

Instance Members
getButtonEnabled(buttonId)
getNavbarExpanded()
getNavbarVisible()
getOrientation()
getRecording()
getRecordingsVisible()
getTimeTravelExpanded()
getTimeTravelVisible()
getViewerColor()
lookAtCoordinate(coordinate, srs?)
openByAddress(query, srs?)
openByCoordinate(coordinate, srs?)
openByImageId(imageId, srs?)
rotateDown(deltaPitch)
rotateLeft(deltaYaw)
rotateRight(deltaYaw)
rotateUp(deltaPitch)
setOrientation(orientation)
toggleButtonEnabled(buttonId, enabled)
toggleNavbarExpanded(value?)
toggleNavbarVisible(visible?)
toggleRecordingsVisible(visible?)
toggleTimeTravelExpanded(expanded?)
toggleTimeTravelVisible(visible?)
zoomIn()
zoomOut()
Events
IMAGE_CHANGE
RECORDING_CLICK
TILE_LOAD_ERROR
TIME_TRAVEL_CHANGE
VIEW_CHANGE
VIEW_LOAD_END
VIEW_LOAD_START

MEASUREMENT_CHANGED

Measurement changed or added.

Properties
type (string) : event type
detail (Object) : event properties
  • detail.activeMeasurement object

    The added or changed Measurement

  • detail.panoramaViewer PanoramaViewer

    PanoramaViewer where the measurement was changed or added

addOverlay

Add a GeoJSON overlay to the panorama viewer. Can be removed with removeOverlay

Parameters
options (object) Set of parameters for overlay
Name Description
options.geojson object GeoJSON object containing the layer data
options.name string? Name of the layer
options.sourceSrs string? Optional EPSG code (srs) for the source GeoJSON, if not provided, srs of API initialisation is used.
options.sldXMLtext string? Optional XML string for Styled Layer Descriptor
Returns
{id: (string)} :
Example
var options = {name: 'My GeoJSON', geojson: {}, sourceSrs: 'EPSG:28992', sldXMLtext: 'XMLstring'};
var layer = StreetSmartApi.addOverlay(options);
var layerId = layer.id

destroy

Destroys the API. Cleans up its event handlers and makes used memory available for garbage collection.

Parameters
options (Object) Object containing the options used for destroying the API.
Name Description
options.targetElement Element? DOM element the viewers were rendered into.

getActiveMeasurement

Get the active measurement

Returns
Array : Returns Array that includes Type, GeoJSON data and CRS object.
Example

Get the active measurement data

StreetSmartApi.getActiveMeasurement();

result:
{
type: String,
 features: [
  geometry: Object,
  properties: Object,
  type: String,
 ],
 crs: Object,
}

getAddressSettings

Returns the object containing the address search settings.

Returns
{locale: (string), database: (string)} : Object containing the address settings.

getApiReadyState

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

Returns
Boolean : 'ready'-state.

getApplicationName

Returns the application name of the API.

Returns
string : Application name.

getApplicationVersion

Returns the used version of the API.

Returns
string : API version number.

getDebugLogs

Returns all logs, including ones invisible to integrators.

Returns
Array<string> : Array of console logs

getPermissions

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

Returns
Array : Array containing the permissions.

init

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

Parameters
options (Object) Object containing the options used for initializing the API.
Name Description
options.targetElement Element? DOM element to render the viewers into.
options.username string? Username of the user.
options.password string? Password of the user.
options.tid string? Password of the user.
options.apiKey string apiKey given to the user.
options.srs string EPSG code of the coordinate system used in the API. E.g. "EPSG:28992".
options.maxWindows string Maximum number of panorama viewers that can be open at the same time.
options.locale string (default 'en-US') Language used as default in the API.
options.configurationUrl string? Alternate configuration url to use for all configuration services. Can be used for a local installation .
options.addressSettings {locale: string, database: string}? The address settings to use for address searches.
locale - The locale to use. e.g. 'nl'.
database - The name of the database. e.g. 'CMDatabase'.
Returns
Promise : Returns a new promise for the result that may be used to chain additional functions.
Example

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);

off

Method to add an event listener.

Parameters
type (string) Remove an event listener. See Events E.g. MEASUREMENT_CHANGED
callback (Function) Function which was set on the event listener.
Returns
StreetSmartAPI : Returns back the instance of StreetSmartAPI so you can remove events in a chain.

off

Method to add an event listener.

Parameters
type (string) Remove an event listener. See Events E.g. RECORDING_CLICK
callback (Function) Function which was set on the event listener.
Returns
PanoramaViewer : Returns back the instance of PanoramaViewer so you can remove events in a chain.

on

Method to add an event listener.

Parameters
type (string) Type of event to listen to. See Events E.g. MEASUREMENT_CHANGED
callback (Function) Callback for event listener. Will provide an event as the first argument.
Returns
StreetSmartAPI : Returns back the instance of StreetSmartAPI so you can add events in a chain.

on

Method to add an event listener.

Parameters
type (string) Type of event to listen to. See Events E.g. RECORDING_CLICK
callback (Function) Callback for event listener. Will provide an event as the first argument.
Returns
PanoramaViewer : Returns back the instance of PanoramaViewer so you can add events in a chain.

open

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.

Parameters
query (string) The query

  • Coordinate: x,y E.g. '86580,437038'
  • Extent: minx,miny,maxx,maxy E.g. '86580,437038,86880,437338'
  • Address: E.g. 'Domplein, Utrecht'
  • Panorama ID: E.g. '5D4KX5SM'
  • Oblique ID: E.g. '014_0849_00135489_NOB16'
options (object)
Name Description
options.viewerType Array<ViewerType> an array indicating what kind of viewer(s) to open
options.srs string EPSG code of the spatial reference system to use
options.closable boolean whether the window(s) close button should be visible. Default is true. If a window is already open, this cannot be changed anymore.
options.maximizable boolean whether the window(s) maximize button should be visible. Default is true. If a window is already open, this cannot be changed anymore.
options.replace boolean whether the panorama viewer window should be replaced.
Returns
Promise<any> : When the promise resolves, it returns an array with references to the created PanoramaViewer and/or ObliqueViewer .
Example

Open a panorama viewer by ID:

StreetSmartApi.open('5D4KX5SM', {
  viewerType: [StreetSmartApi.ViewerType.PANORAMA],
  srs: 'EPSG:28992',
  replace: false,
}).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);
  }
)

removeOverlay

Remove a GeoJSON overlay from the panorama viewer

Parameters
layerId (string) Id of the layer. Use the id that was returned by addOverlay
Example
var layer = StreetSmartApi.addOverlay("My GeoJSON", {}, "EPSG:28992");
StreetSmartApi.removeOverlay(layer.id)

startMeasurementMode

Start measurement mode for the given panorama viewer.

Parameters
panoramaViewer (object) An instance of PanoramaViewer
options (object?) Object containing measurement options.
Name Description
options.geometry MeasurementGeometryType? Bypasses the measurement mode dialog and starts measurement in the given mode.
Example

Start measurement mode without passing a geometry type. The user can then choose the measurement mode.

StreetSmartApi.startMeasurementMode(panoramaViewer);

Start measurement mode as point measurement

StreetSmartApi.startMeasurementMode(panoramaViewer, {geometry:StreetSmartApi.MeasurementGeometryType.POINT});

Start measurement mode as distance measurement

StreetSmartApi.startMeasurementMode(panoramaViewer, {geometry:StreetSmartApi.MeasurementGeometryType.LINESTRING});

Start measurement mode as surface measurement

StreetSmartApi.startMeasurementMode(panoramaViewer, {geometry:StreetSmartApi.MeasurementGeometryType.POLYGON});

stopMeasurementMode

Stop measurement mode

Example

Stop measurement mode

StreetSmartApi.stopMeasurementMode();

Events

Object which contains event type constants for all components.

Static Members
measurement
panoramaViewer

Coordinate

Coordinate definition

Type: Array<Number>

Parameters
$0 (number) X value of the coordinate
$1 (number) Y value of the coordinate
$2 (number?) Z value of the coordinate

ObliqueViewerUi

Definition of oblique viewer UI elements

Type: Object

Properties
buttons (Object) : Buttons
  • buttons.CENTER_MAP string

    Button center map on current oblique location

  • buttons.IMAGE_INFORMATION string

    Button open image information panel

  • buttons.COPY_LINK string

    Button copy link to clipboard

  • buttons.SAVE_IMAGE string

    Button save image of current view

  • buttons.ZOOM_IN string

    Zoom in button

  • buttons.ZOOM_OUT string

    Zoom out button

  • buttons.SWITCH_DIRECTION string

    Buttons for switching viewing direction

  • buttons.TOGGLE_NADIR string

    Button for toggling between Oblique and Nadir images

TIME_TRAVEL (string) : timetravel UI elements
NAVBAR (string) : toolbar

PanoramaViewerUi

Definition of panorama viewer UI elements

Type: object

Properties
buttons (string) : Buttons
  • buttons.OVERLAYS string

    Button open overlay panel

  • buttons.OPEN_OBLIQUE string

    Button open oblique on current panorama location

  • buttons.CENTER_MAP string

    Button center map on current panorama location

  • buttons.IMAGE_INFORMATION string

    Button open image information panel

  • buttons.COPY_LINK string

    Button copy link to clipboard

  • buttons.SAVE_IMAGE string

    Button save image of current view

  • buttons.ZOOM_IN string

    Zoom in button

  • buttons.ZOOM_OUT string

    Zoom out button

TIME_TRAVEL (string) : timetravel UI elements
NAVBAR (string) : toolbar
RECORDINGS (string) : recording dots
SURFACE_CURSOR (string) : Green circular cursor on surface

RGBA

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

Type: Array

Properties
$0 (number) : Value of Red in rgba, between 0 and 255
$1 (number) : Value of Green in rgba, between 0 and 255
$2 (number) : Value of Blue in rgba, between 0 and 255
$3 (number) : Value of Alpha in rgba, between 0 and 1

ViewerType

Definition of viewer types

Type: Object

Properties
PANORAMA (string) : Panorama viewer
OBLIQUE (string) : Oblique viewer
MAP (string) : Map viewer