Project views

Project views are saved configurations for what is available to be rendered by a user.

For example you may import a few files into your account, then setup a project view to showcase or manage one or many of those imports.

Project views contain bookmarks, these are saved views of the data. Think of them like powerpoint slides that show where to look and what data is enabled.

As a developer you have the choice of creating and rendering project views, or handling what they do yourself.

Below will be examples on how to load what project views and bookmarks exist in your account, then how to render them.

JSFiddle example

Listing available data

Project views can be restricted by login so please ensure to allow the user to login before requesting this information.

import { ClientFile, ENVIRONMENT, IDictionary, ProjectView, ProjectViewBookmark } from "bruce-models";

// Setup global defaults.
ENVIRONMENT.PARAMS = {
    ...ENVIRONMENT.PARAMS,
    accountId: "your-account-id",
    // Important if your Project Views are not set to be publicly accessible.
    sessionId: "your-session-id"
};

/**
 * Warning: This will not include information on Project Views that weren't accessible due to permissions.
 */
ProjectView.GetList({}).then((data) => {
    const views = data.views;
    console.log("Views", views);
}).catch((e) => {
    console.error(e);
});

const someViewId = "some-view-id";
ProjectViewBookmark.GetList({
    viewId: someViewId
}).then((data) => {
    const bookmarks = data.bookmarks;
    console.log("Bookmarks", bookmarks);

    // We can loop through and prepare the thumbnail urls.
    // You can then use those urls to display preview images for the user.
    const thumbnails: IDictionary<string> = {};
    bookmarks.forEach((bookmark) => {
        if (!bookmark["Screenshot.ClientFile.ID"]) {
            return;
        }
        thumbnails[bookmark.ID] = ClientFile.GetUrl({
            fileId: bookmark["Screenshot.ClientFile.ID"],
            viaCdn: true
        });
    });
}).catch((e) => {
    console.error(e);
});

Rendering

Rendering a project view requires you to know the ID of both the view and bookmark you're interested in.

Additionally it is recommended to set skipTransition to true for the first bookmark render.

This will skip the camera movement from its default position.

import { ENVIRONMENT } from "bruce-models";
import { ViewRenderEngine, ViewerUtils } from "bruce-cesium";
import * as Cesium from "cesium";

// Setup global defaults.
ENVIRONMENT.PARAMS = {
    ...ENVIRONMENT.PARAMS,
    accountId: "your-account-id",
    // Important if your Project Views are not set to be publicly accessible.
    sessionId: "your-session-id"
};

const viewId = "some-view-id";
const bookmarkIds = [
    "some-bookmark-id",
    "some-other-bookmark-id",
    "another-bookmark-id"
];

// Ensure this is a fixed height box or else Cesium viewer will keep expanding it.
const container = document.getElementById("VIEWER");

// Replace with your own or else you are at risk of losing bing-maps and cesium terrain access.
const CESIUM_DEFAULT_TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiODI1OWQyZC0wYzdlLTRlOTctODFlOC1kYjIwOGYzOWE0NGIiLCJpZCI6MTE3NDg0LCJpYXQiOjE2NzAzODczOTR9.sx0EZdD-Y33FQ7gB_R3CkTsk3KhNpODoQGrnpvSH4UQ";
Cesium.Ion.defaultAccessToken = CESIUM_DEFAULT_TOKEN;

const viewer = new Cesium.Viewer(container, {
    // Setting some defaults in case the current Cesium token is dead.
    terrainProvider: new Cesium.EllipsoidTerrainProvider(),
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        enablePickFeatures: false
    })
});

ViewerUtils.InitViewer({
    viewer: viewer,
    // True if you want to kill the default Cesium widgets.
    // Eg: Their timeline widget.
    destroyWidgets: false,
    styleContainer: true
});

// Example on how to cycle through bookmarks.
// You can reference this and instead allow the user to click through bookmarks.
let currentBookmarkId: string = "";
const doRender = async () => {
    const firstRender = !currentBookmarkId;
    const index = bookmarkIds.indexOf(currentBookmarkId);
    if (index === -1) {
        currentBookmarkId = bookmarkIds[0];
    }
    else {
        currentBookmarkId = index > bookmarkIds.length - 2 ? bookmarkIds[0] : bookmarkIds[index + 1];
    }

    await ViewRenderEngine.Render({
        viewer,
        bookmarkId: currentBookmarkId,
        viewId: viewId,
        // Skip the transition for first bookmark render to avoid flying every page reload!
        skipTransition: firstRender
    });
};

setInterval(() => {
    doRender();
}, 5000);