Hey there. So I am currently learning the JavaScript API.
I have a map where I am using a time slider to show the progression of Oil and Gas Development in Utah.
This is what I have:
I need to add events to the timeline, 'The Great Recession is just an example, but I would like it to be above the bar and perhaps more space above the timeline bar. I've been playing with the CSS margins and can't get it to go above it. This might be a little more with CSS than JavaScript, but any help would be appreciated.
CSS code:
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.sample-slider {
position: absolute;
left: 5%;
right: 5%;
bottom: 20px;
}
#timeSlider .custom-labels{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 8px;
color: blueviolet;
margin-top: 35px;
}
#timeSlider .custom-ticks{
background-color: black;
width: 1px;
height: 20px;
}
#timeSlider .custom-labels2{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 12px;
font-weight: bold;
color: black;
margin-top: 10px;
}
#timeSlider .custom-ticks2{
background-color: black;
width: 1px;
height: 5px;
margin-top: 5px;
}
JavaScript Code:
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/TimeSlider"
], function (WebMap, MapView, TimeSlider) {
const map = new WebMap({
portalItem: {
id: "1e9a6937760e46d3bd047c108ebf8246"
}
});
const view = new MapView({
container: "viewDiv",
map: map
});
const events = [
{name:`Great
Recession`, date: 2008},
{name: `Covid-19
Pandemic`, date: 2020}
];
const timeSlider = new TimeSlider({
container: "timeSlider",
mode: "time-window",
fullTimeExtent: {
start: new Date(1940,0,1),
end: new Date(2022,0,1)
},
tickConfigs: [{
mode: "position",
values: [
new Date(1940, 0, 1), new Date(1950, 0, 1), new Date(1960, 0, 1), new Date(1970, 0, 1),
new Date(1980, 0 , 1), new Date(1990, 0, 1), new Date(2000, 0, 1), new Date(2010, 0, 1)
].map((date) => date.getTime()),
labelsVisible: true,
labelFormatFunction: (value) => {
const date = new Date(value);
return `${date.getUTCFullYear()}`;
},
tickCreatedFunction: (value, tickElement, labelElement) => {
tickElement.classList.add("custom-ticks2");
labelElement.classList.add("custom-labels2");
}
}, {
mode: "position",
values: events
.map((event) => new Date(event.date, 0, 1))
.map((date) => date.getTime()),
labelsVisible: true,
labelFormatFunction: (value) => {
const event = events.find(
(s) => new Date(s.date, 0, 1).getTime() === value
);
return event.name;
},
tickCreatedFunction: (value, tickElement, labelElement) => {
tickElement.classList.add("custom-ticks");
labelElement.classList.add("custom-labels");
}
}
]
});
view.ui.add(timeSlider)
});
My HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>OGM Time Lapse</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/css/main.css">
<link rel="stylesheet" href="main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script type = "text/javascript" src="main.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<div id="timeSlider" class = "sample-slider"></div>
</body>
</html>
Thanks!
