Search code examples
node.jsexpresscesiumjs

Cannot render css for cesium viewer from local server


I am trying to render the basic cesium viewer from a local development server using node.js with express (cesium 1.57 downloaded via npm). The page loads correctly when the CSS is loaded from cesium's servers, but not when I try to load it locally from my node_modules folder. I'd like to have the files server side so I can eventually change the display and certain sandbox settings for the infoboxes to suit the app I'd like to build.

This works:

index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>mapsTest</title>
    <script src="/scripts/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <!-- <link type=text/css href='/styles/widgets.css'></link> -->
  </head>
  <body>
    <div id="cesiumContainer" style="width: 100%; height:100%"></div>
    <script>
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzhjNjk0My04MzNjLTQyZTItOWRkOS1lZmQxYjE2YzM4NDYiLCJpZCI6MTAyMTYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5NjMzNjB9.DSk7rCttQeOvYyCnuesEtoiA8OUSGwitJaiBUUeqlxw';
      var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
  </body>
</html>

While this doesn't work:

index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>mapsTest</title>
    <script src="/scripts/Cesium.js"></script>
    <!-- <link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /> -->
    <link type=text/css href='/styles/widgets.css'></link>
  </head>
  <body>
    <div id="cesiumContainer" style="width: 100%; height:100%"></div>
    <script>
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzhjNjk0My04MzNjLTQyZTItOWRkOS1lZmQxYjE2YzM4NDYiLCJpZCI6MTAyMTYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5NjMzNjB9.DSk7rCttQeOvYyCnuesEtoiA8OUSGwitJaiBUUeqlxw';
      var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
  </body>
</html>

app.js: setting up the routes for getting the local css file

app.use('/styles', express.static(__dirname + '/node_modules/cesium/Build/CesiumUnminified/Widgets'));

app.get('/styles/widgets.css', function(req, res) {
    res.sendFile(__dirname + '/node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css');
});

I've tried copy and pasting the code that is pulled from the cesium css link into my local copy of widgets.css, though it still doesn't work, so I am wondering whether this has something to do with how node/express loads css files? There are no errors in the firefox or chrome consoles when I load the page.


Solution

  • I think you might just be missing rel="stylesheet" in the link there.

    Also type="text/css" is missing the double-quotes.