Add Base 3D Map

app/.eslintrc.js

@@ -63,5 +63,5 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'warn',
     ...graphqlRules(),
   },
-  ignorePatterns: ['node_modules/', 'target/'],
+  ignorePatterns: ['node_modules/', 'target/', 'public/Cesium/'],
 }

app/.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/public/Cesium
 /.pnp
 .pnp.js
 

app/.prettierignore

@@ -1,3 +1,4 @@
 .next/
 target/
-node_modules/
+node_modules/
+public/Cesium

app/next.config.js

@@ -1,6 +1,55 @@
 const withTM = require('next-transpile-modules')(['geospatialdraw', 'ol']) // pass the modules you would like to see transpiled
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const path = require('path')
+const withCesium = (config, { isServer, webpack }) => {
+  config.node = { ...config.node, fs: 'empty' }
+  if (isServer) {
+    config.plugins.push(
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.join(
+              __dirname,
+              'node_modules/cesium/Build/Cesium/Workers'
+            ),
+            to: '../public/Cesium/Workers',
+          },
+          {
+            from: path.join(
+              __dirname,
+              'node_modules/cesium/Build/Cesium/ThirdParty'
+            ),
+            to: '../public/Cesium/ThirdParty',
+          },
+          {
+            from: path.join(
+              __dirname,
+              'node_modules/cesium/Build/Cesium/Assets'
+            ),
+            to: '../public/Cesium/Assets',
+          },
+          {
+            from: path.join(
+              __dirname,
+              'node_modules/cesium/Build/Cesium/Widgets'
+            ),
+            to: '../public/Cesium/Widgets',
+          },
+        ],
+      })
+    )
+  }
+  config.plugins.push(
+    new webpack.DefinePlugin({
+      // Define relative base path in cesium for loading assets
+      CESIUM_BASE_URL: JSON.stringify('/Cesium'),
+    })
+  )
+  return config
+}
 
 module.exports = withTM({
+  webpack: withCesium,
   publicRuntimeConfig: {
     GRAPHQL_BASE_URL: process.env['GRAPHQL_BASE_URL'],
   },

app/package.json

@@ -29,6 +29,7 @@
     "apollo-link-error": "^1.1.13",
     "apollo-link-http": "1.5.16",
     "apollo-utilities": "^1.3.3",
+    "cesium": "^1.69.0",
     "geospatialdraw": "0.5.7",
     "golden-layout": "^1.5.9",
     "graphql": "^14.0.2",
@@ -57,13 +58,15 @@
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-info": "^5.3.18",
     "@storybook/react": "^5.3.18",
+    "@types/cesium": "^1.67.5",
     "@types/react": "^16.9.34",
     "@typescript-eslint/parser": "^2.31.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-graphql-tag": "^2.5.0",
     "babel-preset-react-app": "^9.1.2",
     "chai": "^4.2.0",
+    "copy-webpack-plugin": "^6.0.1",
     "cross-env": "^7.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",

app/src/components/3d-map/3d-map.tsx

@@ -0,0 +1,25 @@
+import { Viewer } from 'cesium'
+import { useEffect } from 'react'
+const Map = () => {
+  useEffect(() => {
+    const viewer = new Viewer('cesiumContainer', {
+      animation: false,
+      fullscreenButton: false,
+      timeline: false,
+      geocoder: false,
+      homeButton: false,
+      navigationHelpButton: false,
+      sceneModePicker: false,
+      selectionIndicator: false,
+      infoBox: false,
+      baseLayerPicker: false,
+      imageryProvider: false,
+      mapMode2D: 0,
+    })
+  }, [])
+  return (
+    <div id="cesiumContainer" style={{ height: '100%', width: '100%' }}></div>
+  )
+}
+
+export default Map

app/src/components/3d-map/index.tsx

@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+const Map = dynamic(() => import('./3d-map'), {
+  ssr: false,
+})
+export default Map

app/src/components/visualizations/visualizations.js

@@ -13,7 +13,7 @@ import Histogram from '../histogram/histogram'
 import Inspector from '../inspector/inspector'
 import ResultTable from '../results/results'
 import Gallery from '../gallery'
-
+import OtherMap from '../3d-map'
 import {
   ClusterMap,
   RENDERER_STYLE,
@@ -45,6 +45,11 @@ const AddVisualization = () => {
       title: '2D Map',
       componentName: '2d-map',
     },
+    '3D Map': {
+      type: 'component',
+      title: '3D Map',
+      componentName: '3d-map',
+    },
     Table: {
       type: 'component',
       title: 'Table',
@@ -281,6 +286,7 @@ const Visualizations = props => {
     inspector: InspectorVis,
     table: TableVis,
     '2d-map': MapVis,
+    '3d-map': OtherMap,
     histogram: HistogramVis,
     gallery: GalleryVis,
   }

app/src/pages/_app.js

@@ -2,6 +2,7 @@ import React from 'react'
 import NextApp from 'next/app'
 import 'golden-layout/src/css/goldenlayout-base.css'
 import 'golden-layout/src/css/goldenlayout-light-theme.css'
+import 'cesium/Build/Cesium/Widgets/widgets.css'
 import { withApollo } from '../lib/apollo'
 import App from '../components/app'
 import AuthProvider from '../components/login/auth-provider'

app/src/pages/workspaces/[id].tsx

@@ -6,8 +6,11 @@ const Workspace = dynamic(() => import('../../components/workspace'), {
   loading: () => <LinearProgress />,
 })
 
+const WorkspacePage = props => <Workspace {...props} />
+WorkspacePage.getInitialProps = () => ({ title: 'Workspace' })
+
 export default () => {
   const router = useRouter()
   const id = router.query['id']
-  return <Workspace id={id} />
+  return <WorkspacePage id={id} />
 }