...
| Note |
|---|
|
The new marker has an updated shape along with an always visible name label, allowing users to easily find the correct resource.
...
| Table of Contents | ||||
|---|---|---|---|---|
|
How to test the Timeslider
To test the Timeslider before enabling it for all users you can add ×lider 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 ×lider 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.
...
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 “{ … }”.
...
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 ().
| 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 on Load
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 than 800px the _small option will be used.
...
Here is an example of how the above changes would look when viewed on the Map.
...