Skip to content

Cyclomedia

rothwell.andy@gmail.com edited this page Aug 2, 2024 · 2 revisions

Cyclomedia is the company that provides street view imagery.

Contacts we have with them:

Monica Balestreri - MBalestreri@cyclomedia.com
Jason Sealy - jsealy@cyclomedia.com
Ben Levine - BLevine@cyclomedia.com

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