Adding Ticks above Time Slider

280
2
Jump to solution
08-13-2021 12:35 PM
cschooley
New Contributor III

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:

cschooley_0-1628883048575.png

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!

0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

Hi there, 

You should be able to set the top margins to negative numbers to have those ticks and labels above the bar line. Perhaps something like this could work? I made css changes using your test code.

Hope this helps,

-Undral

View solution in original post

2 Replies
UndralBatsukh
Esri Regular Contributor

Hi there, 

You should be able to set the top margins to negative numbers to have those ticks and labels above the bar line. Perhaps something like this could work? I made css changes using your test code.

Hope this helps,

-Undral

View solution in original post

cschooley
New Contributor III

Awesome! Thank you. I had figured out how to get the labels and ticks above the line but couldn't figure out the extra space above the timeline. Thank you for:

.esri-time-slider__slider .esri-slider {
    margin-top: -5px !important;
}

It solved that issue for me!

0 Kudos