Skip to content

Cyclomedia

Jump to bottom
rothwell.andy@gmail.com edited this page Aug 28, 2025 · 4 revisions

Cyclomedia is the company that provides street view imagery.

Contacts we have with them:

Joost Kerkhof - JKerkhof@cyclomedia.com
Ellie Alonzo-Negron - ealonzonegron@cyclomedia.com
Monica Balestreri - MBalestreri@cyclomedia.com
Jason Sealy - jsealy@cyclomedia.com
Ben Levine - BLevine@cyclomedia.com

The last version of Cyclomedia that allows us to hide the navbar is 24.5. It is currently at 25.x, but we are not going to go to any higher version than 24.5 until

  1. we are forced to, or
  2. they allow hiding the navbar again in a higher version

A lot of the code we wrote is explained by the Streetsmart JS API Documentation.

There are 4 main places in the code that setup the Cyclomedia functionality: atlas-intro

Initialization

As noted in the documentation's "Getting started", you have to add 5 scripts to the project's index.html.

We do the StreetSmartApi.init in CyclomediaPanel.vue's onMounted. This initialization requires the environmental variables:

VITE_CYCLOMEDIA_USERNAME
VITE_CYCLOMEDIA_PASSWORD
VITE_CYCLOMEDIA_API_KEY

Recordings client

Putting the circles on the map which you can click to move the imagery to another location requires the file util/recordings-client.js. This file is imported by Map.vue, which again requires the environmental variables:

VITE_CYCLOMEDIA_USERNAME
VITE_CYCLOMEDIA_PASSWORD

After this initiation, Map.vue runs the function getRecordings() which does an axios.post to get the locations of recordings in the area currently showing of the map.

When the map is dragged and zoomed, the axios.post call happens again to refresh the circles on the map.

Because there are thousands of recordings, the map is set to stop making the axios.post requests when the map is zoomed out lower than 16.5, and it removes the circles from the map.

Clone this wiki locally