NavigationWidge in Cesiumjs

Imre Antal

unread,

Nov 4, 2015, 12:23:20 PM11/4/15

to cesium-dev

Hallo!

I would like a simple sample how to use (implement) Cesium Navigation Widget using cesiumjs

thanks

Hannah Pinkos

unread,

Nov 4, 2015, 3:36:29 PM11/4/15

to cesium-dev

Hello,

There isn't currently a navigation widget in Cesium. This type of widget is not trivial to implement. You have to update the camera position/orientation based on how the user interacts with your widget.

It's on our radar for things we want to implement, but we have higher priorities right now. If you are interested in implementing your own, let me know and I would be happy to give you an idea of how to get started.

Best,

Hannah

Kevin Ring

unread,

Nov 4, 2015, 8:17:14 PM11/4/15

to cesiu...@googlegroups.com

You could consider using TerriaJS, which I like to think of as a souped-up version of Cesium Viewer:

https://github.com/TerriaJS/terriajs

It includes a compass/navigation widget, which you can try out here:

http://nationalmap.gov.au

TerriaJS is built on Cesium, of course, but also provides a fallback to Leaflet on systems that can't run Cesium.

You're also welcome to just grab the code for use in your own application:

https://github.com/TerriaJS/terriajs/blob/master/lib/ViewModels/NavigationViewModel.js

https://github.com/TerriaJS/terriajs/blob/master/lib/Views/Navigation.html

Kevin

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

www.kotachrome.com/kevin

Imre Antal

unread,

Nov 5, 2015, 2:10:30 AM11/5/15

to cesium-dev

Hallo Hannah, hallo Kevin

Best thanks for your prompt answer.
The Australian maps looks very good. I will check the Terriajs.

I have a project for some carribian islands (stbarth-3d-islands.com) based on google earth.
google earth will be deprecated, I tried to find another 3d map system.

I hope now the terriajs will be the suitable 'object'

Regards

Imre

Hannah Pinkos

unread,

Nov 5, 2015, 12:52:47 PM11/5/15

to cesium-dev

Looks like a really neat project Imre! Keep us posted on your progress. We love featuring interesting projects on our website, especially if you can share your experience migrating from google earth.

-Hannah

Scott Haynes

unread,

Nov 5, 2015, 5:16:29 PM11/5/15

to cesium-dev

This is exactly what I was wanting to include in our project. Are there license for that project?

I'm currently using the built version of 1.14. Would I just include the js file and follow the build process to include the widget? Or is there a more simple way to include it?

Thanks, Scott

Kevin Ring

unread,

Nov 5, 2015, 5:23:52 PM11/5/15

to cesiu...@googlegroups.com

The license of TerriaJS is the same as Cesium (Apache 2.0) so use it however you like.

TerriaJS uses CommonJS modules and Browserify rather than CommonJS modules and RequireJS, so you can't just copy the source files into Cesium and build. If you're not actually using TerriaJS, you'll need to do some work to adapt the compass to work in your project.

Kevin

Scott Haynes

unread,

Nov 24, 2015, 12:26:23 PM11/24/15

to cesium-dev

I think we're going to add a task to bring the navigation widget back into the main Cesium branch. Does anyone want us to add this as a branch, or should we just fork the repo and add it on our branch?

Scott

Kevin Ring

unread,

Nov 24, 2015, 7:13:14 PM11/24/15

to cesiu...@googlegroups.com

Hi Scott, are you asking me? I'm not sure I understand the question. If you're incorporating the TerriaJS compass/navigation widget into Cesium, I think it would be great to do that in a clean branch of Cesium master so that you can pull-request it into Cesium for real. The main hurdle - other than adapting to code to work within Cesium (which shouldn't be too hard) - is to make it work with Cesium's 2D and 2.5D views.

Kevin

Alberto Acevedo

unread,

Nov 30, 2015, 10:14:38 PM11/30/15

to cesium-dev

Kevin,

I adapted the TerriaJS navigation (compass, zoom in/out, distance scale) to work with Cesium version 1.15. I converted All the required modules to requireJs. The navigation works nice in 3D, but as you mentioned, it needs some work in 2D and Columbus view modes. I can share my modifications if anyone is interested.

As a demo I added the navigation to the Cesium's HelloWorld.html as follows:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
   <script src="../ThirdParty/requirejs-2.1.20/require.js"></script>
   <script src="../ThirdParty/terriajs/NavigationStartup.js"></script>
<style>
      @import url(../Build/Cesium/Widgets/widgets.css);
       @import url(../ThirdParty/terriajs/lib/Styles/css/terria.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

      }
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
require(['Navigation'], function (Navigation) {
        Navigation.initialize(document.getElementById('cesiumContainer'), viewer);
                });
</script>
</body>
</html>

Thanks,

Alberto

Kevin Ring

unread,

Nov 30, 2015, 10:45:02 PM11/30/15

to cesiu...@googlegroups.com

Glad to hear you got it working, Alberto! I think other folks here would be interested in it, if you're willing to put it up on GitHub somewhere. Perhaps it could even be added to the plugins page?

http://cesiumjs.org/plugins/index.html

Scott Haynes

unread,

Dec 2, 2015, 6:25:26 PM12/2/15

to cesium-dev

Kevin, I was just asking in general, but I'm glad to hear that someone got this working. I didn't think about the other views, and that is a good point. For our application, we only need the 3D view, so that will work nicely for us. I would love to get access to the code, can you put that on a branch?

Thanks,

Scott

vasc...@aol.com

unread,

Dec 3, 2015, 12:00:06 AM12/3/15

to cesiu...@googlegroups.com

Scott, Kevin

I'm getting ready to publish the Cesium-navigation plugin in GitHub. I added Gulp to build a minified version of the plugin. The plugin has dependencies on the following open source libraries:
requirejs,
Knockout,
hammerjs,
text.js,
markdown-it,
and sanitizer-bundle

I should be ready to publish the plugin by early next week.

Thanks,

Alberto

sage-----
From: Scott Haynes <scottn...@gmail.com>
To: cesium-dev <cesiu...@googlegroups.com>
Sent: Wed, Dec 2, 2015 6:25 pm
Subject: Re: [cesium-dev] Re: NavigationWidge in Cesiumjs

Alberto Acevedo

unread,

Dec 6, 2015, 9:47:48 PM12/6/15

to cesium-dev

Kevin,

I just published the cesium-navigation plugin in github.

This is the link:

https://github.com/alberto-acevedo/cesium-navigation

I included a snapshot of the HelloWorld Cesium map after integrating the plugin.

Thanks,

Alberto

Alberto Acevedo

unread,

Dec 7, 2015, 9:21:51 PM12/7/15

to cesium-dev

This is the online demo of Cesium using the plugin:

http://alberto-acevedo.github.io/cesium-navigation/

The next thing to do is to submit the plugin to the Cesium's plugin page .for review.

Thanks,

Alberto

man...@vizexperts.com

unread,

Mar 8, 2018, 4:49:37 AM3/8/18

to cesium-dev

I am trying to integrate navigation to my application but i am getting such issues:

Module not found: Error: Can't resolve 'CesiumNavigation'
Module not found: Error: Can't resolve 'Core/defined'

Module not found: Error: Can't resolve 'require-less/less'................... can you please help?

vasc...@aol.com

unread,

Mar 8, 2018, 10:27:21 AM3/8/18

to cesiu...@googlegroups.com

Manish,

What version of Cesium are you using?

Are you using the standalone or the AMD compatible edition?

More detailed information about how you are integrating the plugin will be helpful.

Thanks,

Alberto

-----Original Message-----
From: manish <man...@vizexperts.com>
To: cesium-dev <cesiu...@googlegroups.com>
Sent: Thu, Mar 8, 2018 4:49 am
Subject: Re: [cesium-dev] Re: NavigationWidge in Cesiumjs

man...@vizexperts.com

unread,

Mar 9, 2018, 12:19:23 AM3/9/18

to cesium-dev

cesium version 1.41 AMD edition

I am adding cesium navigation plugin using require after requiring cesium and extending to viewer as instructed by you in your github repo.

but i am getting errors like no core/defined, core/defined-properties, no require-less etc.

I didn't get it from where its getting these dependencies. I looked at your example, core folder is there but defined, defined-properties, developer-errors are not there but still its working fine.

I have also tried to add minified version of plugin but its giving no weakmap error

man...@vizexperts.com

unread,

Mar 9, 2018, 3:35:37 AM3/9/18

to cesium-dev

These are the issues that i am getting

manish

unread,

Mar 9, 2018, 11:47:42 AM3/9/18

to cesium-dev

@Alberto

please help. still, I am not able to resolve the issues

Message has been deleted

vasc...@aol.com

unread,

Mar 12, 2018, 8:25:54 PM3/12/18

to cesiu...@googlegroups.com

Manish,

To change the color of outer ring you have to modify the outer ring style fill color.' The style is located here:

https://github.com/alberto-acevedo/cesium-navigation/blob/development/Source/Styles/Navigation.less

Take a look to this sample in SandCastle to display the lat long coordinates of the mouse cursor on the map.

https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases

Alberto

-----Original Message-----
From: manish <man...@vizexperts.com>
To: cesium-dev <cesiu...@googlegroups.com>
Sent: Mon, Mar 12, 2018 4:16 pm
Subject: Re: [cesium-dev] Re: NavigationWidge in Cesiumjs

how to change the colour of outer ring of navigation widget?

and also I want lat long values on mouse hover on terrain, how to do that?

On Tuesday, December 8, 2015 at 7:51:51 AM UTC+5:30, Alberto Acevedo wrote:

This is the online demo of Cesium using the plugin:

http://alberto-acevedo.github.io/cesium-navigation/

The next thing to do is to submit the plugin to the Cesium's plugin page .for review.

Thanks,

Alberto

man...@vizexperts.com

unread,

Mar 13, 2018, 5:22:53 AM3/13/18

to cesium-dev

Thank you alberto-acevedo

Reply all

Reply to author

Forward