How to test the Timeslider

To test the Timeslider before enabling it for all users you can add &timeslider to the end of the Map URL.

Navigate to the Map Profiles page via the Admin Dashboard, this can be accessed under the Administration Settings menu.

Find the Map profile that you want to test, then click the Preview icon ().
The map will be displayed in a popup window, copy the URL for this page.

Paste the URL into a new browser tab and append &timeslider to the end of the URL.

The Timeslider will now be available.

How to enable the Timeslider

By default the Timeslider is disabled, it can be enabled via the Stylesheet.

Navigate to the Stylesheets page, found under the Administration Settings menu.
Find the correct Stylesheet from the list and click the Edit icon ().

 How to find the Stylesheet being used by the Map Profile

Navigate to the Map Profiles page via the Admin Dashboard, this can be accessed under the Administration Settings menu.

Find the Map profile that you want to update, then click the Edit icon () in the Action column.

This is the Stylesheet that needs to be updated.

You will see the Stylesheet editor, it should look similar to the above image.

In the JSON text above the line /** LINE REQUIRED - CSS BELOW **/ add the below value after the first curly brace “{ … }”.

"timeslider": true,

The stylesheet should now look like this.

Click Save.

On the next refresh, the Timeslider will be available.

Additional Timeslider Configuration

All these additional options are configured via the Stylesheet.

Navigate to the Stylesheets page, found under the Administration Settings menu.
Find the correct Stylesheet from the list and click the Edit icon ().

 How to find the Stylesheet being used by the Map Profile

Navigate to the Map Profiles page via the Admin Dashboard, this can be accessed under the Administration Settings menu.

Find the Map profile that you want to update, then click the Edit icon () in the Action column.

This is the Stylesheet that needs to be updated.

You will see the Stylesheet editor, it should look similar to the above image.

Open Timeslider Onload

By default, the Timeslider is hidden when viewing the current day.

Add the following parameter into the JSON section at the top of the Stylesheet.

"timeslider_default": true,

Custom After Working Day Slot

When the Timeslider is opened for the current day the start of the time range will default to the current time and the end of the time range will default to the end of the working day.

However, if the Map is being used after the working day has ended the end time cannot be selected.
Instead, the end time of the range will default to 1 hour from the current time.

This value can be modified to auto-select any number of hours into the future.

Add the following parameter into the JSON section at the top of the Stylesheet.

"after_wd_slot": 2,

Custom Button Text

The text for the Timeslider buttons can be modified.

The default values for the Timeslider are:

All button text values are stored in a "timeslider" object nested in the "buttons" section of the JSON.

Use the below keys to update each text value.

"buttons" : {
  "timeslider": {
	"action": "Time Selector",
    "workingday_large": "9-5",
	"endofday_large": "Now - 5pm",
	"allday_large": "24 hrs",
	"am_large": "Morning",
	"pm_large": "Afternoon",
	"workingday_small": "9-5",
	"endofday_small": "EOD",
	"allday_small": "24",
	"am_small": "AM",
	"pm_small": "PM"
  }
}

Here is an example of how the above changes would look when viewed on the Map.