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.
I think you might just be missing rel="stylesheet"
in the link there.
Also type="text/css"
is missing the double-quotes.