Street Smart API

This Street Smart api package provides programmatic access to most of the UI components of the Street Smart Web application here.

Setup

First install the package using npm or yarn.

npm i @cyclomedia/streetsmart-api

Release channels

The package is published on separate npm dist-tags, so support lines can be installed independently of the main line.

npm i @cyclomedia/streetsmart-api           # latest
npm i @cyclomedia/streetsmart-api@rc        # release candidate
npm i @cyclomedia/streetsmart-api@react19   # React 19 support line

Then import the package

import { StreetSmartApi } from "@cyclomedia/streetsmart-api";

The package exposes also named exports of Typescript types and constants.

import { ApiOptions, ViewerType, AuthOptions } from "@cyclomedia/streetsmart-api"

API

Note the item below will just list some examples of the most frequently used methods.

[!TIP] For all the available methods on the StreetSmartApi object and the individual viewer objects, please refer to the docs.

Init

Please see the official docs or the ApiOptions type for more information about the options.

import { StreetSmartApi } from "@cyclomedia/streetsmart-api";

await StreetSmartApi.init({
    targetElement: document.getElementById('panorama-window'),
    srs: "EPSG:28992",
    locale: 'en-GB',
    apiKey: 'some-secret-xxx',
    addressSettings: {
        locale: 'nl',
        database: 'CMDatabase'
    },
    loginOauth: true,
    clientId: 'CLIENT_ID-XX-YY-ZZ',
    loginRedirectUri: 'localhost:3000/login',
    logoutRedirectUri: 'localhost:3000/logoutt'
})

Open viewer

After the call to init has successfully resolved, one or more viewers can be opened using the open function. Please check out the official docs.

import { StreetSmartApi, ViewerType } from "@cyclomedia/streetsmart-api";

const viewerInstance = await StreetSmartApi.open("5D4KX5SM", {
    viewerType: [ViewerType.PANORAMA, ViewerType.OBLIQUE],
    srs: "EPSG:28992",
    panoramaViewer: {
        closable: true,
        maximizable: false,
        timeTravelVisible: true,
        recordingsVisible: true,
        navbarVisible: true,
        replace: true,
    },
    obliqueViewer: {
        closable: true,
        maximizable: false,
    }
})

Events

You can listen for events both on the global StreetSmartApi object and on a specific viewer object, returned by the open function.

Please check the documentation or the typescript declarations for all available events.

Example: global events

import { GlobalViewerEvents, MeasurementEvents, StreetSmartApi } from "@cyclomedia/streetsmart-api";

StreetSmartApi
    .on(MeasurementEvents.MEASUREMENT_SAVED, (evt) => {
        const { activeMeasurement } = evt.detail
        console.log(activeMeasurement.geometry)
    })
    .on(GlobalViewerEvents.VIEWER_ADDED, (evt) => {
        const viewerId = evt.detail.viewer.getId()
        console.log("Viewer added: ", viewerId)
    })

Example: viewer specific event

import { PanoramaViewer, PanoramaViewerEvents, StreetSmartApi, ViewerType } from "@cyclomedia/streetsmart-api";

try {
    const viewers = await StreetSmartApi.open({
        coordinate: [121692.34, 487812.37, 5.60],
        dateRange: { from: '2022-01-01', to: '2024-01-01' }
    }, {
        viewerType: ViewerType.PANORAMA,
        srs: 'EPSG:28992',
    })

    const panoramaViewer = viewers[0] as PanoramaViewer
    panoramaViewer.on(PanoramaViewerEvents.RECORDING_CLICK, (evt) => {
        const recording = evt.detail.recording
        console.log("Clicked recording ", recording.id)
    })
} catch (e) {
    // handle error e
}

Destroy

For more information please refer to the official docs

import {StreetSmartApi} from "@cyclomedia/streetsmart-api";

await StreetSmartApi.destroy({
    targetElement: document.getElementById('panorama-window'),
    loginOauth: true,
})

FAQ

• What API functions are available?

What API functions are available?

Please see the docs for all available functions and methods.