18.5.1
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 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>
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.
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,
},
obliqueViewer: {
closable: true,
maximizable: true,
navbarVisible: true,
timeTravelVisible : true,
}
};
// Open
StreetSmartApi.open(query, options).then( successCallback, errorCallback);
Change log - Street Smart - Version 18.4
ObliqueViewer component. Do not create this component directly; use the open function.
Applies map image settings to the base layer maplayer provided. Properties currently implemented: contrast and brightness
(any)
Get the visibility of a button
(any)
Boolean
:
Returns whether the timetravel component is visible or hidden
Boolean
:
Returns whether timetravel is enabled for the ObliqueViewer
Boolean
:
Set the brightness of the oblique viewer.
(Number?)
set brightness to a positive number.
Set the brightness of the oblique viewer.
(Number?)
set contrast to a positive number.
Toggle the visibility of a button
(ObliqueViewerUi)
(Boolean?)
if available, sets enabled to this value
Expands or hides the timetravel components
(Boolean?)
if available, -value for expanding or hiding time travel.
Enables or disables timetravel in the ObliqueViewer.
(Boolean?)
if available, value for enabling or disabling toggles time travel.
Zoom in in the Oblique image.
Zoom out in the Oblique image.
PanoramaViewer component. Do not create this component directly; use the open function.
Get the visibility of a button
(any)
Boolean
:
Gets the current active recording of the PanoramaViewer.
Recording
:
Returns whether the timetravel component is visible or hidden
Boolean
:
Returns whether timetravel is enabled for the PanoramaViewer
Boolean
:
Sets the orientation of the PanoramaViewer to look at a certain coordinate.
(Coordinate)
coordinate to look at
(string?)
If provided, will use to convert coordinate to viewer srs.
Opens a panorama closest to the given address.
(string)
Address you want to search.
(string?)
Optional, coordinate system in which the panorama will be opened. E.g. "EPSG:28992"
Promise<(Recording | Error)>
: Returns a new promise for the result that may be used to chain additional functions.
Open a panorama near Cyclomedia HQ
// 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)});
Opens an image by coordinates and accompanying coordinate system.
(Coordinate)
Coordinate of location to open a panorama
(string?)
If provided, will use to convert coordinate to viewer srs.
Promise<(Recording | Error)>
: Returns a new promise for the result that may be used to chain additional functions.
Opens an image by imageId.
(string)
ID of the image that needs to be opened. E.g. "5D38RPNF".
(string?)
Optional, coordinate system in which the panorama will be opened. E.g. "EPSG:28992".
Promise<(Recording | Error)>
: Returns a new promise for the result that may be used to chain additional functions.
Rotates the panorama vertically by a certain amount, as if the camera is turning to the ground.
(number)
amount to rotate the image, in degrees.
Rotates the panorama horizontally by a certain amount, as if the camera is turning to the left.
(number)
amount to rotate the image, in degrees.
Rotates the panorama horizontally by a certain amount, as if the camera is turning to the right.
(number)
amount to rotate the image, in degrees.
Rotates the panorama vertically by a certain amount, as if the camera is turning to the sky.
(number)
amount to rotate the image, in degrees.
Set the brightness of the panorama viewer.
(Number?)
set brightness to a positive number.
Set the brightness of the panorama viewer.
(Number?)
set contrast to a positive number.
Sets the orientation (yaw, pitch, hFov), in degrees, of the PanoramaViewer to specific values all at once.
Toggles the visibility of the 3D cursor in the PanoramaViewer.
(Boolean?)
if available, sets visibility to this value.
Toggle the visibility of a button
(PanoramaViewerUi)
(any)
if available, set enabled to this value
Toggles the visibility of the recording features in the PanoramaViewer.
(Boolean?)
if available, sets visibility to this value.
Expands or hides the timetravel components
(Boolean?)
if available, -value for expanding or hiding time travel.
Enables or disables timetravel in the PanoramaViewer.
(Boolean?)
if available, value for enabling or disabling toggles time travel.
Zoom in in the Panorama. This will decrease the hFov by 5 degrees.
Zoom out in the Panorama. This will increase the hFov by 5 degrees.
The surface cursor changed position.
Error loading tile(s)
(string)
: event type
(object)
: event properties
detail.xhr
XMLHttpRequest
The XMLHttpRequest that was used to load the tile
Measurement changed or added.
(string)
: event type
(Object)
: event properties
detail.activeMeasurement
object
The added or changed Measurement
detail.panoramaViewer
PanoramaViewer
PanoramaViewer where the measurement was changed or added
viewer added.
viewer removed.
Add a GeoJSON overlay to the panorama viewer. Can be removed with removeOverlay
(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 |
{id: (string)}
:
var options = {name: 'My GeoJSON', geojson: {}, sourceSrs: 'EPSG:28992', sldXMLtext: 'XMLstring'};
var layer = StreetSmartApi.addOverlay(options);
var layerId = layer.id
Destroys the API. Cleans up its event handlers and makes used memory available for garbage collection.
Get the active measurement
Array
: Returns Array that includes Type, GeoJSON data and CRS object.
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.
{locale: (string), database: (string)}
: Object containing the address settings.
Returns the current 'ready'-state of the API.
Boolean
: 'ready'-state.
Returns the application name of the API.
string
: Application name.
Returns the used version of the API.
string
: API version number.
Returns all logs, including ones invisible to integrators.
Array<string>
: Array of console logs
Returns the object containing functionalities that are currently permitted to use by the user.
Array
: Array containing the permissions.
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)
(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.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'. |
Promise
: Returns a new promise for the result that may be used to chain additional functions.
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);
Method to add an event listener.
(Function)
Function which was set on the event listener.
StreetSmartAPI
: Returns back the instance of StreetSmartAPI so you can remove events in a chain.
Method to add an event listener.
(Function)
Function which was set on the event listener.
PanoramaViewer
: Returns back the instance of PanoramaViewer so you can remove events in a chain.
Method to add an event listener.
(Function)
Callback for event listener. Will provide an event as the first argument.
StreetSmartAPI
: Returns back the instance of StreetSmartAPI so you can add events in a chain.
Method to add an event listener.
(Function)
Callback for event listener. Will provide an event as the first argument.
PanoramaViewer
: Returns back the instance of PanoramaViewer so you can add events in a chain.
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.
(string)
The query
'86580,437038'
'86580,437038,86880,437338'
'Domplein, Utrecht'
'5D4KX5SM'
'014_0849_00135489_NOB16'
(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 |
Promise<any>
: When the promise resolves, it returns an array with references to the created
PanoramaViewer
and/or
ObliqueViewer
.
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);
}
)
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
(any)
(object)
The measurement object to set active.
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,
}
Start measurement mode for the given panorama viewer.
(object?)
Object containing measurement options.
Name | Description |
---|---|
options.geometry MeasurementGeometryType?
|
Bypasses the measurement mode dialog and starts measurement in the given mode. |
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.
Names of the events that the PanoramaViewer dispatches.
Coordinate definition
Definition of options for ObliqueViewer
Type: Object
Definition of oblique viewer UI elements
Type: Object
(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
(string)
: timetravel UI elements
(string)
: toolbar
Definition of options for PanoramaViewer
Type: Object
(boolean)
: Show window close button. Default is true.
(boolean)
: Show window maximize button. Default is true.
(boolean)
: Replace already opened panorama viewer.
(boolean)
: Show recording dots.
(boolean)
: Enable viewing earlier recordings.
(boolean)
: Show viewer navigation bar.
Definition of panorama viewer UI elements
Type: object
(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
(string)
: timetravel UI elements
(string)
: toolbar
(string)
: recording dots
Array of length four with four elements. r, g, b, a, respectively.
Type: Array
Definition of viewer types
Type: Object