Default widgets

As part of the library bundle you will gain access to a number of out of the box widgets made by Nextspace.

Enabling / Disabling

The widgets are enabled by default and created when you run ViewerUtils.InitViewer

You can opt out of them using the nextspaceWidgets: false param.

import * as Cesium from "cesium";
import { ViewerUtils } from "bruce-cesium";

const container = document.getElementById("VIEWER");
const viewer = new Cesium.Viewer(container);

// No Nextspace widgets will be created.
ViewerUtils.InitViewer({
    viewer: viewer,
    nextspaceWidgets: false
});

// Widgets will be made.
const data = ViewerUtils.InitViewer({
    viewer: viewer
});

// This is a key/value dictionary of enabled widgets you can access.
// The keys are not random and will stay consistent with the type of widget it is.
// For example "widgets.bookmarks" will let you access the bookmarks widget.
const widgets = data.widgets;

If you want specific widgets then you can create them in two parts.

import * as Cesium from "cesium";
import { ViewerUtils } from "bruce-cesium";

const container = document.getElementById("VIEWER");
const viewer = new Cesium.Viewer(container);

// First initialize the viewer without widgets.
ViewerUtils.InitViewer({
    viewer: viewer,
    nextspaceWidgets: false
});

// Then create the specific widgets.
const widgets = ViewerUtils.CreateWidgets({
    viewer: viewer,
    // If you don't pass "defaultState: false" then it will assume that any widget you don't specify should be created.
    defaultState: false,
    navCompass: true,
    branding: true,
    cursorBar: false,
    searchBar: false,
    infoView: false,
    bookmarks: true,
    // This is an optional param for the "bookmarks" widget so it can load available bookmarks.
    // Read further down to see alternative ways to see this property.
    viewId: "some_view_id",
});

If you want to disable a widget after it has been created then you can do so by accessing the widget directly.

Once disposed a widget will need to be recreated, so recall the creation function to return it.

import * as Cesium from "cesium";
import { ViewerUtils } from "bruce-cesium";

const data = ViewerUtils.InitViewer({
    viewer: viewer
});
const widgets = data.widgets;

// Let's kill the search bar widget.
widgets.searchBar.Dispose();

// Let's recreate it.
const widgets = ViewerUtils.CreateWidgets({
    viewer: viewer,
    // Set defaultState to be false so no other widgets are made.
    defaultState: false,
    // Only create the search bar widget.
    searchBar: true,
});

Cursor bar

The cursor bar widget is a toolbar found in the top-left of your screen. It provides a default set of 3 tools with a future intention of allowing custom tools to be added.

The tools available so far are:

Select: allows you to click Entities within the scene to select them.
Pan: stops the cursor from selecting Entities and allows you to pan the camera around the scene.
Measure: allows you to measure a point, polyline, or polygon.

Navigation compass

The navigation compass will let you rotate around the center of the camera view, turn the camera up and down, zoom in and out, and switch between 2D and 3D camera lenses.

Search bar

The search bar runs on the Cesium address API which means you will need the Cesium's access token set in order to use it.

import * as Cesium from "cesium";

const MY_KEY = "abc";
Cesium.Ion.defaultAccessToken = MY_KEY;

Bookmarks selection

The Bookmarks selection widget allows you to swap between Bookmarks for a particular Project View.

When you call ViewRenderEngine.Render it will automatically update the widget with the related View and Bookmark.

Alternatively you can interact with the widget programmatically and avoid the view render engine call.

import { ViewRenderEngine } from "bruce-cesium";

// Running a call like this will update the bookmarks widget.
ViewRenderEngine.Render({
    viewer,
    viewId: "some_view_id",
    bookmarkId: "some_bookmark_id",
    skipTransition: true
});

const bWidget = data.widgets.bookmarks;

// Load View, Bookmark, and potentially enable it.
bWidget.LoadViewId({
    viewId: "my_view_id",
    // If set then it will try enable this Bookmark when list is loaded.
    bookmarkId: "my_bookmark_id",
    // If true, the first Bookmark will be run automatically.
    // This is useful in the case bookmarkId is not set or found.
    // Default is true.
    runFirstBookmark: true,
    // Starts auto-playing the Bookmarks.
    // This will cycle bookmarks at a 5 seconds per Bookmark rate.
    // Default is false.
    autoPlay: false
});

// Change the selected Bookmark within the widget without rendering it.
bWidget.LastEnabledBookmarkId = "some_bookmark_id";

// Change the Project View (and loaded Bookmarks as result) without any rendering.
bWidget.ViewId = "some_view_id";

The JSFiddle below shows how to interact with the Bookmarks widget programmatically.

JSFiddle example

Info view

Info view is a panel that shows selected Entity details. Right now it'll show attributes and the default photo.

This panel will appear when there is at least one selected Entity, if multiple Entities are selected then the first one's data is visible.

If this widget is enabled alongside the cursor-bar then the user can click on the scene and view the Entity details.

The JSFiddle below shows how to disable the default Info View widget and start building your own.

JSFiddle example