Below is a small example to get you started. You need a (local) webserver to get the html to work. For a more in depth example, go to: https://www.cyclomedia.com/en/code-examples

<script type="text/javascript" src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.12.0/build/ol.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script type="text/javascript" src="https://streetsmart.cyclomedia.com/api/v24.9/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>

Street Smart - Version 24.14.0

Bugs

• Fixed bug that was showing wrong measurement error message in oblique viewer

Street Smart - Version 24.13.0

Story

• Added supported for domain value names for ESRI layers

Bugs

• Fixed UI bug that was adding extra margin when hove over copyright Cyclomedia text

Street Smart - Version 24.12.0

Story

• Implemented dragging CrossSection points for the perpendicular mode

Bugs

• Fixed a bug that was preventing VIEWER_REMOVED event to be triggered
• Fixed a bug where CrossSection points where still visible after clicking in another layer

Street Smart - Version 24.11.0

Story

• We now support WFS 2.0.0
• CrossSection points can be dragged to change position
• Address Labels layer added for Belgium configuration

Bugs

• Fixed toggle compass button
• Fixed an issue where some ImageId's could not be opened through an API call
• Fixed a bug that wrongly changed the color of a height measurement
• Fixed a bug where some buttons were not visible/functional After a UI update

Street Smart - Version 24.10.0

Story

• Added the possibility to update overlays via the API

Bugs

• Fixed a bug where the API was not destroyed cleanly
• Fixed a bug which closed all viewers rather than just the one that was supposed to be closed
• Fixed a measurements bug in the Pointcloud viewer which happened in some specific SRS

Street Smart - Version 24.9.0

Story

• Updated React 18 deprecated code:
• Replaced ReactDOM.render with createRoot function on API rendering
• Updated context API to replace childContextTypes with new React context implementation
• Updated code that was using ReactDOM.findDOMNode to use useReference

Street Smart - Version 24.8.0

Bugs

• Fixed the positioning of the arrows in the CrossSection graph

Street Smart - Version 24.7.0

Story

• Change the measurement messages to be displayed together inside measurement panel

Bugs

• Fixed bug that was preventing measurement units to change inside CrossSection panel
• Fixed bug that was distorting graph inside CrossSection panel

Street Smart - Version 24.6.0

Story

• Buttons in the bottom bar of viewers got new icons and text
• New button added to the viewers: An eye icon in the top right of the viewers, once clicked, it will display a list of UI elements and features that can be toggled on and off in the viewer
• Image information button moved to the top left of the viewers
• Toggle navigation button removed from the bottom bar of the viewers. But it's still possible to toggle on/off in the Toggle UI Panorama menu
• New features in the panorama CrossSection: add perpendicular measurement and button to swap values between angle and percentage
• Change name of a button: from 3DNL to 3D

Bugs

• Fixed the display of X and Y values in the CrossSection panel that sometimes got overlapped by the panel borders
• Fixed the translation of oblique button for Dutch language

Street Smart - Version 24.5.0

Story

• Deprecated the 'options.configurationUrl' parameter of the 'StreetSmartApi.init(options)' method. This parameter is no longer recommended for use and will be removed in a future release

Street Smart - Version 24.4.0

No changes

Street Smart - Version 24.3.0

Story Added spacing in the text values in the measurement panel Make the WFS recording functions available in the API

Street Smart - Version 24.2.0

Story Added feature to autofill username input when log in via OAuth Improved initial pitch value when opening panorama viewer Changed delta-x and delta-y labels to width and height in the CrossSection panel

Bugs Fixed a bug that was making API crashes after clicking on destroy button Fixed a problem where some field where not being display in the information panel

Street Smart - Version 24.1.3

Bugs Fixed a problem where height measurement was not changing color properly Corrected text in the tooltips when in the measurement mode

Street Smart - Version 24.1.0

Story Improved the way TimeTravel fetch recordings Add improvements to selecting points during CrossSection

Bugs Fixed a bug that was making CrossSection panel display measurements mirrored Fixed a problem where CrossSection was not update the measurement units from meters to feet

Technical Story Upgrade NodeJS from Version 16 to 20

Street Smart - Version 23.15.0

Bugs Removed amplitude code that was wrongly add to API in a previous release

Technical Story Cleanup old Crowd Smart related code Update cuid to @paralleldrive/cuid2 for Enhanced Security

Street Smart - Version 23.14.0

Bugs Fixed a bug in the CrossSection of 3D viewer where a double click was causing the viewer to crash Fixed a problem where elevation panel was closing after changing records Removed not used WFS requests

Technical Story Replace 'lodash' with 'lodash-es' for Improved Efficiency and Tree-shaking Support

Street Smart - Version 23.13.0

Story Measurement feedback messages were updated Improved 3D mesh viewer map measurement based on ground level Added loading indicator while loading 3D data

Bugs Prevent elevation panel to change recordings after user click in the 'up' key Fixed a bug on elevation panel that was not calculating the decimals properly Fixed a problem where attribute info was not being show from some layers Fixed a bug where measurements and elevation panel where breaking each other if one is triggered after another

Technical Story Replace deprecated execCommand('copy') for clipboard API Packages updated: chartjs-plugin-zoom, papaparse, react-autosuggest, react-chartjs-2 and xml2js

Street Smart - Version 23.12.0

Technical Story Remove legacy polyfills and unused libraries: whatwg-fetch, blueimp-canvas-to-blob, pepjs, @babel/polyfill, resize-observer-polyfill

Street Smart - Version 23.11.0

Story Add feature to measure CrossSection

Bugs Fix a bug that was making TIDToken not working in the API

Street Smart - Version 23.10.0

Story Added depth tiles to SH recordings

Bugs Fixed problem with wrong call to userProfile in the API Fixed a bug that was preventing API to display point cloud Fixed a problem with projections for different overlays

Street Smart - Version 23.9.0

Technical Story React updated to version 18

Story 3D data pipeline updated Update LiDAR/Point cloud download service

Bugs Fixed a bug that was preventing some users to log in to the API Fixed a bug in measurements after updating React 18 Fixed a problem that was opening object information panel while measuring

Street Smart - Version 23.8.0

Bugs Fixed a bug that was not properly resting selected cyclorama during measurement Fixed problem with the Line of Sight feature of the 3D viewer

Street Smart - Version 23.7.0

Story

• Thumbnail added to the time travel component

Bugs

• Fixed problem where StreetHive recordings where not be able to be selected in time travel
• Changing from DCR recording to backpack problem fixed

Street Smart - Version 23.6

Story

• Change redirect URL
• 3rd party data integration

Street Smart - Version 23.3

Story

• Changed color of documentation

Bug

• Version tooltip was missing

Street Smart - Version 23.2

Bug

• Oblique save image fixed

Street Smart - Version 23.1

Story

• Client Id passed for logging in with OAuth
• Remove check for 3D viewer
• Changed configuration endpoint

Street Smart - Version 22.19

Story

• Added interface function for snapping

Street Smart - Version 22.17

Story

• Added a save measurement button

Street Smart - Version 22.16

Story

• New version of the Pointcloud viewer

Street Smart - Version 22.15

Story

• The 3D (Mesh) viewer can now be used in the API. (oauth login only) For an example, please check at the end of the open function documentation.

Street Smart - Version 22.13

Bug

• fonts not downloading from Street Smart website when using API on custom location

Street Smart - Version 22.12

Story

• Link sign is visible in single cyclorama
• Align navigation bar icon colors with viewer color
• Change date/time notation

Bug

• Styling elevation slider

Street Smart - Version 22.11

Story

• Increase Elevation Slider reach to 25 meters

Bug

• Elevation slider not using proper feet/meter conversion

Street Smart - Version 22.10

Story

• API: Oauth with popup + user login

Bug

• API: Fix production build error

Street Smart - Version 22.9

Bug

• Wrong ol.js in api template

Story

• Remove zoom buttons from all viewers

Street Smart - Version 22.7

Bug

• Remove Unity Error in API integrations

Street Smart - Version 22.5

Bug

• API: Tooltip position hovering on a recording dot

Street Smart - Version 22.3

Story

• Remove Google fonts

Street Smart - Version 22.1

Story

• New address search service for countries outside the Netherlands

Street Smart - Version 21.12

Bug

• API: panorama viewer crashes when open a panorama viewer in the api

Street Smart - Version 21.10

Story

• API: New PointCloud viewer, which can be called with options argument { viewerType: ['@@ViewerType/POINTCLOUD'] }
• API: PointCloud Linked Panorama, which can be set with function toggleLinkedViewers (i.e. window.panoramaViewer[0].toggleLinkedViewers()).
• Implemented DCR9+ Tileschema

Street Smart - Version 21.9

Story

• API: added the functionality of compass, which can be set with function toggleCompass (i.e. window.panoramaViewer[0].toggleCompass() or window.obliqueViewer.toggleCompass().

Street Smart - Version 21.3

Story

• API: added the function to set an elevationLevel in the panorama viewer

Street Smart - Version 20.12

Story

• API: added pointcloud viewer documentation
• API: added aerial pointcloud toggle

Street Smart - Version 20.1

Story

• API: added pointcloud viewer to api
• API: added pointcloud viewer navigation functions
• API: added pointcloud viewer specific functions

Street Smart - Version 19.19

Story

• API: added measureMethod to startMeasurement

Street Smart - Version 19.18

Story

• API: Unit preference setting

Street Smart - Version 19.17

Bug

• Older oblique image not loaded on panning
• Symbol sizes in feet systems
• Flex direction for dashboard panel

Story

• Update error message
• API: panorama toggle sidebar expanded error
• Improve feedback for buttons
• API: disable pointcloud viewer

Street Smart - Version 19.16

Bug

• API: cant select redlining features
• Nested "And" filters in sld are not working
• Ownership of loading process
• Point measurements not shown in oblique
• API: Non Street Smart point measurement + Forward Intersection
• New navigation with historic cyclorama's
• API: Oblique viewer crashes when a WFS layer is added.
• Panorama arrow key navagation
• API: panorama save image wrong width/height
• API: geojson polygon measurement in api
• Brightness and Contrast not on measurements

Story

• Implement new slope stdev calculations + new correlation function
• Separate focus styling from hover/active

Street Smart - Version 19.15

Bug

• API: Close measurement by cross leads to exception in console log
• API: The cyclorama can be closed during the measurement
• API: Close measurement leads to an undefined removed viewer event
• Proper SRS' are not always loaded when needed
• Intersection calcualtions fail if recordedAt is not a date
• The lines of measurements are much too thick
• Correct equations for calculation of standard deviations of polygon measurements
• Small update of the standard deviation line calculations (change correlation parameters)

Story

• Support Line width PanoramaViewer
• Add pointcloud viewer
• Add pointcloud interface functions
• Improve layer styling in wizard
• Improve sizing of points/labels/symbols
• Label size Panoramaviewer
• Update npm openlayers to npm ol

Street Smart - Version 19.14

Bug

• SLD size in panorama works weird<
• Perfect Polygon does not draw in API
• API: PropertyIsNull filter not working in Cyclorama
• Styling issue with polygon fill
• Webapp crashes in us give german error
• Fix crash forward intersection with polygons

Story

• Keyboard shortcuts
• Add extra panorama window color
• Remove Reactcss from project
• Remove / reduce usate of IntlComponents
• Update to latest pep.js / remove forked pep.js
• Standard deviation measurements

Street Smart - Version 19.13

Story

• Copy ground coordinates from cyclorama
• Show slope angle also with more than 45
• Remove link for full image when image is new tiling

Street Smart - Version 19.12

Bug

• Remove adress layer from non-NL configs
• 'Kadastrale kaart' not shown in oblique viewer
• Brightness and contrast no longer work in oblique
• Improve readability of measurement information popups
• Some 3D polygons not visible in panoramaviewer

Story

• Transparency slider on oblique
• View radius
• Rotating cyclorama by dragging viewing cone in oblique window
• Show a north arrow for the images
• Keep bright and contrast setting when opening another cyclorama
• DCR10 new Tiling Smart Click fix
• Implement React error bounds

Street Smart - Version 19.11

Bug

• Clicking non-lidar recording
• Pip images broken in panoramaviewer
• Viewing cone not visible
• Oblique measurement crashes when skipping the last observation

Story

• API: start oblique measurement

Street Smart - Version 19.10

Bug

• ObliqueHeight: height of WFS layer in oblique doesn't work
• ObliqueHeight: viewing cone doesn't work well (only one direction is working)
• Line does not look accurate in Cycloramaviewer
• Missing tooltip
• Surface cursor position not properly updated
• Layers are not showing in layer manager

Story

• Source image download
• Measurement panel collapse
• Make measurement properties panel collapsible
• Show total length of the line in the Cyclorama
• Show the area of a polygon in the cyclorama
• Measurement panel collapse

Street Smart - Version 19.9

Story

• Moving the measurement panel to the right side of the Cyclorama/Oblique
• Combine measurement list with measurement panel
• API - zoom window button turned off by default.

Street Smart - Version 19.8

Bug

• Measurement only appears after moving the mouse

Story

• Improve hitbox for addresslabels and other 2DText
• Rework loading indicator

Street Smart - Version 19.7

Bug

• Forward intersection: a click on a recording point leads to the addition of an observation point
• IE: oblique rotate buttons dont work
• API: toggleRecordingsVisibility is broken

Story

• API: Add an interface function to deselect a feature in a layer

Street Smart - Version 19.6

Bug

• API: viewer is not properly cleaned on destroy
• Forward intersection + insert between
• Oblique turn left button doesn't work.
• toggleAddressesVisible fails
• API: open 2 images, start measurement, close measurement, some functionality 2nd image doesn't work
• Fix SetState warnings
• Can't add observation to smart click measurement.

Story

• Add WFS overlay option to API
• "Merge" recordingslayer and historical recordings layer
• One single Cyclorama layer
• Change fillColor opacity for polygon measurements
• Improve forward intersection measurement calculations
• addLayer reducer throwing warnings

Street Smart - Version 19.5

Bug

• Standard deviation is lower than recording with point measurement
• API: Measuring in degree systems should not be possible
• Switching measurement type crashes Street Smart
• Black square for text lables

Story

• Add WFS option on API-SLD-string with WFS-url
• Three.js replace point geometry with sprite
• Address number click leads to panorama update
• Oblique - feature zoomLvl
• Default collapsed/expanded MeasurementInformationPanel

Street Smart - Version 19.4

Bug

• API: after start-stop measurement, and two panoramic images are open, no events are fired from one of the images
• GeoJSON positioning in Oblique improved
• Color of lines in panorama defaults to white sometimes
• Fixed Css scoped outside of cmt

Story

• API: click-info not collapsable
• SLD: Expands external Graphic so that it is also possible to provide inline Content. (base64 string)
• Adjusted default measurement name

Street Smart - Version 19.3

Bug

• Click on point features in panorama is not working
• Custom layer styling for lines
• TypeError when toggling overlay in Oblique

Story

• Add WFS option on API-WFS-SLD-string styling
• API: Add address layer
• API: addOverlay function, Make it possible to also give a color to the layer

Street Smart - Version 19.2

Bug

• Decimal notation depending on language
• Textsymbolizer is not shown using SLD with SHP
• API: cant select redlining features
• Attribute window width for very long values

Street Smart - Version 19.1

Bug

• Panoramaviewer tooptip doesn't disapear
• Remove surfacecursor on mouseOut
• object information not correct with SHP overlay in cyclorama
• Height measurement, remove insert above button
• No oblique found form panorama
• double click zoom bug
• removeOverlay fails on oblique viewer
• Precision values change when adding point to line measurement
• Textlabels are not visible in the panorama viewer
• Safari Mac PanoramaViewer dragging (viewing) not working

Story

• Use Properties in CSSParameters in sld
• keep green color with height measurement
• API: Remove text: "No Windows Present"

Street Smart - Version 18.15.1

Bug

• API: rerender on parent div resize

Street Smart - Version 18.15

Bug

• navigateToUrl on line features
• Api: Measurement panel falls outside api window
• Measurement modal resize observer

Story

• API: Add SLD filter rule PropertyIsNull
• API: Responsive measurement selection
• API: update french language file

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

Version 24.14

• Upgrade bluebird from 1.2.9 to 1.3.0

Version 24.11

• Upgrade ThreeJS from 113.2 to 167.1

Version 24.10

• Upgrade NodeJS from Version 16 to 20

Version 23.9

• Updated to React 18.2.0

Version 22.15

• Lodash is no longer built into the Street Smart API. So you should be aware that the integration now imports lodash properly

Version 22.10

• can be used with an iframe
• Added OAuth, request adding origin domain to be authorised to use OAuth

Version 22.9

• not usable within an iframe
• Webpack upgrade

Version 21.10

• DCR9+ TileSchema
• New PointCloud Viewer
• Because of above, historical cycloramas (images shot before 2021) are not displayed correctly.

Version 19.19

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

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.

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

to stay tuned on important API updates, subscribe to our newsletter via https://www.cyclomedia.com/en/street-smart-api-newsletter

This article describes how to create an OAuth integration with the Street Smart Javascript API.

The following parts are discussed:

• Initialization of the API
• Login redirect handling
• Logout redirect handling
• Log out of the API

Type: (Vector3 | undefined)

Containing event definitions that are the same across all viewers

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

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

StreetSmartApi.open('Van Voordenpark 1, Zaltbommel', {
viewerType: [StreetSmartApi.ViewerType.OBLIQUE],
srs: 'EPSG:28992',
}).then(
  function(result) {
    console.log(StreetSmartApi.getViewers()[0].getId());
});

// Having StreetSmartApi intialized:
let viewer = streetSmartApi.addObliqueViewer(viewerDomElement);
var properties = {"MyAttribute1": "MyValue1", "MyAttribute2": "MyValue2"};
viewer.setSelectedFeatureByProperties(properties, layerId);

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

StreetSmartApi.open('5D4KX5SM', {
viewerType: [StreetSmartApi.ViewerType.PANORAMA],
srs: 'EPSG:28992',
panoramaViewer: { replace: false, },
}).then(
  function(result) {
    console.log(StreetSmartApi.getViewers()[0].getId());
});

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

// Having StreetSmartApi intialized:
let viewer = streetSmartApi.addPanoramaViewer(viewerDomElement);
var properties = {"MyAttribute1": "MyValue1", "MyAttribute2": "MyValue2"};
viewer.setSelectedFeatureByProperties(properties, layerId);

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

Initializes a new WFS recording client. This client handles loading recordings through an OGC Web Feature Service (WFS).

Extends wfsRecordingClient.WfsRecordingClient()

const recordingClient = new StreetSmartApi.WfsRecordingClient();

Initializes a new WFS third party recording client. This client handles loading third party recordings through an OGC Web Feature Service (WFS).

Extends wfsTPRecordingClient.TPRecordingClient()

const recordingClient = new StreetSmartApi.WfsRecordingClient();

Reason why we convert from world vector to pixel and then that same pixel coords back to world vector is because world vector we got from dragging events are incorrect due to draggin event calculation. We know that pixel coords are good, but for 3d movement on 2d screen, it is unable to determine where the intersection between dragging vector and depth map actually is

Bearer token changed or added.

Type: Object

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

var options = {name: 'My GeoJSON', geojson: {}, sourceSrs: 'EPSG:28992', sldXMLtext: 'XMLstring'};
var layer = StreetSmartApi.addOverlay(options);
var layerId = layer.id

Add a WFS Layer as overlay to the panorama viewer. Can be removed with removeOverlay

var options = {
name: 'My Super cool layer',
url: 'http://testserver.com/geoserver/streets/wfs',
typeName: 'streets:street-center-lines',
version: '1.1.0',
color: '#00ff00',
authRequired: true,
credentials: { username: 'Mike', password: 'Tyson'}
};
var layer = StreetSmartApi.addWFSLayer(options);
var layerId = layer.id

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

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

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

Get the active measurement

Get the active measurement data

StreetSmartApi.getActiveMeasurement();

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

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 the Bearer token from the API.

Returns all logs, including ones invisible to integrators.

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

Get a proj4 object. Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations.

var proj4 = StreetSmartApi.getProj4();

Return an array with references to all viewers.

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

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)

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",
     loginOauth: true,
     loginOauthSilentOnly: true,
     clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
     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);

Method to add an event listener.

Method to add an event listener.

Method to add an event listener.

Method to add an event listener.

Open a panorama, oblique, point cloud viewer and/or meshviewer 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',
  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 by coordinate and date range (this is only applicable for the panorama viewer):

StreetSmartApi.open(
{
 coordinate: [121692.34, 487812.37, 5.60],
 dateRange: {from: '2017-03-01', to: '2017-04-01'},
},
{
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);
  }
)

Open a aerial pointcloud viewer by coordinate:

StreetSmartApi.open(
{
  coordinate: [121692.34, 487812.37, 5.60],
},
{
  viewerType: [StreetSmartApi.ViewerType.POINTCLOUD],
  srs: 'EPSG:28992',
  pointcloudViewer: { pointCloudType: StreetSmartApi.PointCloudType.AERIAL }}).then(
  function(result) {
    if (result && result[0]) {
      console.log('Opened a pointcloud viewer through API!', result[0]);
    }
  }
).catch(
  function(reason) {
    console.log('Error opening pointcloud viewer: ' + reason);
  }
)

Open a panorama viewer and an aerial pointcloud viewer by coordinate:

StreetSmartApi.open(
{
  coordinate: [121692.34, 487812.37, 5.60],
},
{
  viewerType: [StreetSmartApi.ViewerType.PANORAMA, StreetSmartApi.ViewerType.POINTCLOUD],
  srs: 'EPSG:28992',
  panoramaViewer: { replace: false, },
  pointcloudViewer: { pointCloudType: StreetSmartApi.PointCloudType.AERIAL }}).then(
  function(result) {
    if (result) {
      console.log('Opened a pointcloud viewer and a panorama viewer through API!', result);
    }
  }
).catch(
  function(reason) {
    console.log('Error opening pointcloud viewer and panorama viewer: ' + reason);
  }
)

Open a meshviewer by coordinates:

StreetSmartApi.open(
{
  coordinate: [121293.08, 487400, 69],
},
{
  viewerType: StreetSmartApi.ViewerType.MESHVIEWER,
  srs: 'EPSG:28992',
  meshviewer: {
    fromViewer: StreetSmartApi.ViewerType.PANORAMA,
  }
 }).then(
  function(result) {
    if (result) {
      console.log('Opened a meshviewer through the API', result);
    }
  }
).catch(
  function(reason) {
    console.log('Error opening meshviewer: ' + reason);
  }
)

Open a meshviewer by imageID or address: (choose one)

StreetSmartApi.open("WE4UGIO7" || "Dam 3, Amsterdam",
{
  viewerType: StreetSmartApi.ViewerType.MESHVIEWER,
  srs: 'EPSG:28992',
  meshviewer: {
    fromViewer: StreetSmartApi.ViewerType.PANORAMA,
  }
 }).then(
  function(result) {
    if (result) {
      console.log('Opened a meshviewer through the API', result);
    }
  }
).catch(
  function(reason) {
    console.log('Error opening meshviewer: ' + reason);
  }
)

Remove a GeoJSON overlay from the panorama viewer

var layer = StreetSmartApi.addOverlay("My GeoJSON", {}, "EPSG:28992");
StreetSmartApi.removeOverlay(layer.id)

** EXPERIMENTAL ** Set the active measurement.

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',
     }
 }

set de overlay draw distance in

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

Sets whether or not cursor movements will snap to nearby features while in measurement mode

Start measurement mode for the given panorama viewer.

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

Start measurement mode as surface measurement, with as measure method Smart Click

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

Start measurement mode as surface measurement, with the show measurement button visible

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

Show the 'Save measurement' button during a measurement. The measurement can be started from the panorama viewer.

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

Stop measurement mode

Stop measurement mode

StreetSmartApi.stopMeasurementMode();

Update a GeoJSON overlay in the panorama viewer. Can be removed with removeOverlay

var options = {name: 'My GeoJSON', geojson: {}, sourceSrs: 'EPSG:28992', sldXMLtext: 'XMLstring'};
var layer = StreetSmartApi.updateOverlay(options);
var layerId = layer.id

Object which contains event type constants for all components.

Object which is an Interface for changing certain settings withing the api

Object which is an Interface for enabeling/disabeling shortcuts

Defines the Background

Type: Object

Defines the PointStyles

Type: Object

Coordinate definition

Type: Array<Number>

Type: Object

Measurement Geometry types

Type: object

Definition of options for (3D) Meshviewer

Type: Object

Definition of options for ObliqueViewer

Type: Object

Definition of oblique viewer UI elements

Type: Object

Definition of options for PanoramaViewer

Type: Object

Definition of panorama viewer UI elements

Type: object

Definition of pointcloud viewer UI elements

Type: Object

Defines the pointSize

Type: Object

Definition of options for Point cloud viewer

Type: Object

Defines the point amount

Type: Object

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

Type: Array

Type: Object