API Documentation

Version: 18.15.3

Breaking changes

Version 18.10

  • Updated to React 16.4.1
  • Please update your versions of React and React-DOM to version 16.4.1. Reason is that we also want to be prepared for React 17 next year.

Version 18.4

  • The StreetSmartApi.open function takes a different options object, from now it can contain: panoramaviewer options and obliqueviewer options
  • Previously accepted options.closable, options.maximizable and options.replace can be provided per viewer options

Version 17.3

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

new options object

const query = 'Van Voordenpark 1, Zaltbommel';

const options = {
     viewerType: [StreetSmartApi.ViewerType.PANORAMA, StreetSmartApi.ViewerType.OBLIQUE],
     srs: 'EPSG:28992',
     panoramaViewer: {
         closable: true,
         maximizable: true,
         replace: true,
         recordingsVisible: true,
         navbarVisible: true,
         timeTravelVisible : true,
         measureTypeButtonVisible: true,
         measureTypeButtonStart: true,
         measureTypeButtonToggle: true,
     },
     obliqueViewer: {
         closable: true,
         maximizable: true,
         navbarVisible: true,
         timeTravelVisible : true,
     }
};

// Open
StreetSmartApi.open(query, options).then( successCallback, errorCallback);

Changelog

Street Smart - Version 18.14

Bug

  • Zoom by mouse click problem on measurements
  • First observation line not visible Forward Intersection
  • Report blurring for France
  • Missing language string MeasurementInformationPanel

Story

  • Create measurement from WFS-geometry
  • Download image

Street Smart - Version 18.13.1

Bug

  • Window navigation bar gone when in measurementmode

Street Smart - Version 18.13

Bug

  • Incorrect height in measurement US-feet
  • getApiReadyState() returned incorrect value

Story

  • Mosaic: ability to drag and resize windows

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 type="text/javascript" src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.3/ol.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://streetsmart.cyclomedia.com/api/v18.14/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.

ObliqueViewer

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

Instance Members
getButtonEnabled(buttonId)
getId()
getNavbarExpanded()
getNavbarVisible()
getTimeTravelExpanded()
getTimeTravelVisible()
getType()
saveImage()
setBrightness(value?)
setContrast(value?)
switchViewingDirection(deltaDegrees)
toggleButtonEnabled(buttonId, enabled?)
toggleNavbarExpanded(value?)
toggleNavbarVisible(visible?)
toggleOverlay(layer)
toggleTimeTravelExpanded(expanded?)
toggleTimeTravelVisible(visible?)
zoomIn()
zoomOut()
Events
LAYER_VISIBILITY_CHANGE
VIEWER_ADDED
VIEWER_REMOVED

PanoramaViewer

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

Instance Members
get3DCursorVisible()
getButtonEnabled(buttonId)
getId()
getNavbarExpanded()
getNavbarVisible()
getOrientation()
getRecording()
getRecordingsVisible()
getTimeTravelExpanded()
getTimeTravelVisible()
getType()
getViewerColor()
lookAtCoordinate(coordinate, srs?)
openByAddress(query, srs?)
openByCoordinate(coordinate, srs?)
openByImageId(imageId, srs?)
rotateDown(deltaPitch)
rotateLeft(deltaYaw)
rotateRight(deltaYaw)
rotateUp(deltaPitch)
saveImage()
setBrightness(value?)
setContrast(value?)
setOrientation(orientation)
setSelectedFeatureByProperties(jsonProperties, layerId, layerName)
toggle3DCursor(visible?)
toggleButtonEnabled(buttonId, enabled)
toggleNavbarExpanded(value?)
toggleNavbarVisible(visible?)
toggleOverlay(layer)
toggleRecordingsVisible(visible?)
toggleTimeTravelExpanded(expanded?)
toggleTimeTravelVisible(visible?)
zoomIn()
zoomOut()
Events
ELEVATION_CHANGE
IMAGE_CHANGE
MEASUREMENT_CHANGED
RECORDING_CLICK
SURFACE_CURSOR_CHANGE
TILE_LOAD_ERROR
TIME_TRAVEL_CHANGE
VIEW_CHANGE
VIEW_LOAD_END
VIEW_LOAD_START

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

closeViewer

Close a panorama or oblique viewer using a window ID (wid).

Parameters
wid (string) The ID of the viewer to close.
Returns
Promise<any> : When the promise resolves, it returns an array with references to all viewers of type PanoramaViewer and/or ObliqueViewer .
Example

Close a viewer by ID:

StreetSmartApi.open('5D4KX5SM', {
 viewerType: [StreetSmartApi.ViewerType.PANORAMA],
 srs: 'EPSG:28992',
 panoramaViewer: { replace: false, },
}).then(
 function(result) {
   if (result && result[0]) {
     setTimeout(() => {
       StreetSmartApi.closeViewer(result[0].props.id).then(
         function(res) {
           if (res) {
             console.log('Opened and closed a viewer, resulting in an empty list of viewers: ' + res);
           }
         }).catch(
           function(err) {
             console.log('error closing viewer: ' + err);
           }
         )
    }, 1000);
  }
 }).catch(
   function(reason) {
     console.log('Error opening panorama viewer: ' + reason);
   }
 )

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.

getViewers

Return an array with references to all viewers.

Returns
Array<Object> : Returns an array with references to all viewers of type PanoramaViewer and/or ObliqueViewer .
Example

Get opened viewers:

StreetSmartApi.open('5D4KX5SM', {
 viewerType: [StreetSmartApi.ViewerType.PANORAMA],
 srs: 'EPSG:28992',
 replace: false,
}).then(
  function(result) {
    if (result && result[0]) {
      const viewers = StreetSmartApi.getViewers();
      console.log('Viewer Array:', viewers);
    }
  }).catch(
   function(reason) {
     console.log('Error opening panorama viewer: ' + reason);
   }
 )

init

Initializes the API using the inserted values. Required to use functional viewers.
Please choose a feet or metric system like: EPSG:26918 (UTM18 - USA) or EPSG:28992 (Netherlands)

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.locale string (default 'en-US') Language used as default in the API.
options.overlayDrawDistance string (default 30) max distance that is used for draw the overlays in the panorama viewer.
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",
     overlayDrawDistance: 30,
     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. 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.

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.

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.panoramaViewer PanoramaViewerOptions options object for PanoramaViewer options
options.obliqueViewer ObliqueViewerOptions options object for ObliqueViewer options
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',
  panoramaViewer: { 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)

setActiveMeasurement

EXPERIMENTAL Set the active measurement.

Parameters
geojson (any)
measurement (object) A Geojson FeatureCollection including a crs object. see http://geojson.org/geojson-spec#coordinate-reference-system-objects
Example

Set the active measurement data

var measurement = StreetSmartApi.getActiveMeasurement();

measurement.features[0].properties.id = 'changed_measurement'

StreetSmartApi.setActiveMeasurement(measurement);

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

example crs:
{
 type: 'name',
 properties: {
     name: 'EPSG:28992',
     }
 }

setOverlayDrawDistance

set de overlay draw distance in

Parameters
overlayDrawDistance (string)
Example
var layer = StreetSmartApi.addOverlay("My GeoJSON", {}, "EPSG:28992");
StreetSmartApi.setOverlayDrawDistance(50);

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
obliqueViewer
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

ObliqueViewerOptions

Definition of options for ObliqueViewer

Type: Object

Properties
closable (boolean) : Show window close button. Default is true.
maximizable (boolean) : Show window maximize button. Default is true.
timeTravelVisible (boolean) : Enable viewing earlier oblique images.
navbarVisible (boolean) : Show viewer navigation bar.

ObliqueViewerUi

Definition of oblique viewer UI elements

Type: Object

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

    Button for opening overlaypanel

  • buttons.CENTER_MAP string

    Button center map on current oblique location

  • buttons.IMAGE_INFORMATION string

    Button open image information panel

  • buttons.ZOOM_IN string

    Zoom in button

  • buttons.ZOOM_OUT string

    Zoom out button

  • buttons.SWITCH_DIRECTION string

    Buttons for switching viewing direction

  • buttons.SAVE_IMAGE string

    Button for saving image

  • buttons.TOGGLE_NADIR string

    Button for toggling between Oblique and Nadir images

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

PanoramaViewerOptions

Definition of options for PanoramaViewer

Type: Object

Properties
closable (boolean) : Show window close button. Default is true.
maximizable (boolean) : Show window maximize button. Default is true.
replace (boolean) : Replace already opened panorama viewer.
recordingsVisible (boolean) : Show recording dots.
timeTravelVisible (boolean) : Enable viewing earlier recordings.
navbarVisible (boolean) : Show viewer navigation bar.
measureTypeButtonVisible (boolean) : Show measurement type button in measurement the navigation bar. Default is true.
measureTypeButtonToggle (boolean) : Allow toggle of measurement type in measurement the navigation bar. Default is true.
measureTypeButtonStart (boolean) : Start new measurement when clicking on measurement type button in measurement the navigation bar. Default is true.

PanoramaViewerUi

Definition of panorama viewer UI elements

Type: object

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

    Button open elevation panel

  • buttons.OVERLAYS string

    Button open overlay panel

  • buttons.OPEN_OBLIQUE string

    Button open oblique on current panorama location

  • buttons.REPORT_BLURRING string

    Button report blurring issue

  • buttons.CENTER_MAP string

    Button center map on current panorama location

  • buttons.IMAGE_INFORMATION string

    Button open image information panel

  • buttons.SAVE_IMAGE string

    Button for saving image

  • 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
MEASUREMENTS (string) : measurements
ADDRESSES (string) : addresses
SEARCHLOCATION (string) : search location

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