Using Cesium in MVC5 App

Support
#1

I’ve got an MVC 5 app that I’ve been working on. The database tables are all good to go, with one of them having latitude & Longitude coordinates for points that I wish to display on localized maps.

All I need to do now is get Cesium up and running in the app. This project will be hosted on Azure.

I have Visual Studio 2013 Pro and a Pay As You Go Azure account.

.

Is there a step by step of installing and using Cesium within a Microsoft ASP.NET MVC application? I’m just looking for a “getting started” in Cesium for MVC.

I’ve got over 32 years of programming experience, dating back to working in Assembly language to create video games on Apple II computers.

And mostly, I work in VB because I cannot stand those darn brackets in C#! Of course, languages are just tools in a toolbox, used to accomplish a task…

Thanks in advance for your reply!

#2

I really don’t know about this because I haven’t ever written any ASP, but I would follow the directions here to create the application: http://www.w3schools.com/aspnet/mvc_app.asp

In the New Project dialog box:

  • Open the Visual C# templates

  • Select the template ASP.NET MVC 3 Web Application

  • Set the project name to MvcDemo

  • Set the disk location to something like c:\w3schools_demo

  • Click OK
    When the New Project Dialog Box opens:

  • Select the Internet Application template

  • Select the Razor Engine

  • Select HTML5 Markup

  • Click OK
    After that, I would try to get the hello world application from cesium to load. I think the files from the cesium/build folder would go into the scripts folder of the project and then follow the suggestions for the css files in the following pages of the link above. From the little research I did, the index.html file of the hello world should basically load the same scripts as the index.cshtml file in your project.

The other alternative would be using an iFrame to contain the cesium instance, or something similar to that.

Hope that helps,

Scott

#3

I did an introduction to Cesium talk a few months ago at a local .net meetup, and as part of the presentation I demoed some apps I’ve built with MVC 5.

https://github.com/jumpinjackie/cesium-dotnet-examples

  • Jackie
#4

Jackie - thanks for sharing your example code. Please keep us posted on any Cesium ecosystem projects like this, and we’ll help spread the word about your work.

Patrick

#5

New question:

After unzipping the Cesium downloadable zip file, there are several folders and some files.

I’ve got my MVC app (it does quite a few other things) up and running on my Azure site, no problem, and have created a new Controller and a new View folder called CesiumHome which contains Index.vbhtml. (I have a page where the signed-in user can click a button which goes to CesiumHome–>Index).

And now, I’ve got the Cesium html code in the Index file. But nothing shows up. My question is, exactly what files and folders do I need to “Publish” to my Azure web app to make everything work? I’ve added the entire contents of the Cesium 116 “Source” folder, and put them into a Scripts–>Cesium folder that I created in my MVC app. What other files must I copy into my app, and where, so that when I “Publish” to my Azure account, they get copied over so that this will work?

The downloaded Cesium Zip contains the following folders:

Apps

Build

Source

Specs

ThirdParty

And then there’s the files in the root as well. I know that the contents of the zip are supposed to be installed on the server at the root level, but when working with MVC and Azure, it really doesn’t work that way. So my question is what folders/files do I need, and where do they go in the Project’s structure?

BTW, Thanks for the replies and the sample code.

#6

What you’re probably going to actually want is the bundled version of Cesium, under /Build/Cesium/. So, Cesium.js (should be around 1.5MB), plus the various “Assets”, “Widgets”, and “Workers” folders. Never touched any C# MVC projects, but handle it just how you would any other Javascript you were using in your website.

#7

Great! Thanks! That worked. The viewer shows up…

…But I now get an error:

“An error occurred while rendering. Rendering has stopped.”

Runtime error: Fragment shader failed to compile.

Error at ~Scripts/Cesium/Cesium.js…

(9, 1): Internal compiler error
(11, 1): Internal compiler error
(24, 9): Macro already defined
(24, 34): syntax error, unexpected TEXT_TOK, expecting IDENT_TOK or MACRO_DEFINITION

Any thoughts?

P.S. Thanks for your help, and in advance, for your reply.

#8

Oops. Never mind. Everything is working great in Firefox!

The error is due to running it in IE (“Publishing” to Azure automatically fires up IE, rather than my preferred Firefox browser. I need to find where to change this in VS 2013).

So all is good in Firefox, and I’m not too worried about IE.

Thanks for everyone’s help. Much appreciated!

Now, if only someone had written a reference manual for Cesium. I’m one who prefers a book over web-based help and documentation.

Best Regards,

Dominic

#9

I am seeing this too in IE11 in a new installation/system. We are working with IE11 all the time.
Anyone knows what is causing this?

Thanks, Willem

#10

Answer: get all updates for W8.1 :slight_smile: