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

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

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

<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/v19.5/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>

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

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"};
var layerName = StreetSmartApi.getLayerName("myLayerId");
viewer.setSelectedFeatureByProperties(properties, layerName);

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 all logs, including ones invisible to integrators.

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

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",
     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 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',
  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);
  }
)

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

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

Stop measurement mode

Stop measurement mode

StreetSmartApi.stopMeasurementMode();

Object which contains event type constants for all components.

Coordinate definition

Type: Array<Number>

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

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

Type: Array

Definition of viewer types

Type: Object

Type: Object