NavigationWidge in Cesiumjs

CesiumJS
1

Hallo!

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

thanks

2

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

3

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

4

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

  1. november 5., csütörtök 2:17:14 UTC+1 időpontban Kevin Ring a következőt írta:
5

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

6

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

7

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

8

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

9

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

10

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:

Hello World! @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; 
  }

Thanks,

Alberto

11

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

12

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

13

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-----

14

Kevin,

I just published the cesium-navigation plugin in github.

This is the link:

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

Thanks,

Alberto

15

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

1 Like
16

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?

17

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

18

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

19

These are the issues that i am getting

20

@Alberto

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