The clock in Set realistic env. Settings static?

55
2
12-02-2019 11:47 PM
Occasional Contributor

Hi using the exact same script, as on https://developers.arcgis.com/javascript/latest/sample-code/scene-environment/index.html the clock is static at 12:00, and you can’t turn it.

I get some errors in the console, directly to the clock.js, but I don’t know where to go from here.

Anyone got this working?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Set realistic environment settings in a SceneView - 4.13</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.13/"></script>

<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/SceneLayer",
"esri/widgets/Home",
"Clock.js"
], function(Map, SceneView, SceneLayer, Home, Clock) {
var map = new Map({
basemap: "satellite",
ground: "world-elevation",
layers: [
new SceneLayer({
portalItem: {
id: "b343e14455fe45b98a2c20ebbceec0b0"
}
})
]
});

var view = new SceneView({
map: map,
container: "viewDiv",

// position in Brest, France
camera: {
// autocasts as esri/Camera
position: {
// autocasts as esri/geometry/Point
x: -500180.363,
y: 6170505.212,
z: 27.623,
spatialReference: {
// autocasts as esri/geometry/SpatialReference
wkid: 102100
}
},
heading: 204.85,
tilt: 104.94,
fov: 80
},

environment: {
atmosphere: {
// creates a realistic view of the atmosphere
quality: "high"
},
lighting: {
date: new Date(),
directShadowsEnabled: true,
// don't update the view time when user pans.
// The clock widget drives the time
cameraTrackingEnabled: false
}
},

ui: {
components: ["attribution"]
}
});

// configure the UI

var homeWidget = new Home({
view: view
});
view.ui.add(homeWidget, "top-right");

view.ui.add("timeInfo", "top-left");

var clock = new Clock({
el: "clock",
skin:
"https://developers.arcgis.com/javascript/latest/sample-code/scene-environment/live/clock.svg",
time: view.environment.lighting.date.getTime()
});
view.ui.add("clock", "bottom-right");

// update the time of the view when the clock time changes
var timeField = document.getElementById("timeField");
var updateTimefield = function() {
timeField.innerHTML = view.environment.lighting.date.toLocaleString();
};
updateTimefield();
clock.on("time-change", function(time) {
view.environment.lighting.date = time;
updateTimefield();
});
});
</script>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

#timeInfo {
color: white;
}

#timeField {
font-size: 20px;
}

#timeLocation {
font-size: 30px;
}

#clock {
width: 220px;
height: 220px;
}

.esri-ui-corner .esri-component {
box-shadow: inherit;
}
</style>
</head>

<body>
<div id="viewDiv" class="esri-widget">
<div id="timeInfo">
<span id="timeLocation">Brest, France</span> <br />
<span id="timeField"></span>
</div>
<div id="clock"></div>
</div>
</body>
</html>
Reply
0 Kudos
2 Replies
Occasional Contributor

I’ve copied my own script, with the clock included, into the sandbox, and that works. It sill not works outside the sandbox. Am I missing a node.js package or something? What is required to run the clock??

Reply
0 Kudos
Occasional Contributor

I’ve got it to work. Copying the SVG creating the clock, and placed it locally inside node.js then it worked