Geertjan's Blog

  • June 13, 2016

Visualizing 3DCityDB in an Oracle JET Application

Geertjan Wielenga
Product Manager

Let's take 3dcitydb-web-map and integrate it into an Oracle JET application, so that the map ends up contained within a module (defined by Require.js) in the helpful architecture that Oracle JET provides out of the box, all of it free and open source.

At the end of the instructions that follow, you'll have a browser-based application defined by Oracle JET and containing a 3D map:

Take the following steps:

  1. Clone everything from this repo: https://github.com/3dcitydb/3dcitydb-web-map.git

  2. Create a standard HTML/JavaScript application and let's start by setting up a small sample application that reorganizes the various pieces from the repo above into a working scenario. What we'll do is recreate the "b3dmBerlinExample" example, which is in the "examples" folder of the repo above. Start by copying the complete "index.html" from that example and pasting it over the default "index.html" file in your application, copy the folders as you see them below and change the references in the "index.html" file to point to the new locations.

    If the above works, i.e., you can run it and see a 3D map, everything's good and you can continue to the next step wherein you'll port the above structure into module within an Oracle JET application.

  3. The aim now is to migrate the standard HTML/JavaScript application above to an Oracle JET application. The starting point for the below is the "Quick Start Basic" template, which provides an out of the box architecture, including several modules.

    To get to the above point, copy the files from your earlier application, following the structure shown in the screenshot above.

  4. In the "requirejs.config" block, add the following to the "paths":

    'cesium': 'libs/Cesium-1-14-3dtiles/Cesium',
    'webmap': '3dcitydb-web-map',
    'b3dmlayer': 'b3dmlayer'
  5. Define the view as follows:

    <STYLE TYPE="text/css">
    @import url(js/libs/Cesium-1-14-3dtiles/Widgets/widgets.css);
    <div id="cesiumContainer"></div>
  6. Here is the viewModel, i.e., the JavaScript side of the JET module:

    define(['ojs/ojcore', 'knockout', 'cesium', 'webmap', 'b3dmlayer'],
    function (oj, ko, cesium, webmap, b3dmlayer) {
    function mainContentViewModel() {
    var self = this;
    self.handleAttached = function () {
    Cesium.BingMapsApi.defaultKey = someNumber'
    var terrainProvider = new Cesium.CesiumTerrainProvider({
    "url": "./terrain",
    "requestVertexNormals": true
    var viewer = new Cesium.Viewer('cesiumContainer', {baseLayerPicker: false,
    terrainProvider: terrainProvider
    var extent = new Cesium.Rectangle.fromDegrees(1,1,1,1);
    return new mainContentViewModel();

And that's all you need to do to get started with 3dcitydb-web-map in an Oracle JET application.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.