# Navigation Widget

**URL:** <https://community.cesium.com/t/navigation-widget/726>\
**Category:** CesiumJS\
**Created:** [September 17, 2013, 3:27pm UTC](https://community.cesium.com/t/navigation-widget/726 "2013-09-17T15:27:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ed\_Mackey](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ed_mackey/32/2226_2.png) [@Ed\_Mackey](https://community.cesium.com/u/Ed_Mackey)\
**Post date:** [September 17, 2013, 3:27pm UTC](https://community.cesium.com/t/navigation-widget/726/1 "2013-09-17T15:27:06Z")

</div>

Hi guys,

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

[https://github.com/macoda/cesium/tree/NavigationCamera](https://github.com/macoda/cesium/tree/NavigationCamera)

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](https://github.com/AnalyticalGraphicsInc/cesium/issues/1152) 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.

![RaviNavWidget.jpg](https://global.discourse-cdn.com/cesium/original/1X/024e704dbb06fdd2af5a75a1ba2f7612476cdb46.jpeg)

–Ed.

---

<div class="post-metadata">

**Author:** ![Wayne\_Eull](https://avatars.discourse-cdn.com/v4/letter/w/cab0a1/32.png) [@Wayne\_Eull](https://community.cesium.com/u/Wayne_Eull)\
**Post date:** [September 18, 2013, 8:06pm UTC](https://community.cesium.com/t/navigation-widget/726/2 "2013-09-18T20:06:15Z")

</div>

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.

-Wayne

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [September 18, 2013, 8:27pm UTC](https://community.cesium.com/t/navigation-widget/726/3 "2013-09-18T20:27:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Scott\_Hunter](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_hunter/32/2006_2.png) [@Scott\_Hunter](https://community.cesium.com/u/Scott_Hunter)\
**Post date:** [September 18, 2013, 9:57pm UTC](https://community.cesium.com/t/navigation-widget/726/4 "2013-09-18T21:57:15Z")

</div>

+1. An animated re-orientation to north by clicking the N was also a planned feature for the [2012 NORAD Tracks Santa](http://cesium.agi.com/demos/noradtrackssanta2012.html) application as well, but we ran of out time there, I think.

---

<div class="post-metadata">

**Author:** ![adam.dunnage](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@adam.dunnage](https://community.cesium.com/u/adam.dunnage)\
**Post date:** [September 26, 2013, 3:53pm UTC](https://community.cesium.com/t/navigation-widget/726/5 "2013-09-26T15:53:39Z")

</div>

Will this be in the October release or later?

---

<div class="post-metadata">

**Author:** ![Ed\_Mackey](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ed_mackey/32/2226_2.png) [@Ed\_Mackey](https://community.cesium.com/u/Ed_Mackey)\
**Post date:** [September 26, 2013, 7:00pm UTC](https://community.cesium.com/t/navigation-widget/726/6 "2013-09-26T19:00:51Z")

</div>

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

–Ed.

---

<div class="post-metadata">

**Author:** ![evans](https://avatars.discourse-cdn.com/v4/letter/e/59ef9b/32.png) [@evans](https://community.cesium.com/u/evans)\
**Post date:** [April 2, 2014, 2:47pm UTC](https://community.cesium.com/t/navigation-widget/726/7 "2014-04-02T14:47:49Z")

</div>

Has this been release yet?

- Deona

---

<div class="post-metadata">

**Author:** ![Anshika](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@Anshika](https://community.cesium.com/u/Anshika)\
**Post date:** [June 27, 2014, 10:41am UTC](https://community.cesium.com/t/navigation-widget/726/8 "2014-06-27T10:41:53Z")

</div>

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();

to

var radius = ellipsoid.MaximumRadius;

It was working fine with B27 version.

Please help.

---

<div class="post-metadata">

**Author:** ![varch02](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@varch02](https://community.cesium.com/u/varch02)\
**Post date:** [September 17, 2014, 6:50pm UTC](https://community.cesium.com/t/navigation-widget/726/9 "2014-09-17T18:50:00Z")

</div>

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

- V

---

<div class="post-metadata">

**Author:** ![Anshika](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@Anshika](https://community.cesium.com/u/Anshika)\
**Post date:** [September 18, 2014, 3:57am UTC](https://community.cesium.com/t/navigation-widget/726/10 "2014-09-18T03:57:48Z")

</div>

It is working fine with Cesium version 1.0

---

<div class="post-metadata">

**Author:** ![varch02](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@varch02](https://community.cesium.com/u/varch02)\
**Post date:** [September 23, 2014, 10:45pm UTC](https://community.cesium.com/t/navigation-widget/726/11 "2014-09-23T22:45:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![11145](https://avatars.discourse-cdn.com/v4/letter/1/9e8a1a/32.png) [@11145](https://community.cesium.com/u/11145)\
**Post date:** [September 29, 2014, 8:08am UTC](https://community.cesium.com/t/navigation-widget/726/12 "2014-09-29T08:08:15Z")

</div>

I download [https://github.com/macoda/cesium/tree/NavigationCamera](https://github.com/macoda/cesium/tree/NavigationCamera) and building .how can i use this widget? is there any examples? thanks.

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

---

<div class="post-metadata">

**Author:** ![Vanessa\_Archambault](https://avatars.discourse-cdn.com/v4/letter/v/53a042/32.png) [@Vanessa\_Archambault](https://community.cesium.com/u/Vanessa_Archambault)\
**Post date:** [September 29, 2014, 4:38pm UTC](https://community.cesium.com/t/navigation-widget/726/13 "2014-09-29T16:38:51Z")

</div>

That is the correct location of the repo.

To build the code follow the directions here:

[https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor's-Guide](https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor%27s-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

---

<div class="post-metadata">

**Author:** ![ravi\_agrawal](https://avatars.discourse-cdn.com/v4/letter/r/d9b06d/32.png) [@ravi\_agrawal](https://community.cesium.com/u/ravi_agrawal)\
**Post date:** [October 5, 2014, 11:12am UTC](https://community.cesium.com/t/navigation-widget/726/14 "2014-10-05T11:12:14Z")

</div>

Hi,

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.

Thanks,

Ravi

---

<div class="post-metadata">

**Author:** ![scottharrisoncutler](https://avatars.discourse-cdn.com/v4/letter/s/90db22/32.png) [@scottharrisoncutler](https://community.cesium.com/u/scottharrisoncutler)\
**Post date:** [October 14, 2014, 9:31pm UTC](https://community.cesium.com/t/navigation-widget/726/15 "2014-10-14T21:31:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [October 16, 2014, 4:05pm UTC](https://community.cesium.com/t/navigation-widget/726/16 "2014-10-16T16:05:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Zach\_Seaman](https://avatars.discourse-cdn.com/v4/letter/z/bb73d2/32.png) [@Zach\_Seaman](https://community.cesium.com/u/Zach_Seaman)\
**Post date:** [December 18, 2014, 6:29pm UTC](https://community.cesium.com/t/navigation-widget/726/17 "2014-12-18T18:29:39Z")

</div>

I’m wondering about this as well.

A version of the navigation widget seems to be working well on the [Indian Earth Observatory](http://bhuvan.nrsc.gov.in/globe/3d.php). After looking at the source code, I don’t quite understand how it works yet.

Any hints on how to add such functionality?

---

<div class="post-metadata">

**Author:** ![Anshika](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@Anshika](https://community.cesium.com/u/Anshika)\
**Post date:** [December 22, 2014, 5:48am UTC](https://community.cesium.com/t/navigation-widget/726/18 "2014-12-22T05:48:18Z")

</div>

The code ([https://github.com/macoda/cesium/tree/NavigationCamera](https://github.com/macoda/cesium/tree/NavigationCamera)) 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.

---

<div class="post-metadata">

**Author:** ![littlewolfee](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@littlewolfee](https://community.cesium.com/u/littlewolfee)\
**Post date:** [April 16, 2015, 3:00pm UTC](https://community.cesium.com/t/navigation-widget/726/19 "2015-04-16T15:00:41Z")

</div>

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 ([https://github.com/macoda/cesium/tree/NavigationCamera](https://github.com/macoda/cesium/tree/NavigationCamera)) 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!  
-Mark

What (if any) imports do

---

<div class="post-metadata">

**Author:** ![s.serge.b](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@s.serge.b](https://community.cesium.com/u/s.serge.b)\
**Post date:** [May 12, 2015, 7:14am UTC](https://community.cesium.com/t/navigation-widget/726/20 "2015-05-12T07:14:06Z")

</div>

If actual: [https://github.com/iSergio/cesium/tree/NavigationWidget](https://github.com/iSergio/cesium/tree/NavigationWidget)  
Worked with last Cesium version and worked corrected(On on the Indian Earth Observatory something wrong)

[Next page](https://community.cesium.com/t/navigation-widget/726.md?page=2)
