Adding Ticks above Time Slider

cschooley · ‎08-13-2021

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!

UndralBatsukh · ‎08-16-2021

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

UndralBatsukh · ‎08-16-2021

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

cschooley · ‎08-16-2021

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!