...
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 “{ … }”.
...
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 (
).
| Expand | ||
|---|---|---|
| ||
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 (  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.
| Code Block | ||
|---|---|---|
| ||
"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.
| Code Block | ||
|---|---|---|
| ||
"after_wd_slot": 2, |
| Info |
|---|
Update the number value to the number of hours you require. |
...
Custom Button Text
The text for the Timeslider buttons can be modified.
...
The default values for the Timeslider are:
Default Text | Action | ||
|---|---|---|---|
Timeslider | The action button to show/hide the Timeslider. | ||
AM | Adjusts the Timeslider range to match the configured AM values. | ||
PM | Adjusts the Timeslider range to match the configured PM values. | ||
Working Day | Adjusts the Timeslider range to match the configured working day values.
| ||
End of Day | Adjusts the Timeslider range to the current time until midnight.
| ||
All Day | Adjusts the Timeslider range to the full day (24 hours).
|
All button text values are stored in a "timeslider" object nested in the "buttons" section of the JSON.
| Note |
|---|
You will need to add a |
Use the below keys to update each text value.
| Code Block | ||
|---|---|---|
| ||
"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"
}
} |
There are two options for each button, a _large and a _small option.
When the display size is less that 800px the _small option will be used.
...
Here is an example of how the above changes would look when viewed on the Map.
...