Navigation Widget

Hi guys,

We’re nearing the end of Google Summer of Code, and Ravi Agrawal (@macoda) has been working on a camera navigation widget on the “NavigationCamera” branch on his fork:

If you have a minute and are interested in camera control in Cesium, take a look. It offers a number of on-screen controls, and the compass ring is both a control and a display that Cesium users didn’t previously have access to (other than as viewers of last year’s Santa project, which had a small closed-source compass on it). The zoom and tilt features may prove easier for new users to find and use.

It’s not quite ready to come into master yet: Ravi is still working on documentation & tests, there’s an issue with the new compass API that it uses, and it introduces a “flat” style of appearance that hasn’t been applied to the other controls yet. But my hope is that doc & tests will get done before the firm pencils down date next Monday, and Dan might be able to stomp the API bug quickly. The general re-styling of all of Cesium’s widgets is separate from GSoC and will continue outside of that effort.

Anyway take a look, I hope you like the progress so far.



I like it a lot, very awesome! Good work Ravi and Ed!

I have a general question. In the middle ring where there is the ‘N’ for north, does clicking on that ‘N’ do anything? A common issue I have seen people struggle with is reorienting north after navigating around. It would be nice to have this functionality in the navigation widget.


I like that idea as well. Quickly being able to orient to north seems like a useful feature.

+1. An animated re-orientation to north by clicking the N was also a planned feature for the 2012 NORAD Tracks Santa application as well, but we ran of out time there, I think.

Will this be in the October release or later?

Not the October release, sorry. There’s some re-styling needed to make the widget fit well with the rest.


Has this been release yet?

  • Deona

How do i make it work with B29 version, Its not giving any error also but not working. I changed only two lines -
In NavigationViewModel.js

var radius = ellipsoid.getMaximumRadius();


var radius = ellipsoid.MaximumRadius;

It was working fine with B27 version.

Please help.

I am also interested in implementing this. Has there been any more progress?

- V

It is working fine with Cesium version 1.0

I have the NavigationCamera branch running but I notice it isn’t supporting 3D mode. Does the 3D mode integration work for anyone else?

I download and building .how can i use this widget? is there any examples? thanks.

在 2013年9月17日星期二UTC+8下午11时27分06秒,Ed Mackey写道:

That is the correct location of the repo.

To build the code follow the directions here:'s-Guide

I have recently built that instance with the navigation widget but I can not get the widget to interact correctly in 3d mode. It only works for me in 2d and columbus mode. I’ve been trying to get an answer from the creators if it is or has ever been functional in 3d mode, but no one has responded. Let me know if you get it running for 3d mode!

Good luck!

  • V


I was working on this branch but unfortunately it was not finished. Also it has not been updated for a long long time.

I am caught up with a few things right now but I will try to get this running in a couple of weeks time.



Is there a planned date to add this widget to the main line of code?

There’s no set schedule as to when it will be available and I do not know if Ravi is actively working on it. That being said, we always welcome pull requests so if someone wants to fork it and try to finish it, we would be happy to have the help.

I’m wondering about this as well.

A version of the navigation widget seems to be working well on the Indian Earth Observatory. After looking at the source code, I don’t quite understand how it works yet.

Any hints on how to add such functionality?

The code ( works fine after making small changes in NavigationViewModel.js

  1. this._ellipsoid.getMaximumRadius() changed to this._ellipsoid.maximumRadius

  2. _cameraController._camera to _cameraController

  3. center = ray.getPoint(intersection.start, tilt3DCenter) to center = Ray.getPoint(ray,intersection.start)

  4. Added variable res

var res = new Cartesian3();

var angle = (minHeight * 0.25) / (Cartesian3.magnitude(Cartesian3.subtract(center, camera.position,res)));

  1. if (mode === SceneMode.SCENE3D) Changed to ‘else’

  2. In Navigation.js

Add viewModel.update(); as last line in function ‘setPointerFromMouse’

Hope it helps.

Hi there!

I know this is an older topic, but I am trying to find a solution to adding a north arrow to Cesium and this seems to be the only good solution I have found. Unfortunately, I am having trouble adding it to the current Cesium build.

I downloaded the files at the link ( in the "Source/Widgets/Navigation" folder which consisted of "Navigation.css", "Navigation.js", and "NavigationViewModel.js" and added them to a new "Source/Widgets/Navigation" folder in the newest build. But I am not sure how to actually add the widget to the build. In my HTML file I have a script tag sourcing "Build/Cesium/Cesium.js" but I can't seem to figure out how to add the Navigation Widget.

Can someone point me in the right direction?

Thanks a lot!

What (if any) imports do

If actual:
Worked with last Cesium version and worked corrected(On on the Indian Earth Observatory something wrong)