CODEWITHSUNDEEP
tomcatcesiumjs
Kiara
Kiara

Reputation: 117

Hosting Cesium Map on apache tomcat

I am new to Cesium 3D Map js. I want to integrate this with my existing application which uses apache tomcat as web server. i want to host cesium using this instead of node.js.

On there Getting Started tutorial and here, they have written that you just have to unzip the cesium.zip file and host it in your server.

I unziped the cesium.zip file in a folder named CesiumRoot, then i just dropped in the webapps folder of apache and started my server. But it didn't worked. I searched for it this problem and found nothing.

Please tell a procedure or any tutorial which tells how to host it in apache.

Upvotes: 3

Views: 1428

Answers (1)

CodeMonkey
CodeMonkey

Reputation: 23748

To deploy Cesium in Tomcat or a web-container other than node.js, you must unzip the Cesium distribution in the context of the webapp so the HTML pages, servlets, jsps, etc. can resolve the URLs to cesium resources as relative URLs.

Given a test page test.html with the Cesium package in a folder named "Cesium", the test.html page would refer to Cesium resources as following:

  <script src="Cesium/Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" type="text/css" href="Cesium/Build/Cesium/Widgets/widgets.css">

First, start with a simple hello world app to get started. Here is the full contents of test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <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="Cesium/Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" type="text/css" href="Cesium/Build/Cesium/Widgets/widgets.css">
  <style>      
      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'); 

 </script>
</body>
</html>

Upvotes: 1

Related Questions