17.3.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.
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
:
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.
Sets the orientation (yaw, pitch, hFov), in degrees, of the PanoramaViewer to specific values all at once.
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.
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
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.
(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'. |
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.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. |
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)
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.
Coordinate definition
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 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
(string)
: Green circular cursor on surface
Array of length four with four elements. r, g, b, a, respectively.
Type: Array
Definition of viewer types
Type: Object