rudifa / cesium-lit-demo Goto Github PK

View Code? Open in Web Editor NEW

2.0 2.0 1.0 247 KB

Objective: integration of the Cesium.Viewer into a Lit component

HTML 87.48% JavaScript 12.52%

cesium lit vite

cesium-lit-demo's People

Contributors

Stargazers

Watchers

Forkers

olange

cesium-lit-demo's Issues

Progress on branch try-embed-cesium-viewer-2

Progress on branch try-embed-cesium-viewer-2 as of commit ae8b5ce

CesiumViewer is instantiated within the lit component <cesium-viewer2>
I don't know how to import styles from ./node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css, so I inserted the css code from widgets.css into the new file src/widgets.js thus:

import {css} from 'lit';
export const widgetStyles = css`
  /* Source/Widgets/shared.css */
...
  /* Source/Widgets/widgets.css */
`;

Now the demo looks better, however a few issues remain open

on page load, an info box text area appears underneath the main viewer area
a click on 'x' closes it, which brings the bottom toolbar into its proper place
the <div id="cesiumContainer2">div 2: #cesiumContainer2</div> is given a red border and a pink background, for debugging
while its text is displayed where expected, the background and the border are strangely broken up and seen above the top and below the bottom of the other displayed items

How and what to import from "cesium": "^1.98.1"?

At this stage the project includes a dependency on "cesium": "^1.98.1", but it does not use it.

Instead, it sources cesium code as in the Quick Start demo

    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.98/Build/Cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.98/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet" />

TODO: clarify what should be imported from node_modules/cesium

Cesium CreditDisplay overlay lacks styles when instantiated from Lit component

The issue is visible on the branch main, commit 6f8df87, tag cesium-viewer-in-lit-component-credits-styles-missing (the first screenshot below).

@olange identified the problem source and provided a workaround in PR #11:

Problem lies in source CesiumJS › packages › engine › Source › Scene › CreditDisplay; it attaches the generated CSS to document.head— which won't pierce the ShadowDOM:

function appendCss() {
  let style = "";
  style += addStyle(".cesium-credit-lightbox-overlay", {
    display: "none",
    "z-index": "1", //must be at least 1 to draw over top other Cesium widgets
    position: "absolute",
    top: "0",
    left: "0",
    width: "100%",
    height: "100%",
    "background-color": "rgba(80, 80, 80, 0.8)",
  });
  …
  const head = document.head;
  const css = document.createElement("style");
  css.innerHTML = style;
  head.insertBefore(css, head.firstChild);
}

As a workaround, @olange copied the generated CSS styles from the devtools Elements and pasted them into our file cesium-lit.js:

/* add styles for the credit-lightbox overlay */
        .cesium-credit-lightbox-overlay {
          display: none;
          z-index: 1;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(80, 80, 80, 0.8);
        }
...

Details:

branch main, commit 6f8df87, tag cesium-viewer-in-lit-component-credits-styles-missing : the CreditsDisplay box lacks the corresponding styles, so it is displayed after the main view

branch main, as of commit 2cefa0d, tag add-credits-styling-workaround looks good, the CreditsDisplay box is overlaid on top of the main view

Can we integrate completely the cesium viewer into a Lit component?

Project state as of commit 83b7766 on branch main:

added a couple of zoom controls in a lit component (this works)
the CesiumViewer is instantiated in a separate container div

The demo (npm run dev) instantiates the viewer

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain(),
});

which then draws into

<div id="cesiumContainer"></div>

Manifestly, the viewer expects the container to be in the main DOM window; there is no obvious way to tell the viewer to render into the shadow DOM of a Lit component.

In this first integration attempt, the code that initializes the viewer and interacts with it was moved into the cesium-viewer.js file, thus enabling the component <cesium-viewer/> to interact with it.

However, the definition of the container div has to remain in the index.html file

  <body>
    <div style="margin: 10px">
      <cesium-viewer></cesium-viewer>
      <div id="cesiumContainer"></div>
    </div>
  </body>

rudifa / cesium-lit-demo Goto Github PK

cesium-lit-demo's People

Contributors

Stargazers

Watchers

Forkers

cesium-lit-demo's Issues

Progress on branch try-embed-cesium-viewer-2

How and what to import from "cesium": "^1.98.1"?

Cesium CreditDisplay overlay lacks styles when instantiated from Lit component

Can we integrate completely the cesium viewer into a Lit component?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent