Skip to content

Commit

Permalink
Merge pull request #7 from conterra/dev_toc_action
Browse files Browse the repository at this point in the history
Add layer wise TimeSlider
  • Loading branch information
matthiasstein authored Nov 24, 2023
2 parents 67b6604 + 8f1734e commit ccd4074
Show file tree
Hide file tree
Showing 20 changed files with 809 additions and 584 deletions.
52 changes: 49 additions & 3 deletions src/main/js/apps/sample/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,19 @@
"componentEnabled": true
}
},
"toc": {
"Config": {
"actions": [
"show-description",
"zoom-to-extent",
"activate-children",
"deactivate-children",
"change-opacity",
"show-copyright",
"timeslider"
]
}
},
"banner": {
"BannerWidget": {
"label": "Developer Network",
Expand Down Expand Up @@ -99,8 +112,40 @@
{
"id": "buchdrucker",
"title": "Gefährdung Buchdrucker",
"type": "AGS_FEATURE",
"url": "https://www.fovgis.bayern.de/arcgis/rest/services/baywis_wsm/borki_gef/FeatureServer/1"
"type": "AGS_DYNAMIC",
"url": "https://www.fovgis.bayern.de/arcgis/rest/services/baywis_wsm/borki_gef/MapServer",
"listMode": "hide-children",
"sublayers": [
{
"id": 1,
"visible": true
}
],
"timeSlider": {
"timeExtent": {
"start": "2019-04-15T00:00Z",
"end": "2019-04-15T00:00Z"
},
"fullTimeExtent": {
"start": "2019-01-01T00:00Z",
"end": "2019-12-31T00:00Z"
},
"stops": {
"interval": {
"value": 1,
"unit": "weeks"
},
"timeExtent": {
"start": "2019-04-01T00:00Z",
"end": "2019-10-06T00:00Z"
}
},
"mode": "instant",
"loop": true,
"playRate": 1000,
"playOnStartup": true,
"timeVisible": false
}
},
{
"id": "kupferstecher",
Expand Down Expand Up @@ -229,7 +274,8 @@
"toolrules": {
"ToolActiveStateManager": {
"activateOnStartToolIds": [
"timeSliderToggleTool",
// "timeSliderToggleTool",
"tocToggleTool",
"legendToggleTool"
]
}
Expand Down
82 changes: 71 additions & 11 deletions src/main/js/bundles/dn_timeslider/README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,40 @@
# dn_timeslider

The Time Slider bundle allows the user to change the time extent of the map.
The Time Slider bundle allows the user to change the time extent of the map or specific layers.

## Usage
**Requirement: map.apps 4.12.0**

1. First you need to add the bundle dn_timeslider to your app.
2. Then you need to configure it.

To make the functions of this bundle available to the user, the following tool can be added to a toolset:

| Tool ID | Component | Description |
| -------------------- | -------------------- | ------------------------ |
| timeSliderToggleTool | TimeSliderToggleTool | Show or hide the widget. |
<ol>
<li>First you need to add the bundle dn_timeslider to your app.</li>
<li>Then you need to configure it. This can be accomplished in two separate yet complementary ways:
<ul>
<li>Map:</li>
<table>
<tr>
<th>Tool ID</th><th>Component</th><th>Description</th>
</tr>
<tr>
<td>timeSliderToggleTool</td><td>TimeSliderToggleTool</td><td>Show or hide the widget.</td>
</tr>
</table>
<li>Layer:</li>
<p>See sample configuration for layer Time Slider</p>
</ul>
</li>
</ol>

## Configuration Reference

### Config

#### Sample configuration
#### Sample configuration for map Time Slider
```json
"Config": {
"timeExtent": {
"start": "2019-04-15T00:00Z",
"end": "2019-04-15T00:00Z"
},
"fullTimeExtent": {
"start": "2019-01-01T00:00Z",
"end": "2019-12-31T00:00Z"
Expand All @@ -44,6 +58,50 @@ To make the functions of this bundle available to the user, the following tool c
}
```

#### Sample configuration for layer Time Slider
```json
"map-init": {
"Config": {
"map": {
"layers": [
{
"id": "buchdrucker",
"title": "Gefährdung Buchdrucker",
"type": "AGS_FEATURE",
"url": "https://www.fovgis.bayern.de/arcgis/rest/services/baywis_wsm/borki_gef/FeatureServer/1",
"timeSlider": {
"timeExtent": {
"start": "2019-04-15T00:00Z",
"end": "2019-04-15T00:00Z"
},
"fullTimeExtent": {
"start": "2019-01-01T00:00Z",
"end": "2019-12-31T00:00Z"
},
"viewTimeExtent": null,
"stops": {
"interval": {
"value": 1,
"unit": "weeks"
},
"timeExtent": {
"start": "2019-03-01T00:00Z",
"end": "2019-09-01T00:00Z"
}
},
"mode": "instant",
"loop": true,
"playRate": 1000,
"playOnStartup": true,
"timeVisible": false
}
}
]
}
}
}
```

| Property | Type | Possible Values | Default | Description |
| -------------- | ------- | ---------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| timeExtent | Object | | | The initial temporal extent of the slider. More information is available in the [TimeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#timeExtent) documentation. |
Expand All @@ -56,6 +114,8 @@ To make the functions of this bundle available to the user, the following tool c
| playOnStartup | Boolean | ```true``` &#124; ```false``` | ```false``` | When true, the time slider will play its animation on startup. |
| timeVisible | Boolean | ```true``` &#124; ```false``` | ```false``` | Shows/hides time in the display. |



#### Configuration of fullTimeExtent
To configure this property you need to define a start and end date. To do this you can use [Moment.js-Strings](https://momentjs.com/docs/#/parsing/).

Expand Down Expand Up @@ -263,5 +323,5 @@ If you configure the stops over an interval or a number, you have the additional

### Configuration of labels

To change the format and styling of the labels, you can inject a FormatFunction with the Interface `"dn_timeslider.LabelFormatFunction"`. It allows to change the visual representation of the labels inside of the TimeSlider.
To change the format and styling of the labels, you can inject a FormatFunction with the Interface `"dn_timeslider.LabelFormatFunction"`. It allows to change the visual representation of the labels inside of the TimeSlider.
More information is available in the [TimeSlider::labelFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#labelFormatFunction) documentation.
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
///
/// Copyright (C) 2023 con terra GmbH ([email protected])
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

import type { InjectedReference } from "apprt-core/InjectedReference";
import ct_util from "ct/ui/desktop/util";
import async from "apprt-core/async";
import EsriDijit from "esri-widgets/EsriDijit";

import { MessagesReference } from "./nls/bundle";
import type TimeSliderWidgetController from "./TimeSliderWidgetController";
import { ExtendedLayer } from "../../types/ExtendedLayer";

export default class TimeSliderTocActionDefinitionFactory {
public delay = 1000;
public supportedIds: Array<string>;

private Id = "timeslider";
private bundleContext: InjectedReference<any> = undefined;
private timeExtentWatcher: InjectedReference<any> = undefined;
private serviceRegistration: InjectedReference<any> = undefined;
private _i18n: InjectedReference<MessagesReference>;
private _timeSliderWidgetController: TimeSliderWidgetController;

public activate(componentContext: InjectedReference<any>): void {
this.bundleContext = componentContext.getBundleContext();
}

public constructor() {
this.supportedIds = [this.Id];
}

public createDefinitionById(id: string): any {
if (id !== this.Id) {
return;
}
const i18n = this._i18n.get();
const timeSliderWidgetController = this._timeSliderWidgetController;
// eslint-disable-next-line @typescript-eslint/no-this-alias
const that = this;

return {
id: "timeslider",
type: "button",
label: i18n.tocActionLabel,
icon: "icon-time-forward",

isVisibleForItem(tocItem: any) {
const ref = tocItem.ref;
return typeof ref.timeInfo !== "undefined" && ref.timeInfo !== null && !!ref.timeSlider;
},

trigger(tocItem: any) {
const layer = tocItem.ref;
const controller = timeSliderWidgetController;
const timeSliderProperties = tocItem.ref.timeSlider;

layer.visible = true;

if (layer.timeExtent) {
timeSliderProperties.timeExtent = layer.timeExtent;
timeSliderProperties.fullTimeExtent = layer.timeInfo.fullTimeExtent;
timeSliderProperties.stops = layer.stops;
}

const timeSliderWidget = controller.getWidget(timeSliderProperties);
that.timeExtentWatcher = timeSliderWidget.watch("timeExtent", (value) => {
layer.timeExtent = value;
});
this.supressLayerDefaults(layer, timeSliderProperties, timeSliderWidget);
const widget = new (EsriDijit as any)(timeSliderWidget);
const serviceProperties = {
"widgetRole": "layerTimeSliderWidget"
};
const interfaces = ["dijit.Widget"];
that.serviceRegistration = that.bundleContext.registerService(interfaces, widget, serviceProperties);

async(() => {
const window = ct_util.findEnclosingWindow(timeSliderWidget);
window.set("title", `${window.title} - ${layer.title}`);
window?.on("Hide", () => {
that.timeExtentWatcher.remove();
that.timeExtentWatcher = undefined;
});
}, that.delay);
},

supressLayerDefaults(layer: ExtendedLayer, props: InjectedReference<Record<string, any>>, widget: any) {
if (props) {
layer.timeInfo.fullTimeExtent = props.fullTimeExtent;
layer.stops = props.stops;
} else if (widget.fullTimeExtent) {
layer.timeInfo.fullTimeExtent = widget.fullTimeExtent;
layer.stops = widget.stops;
}
}
};
}

}
Loading

0 comments on commit ccd4074

Please sign in to comment.