-
Notifications
You must be signed in to change notification settings - Fork 2
/
main.ts
98 lines (88 loc) · 2.92 KB
/
main.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import FeatureLayer = require("esri/layers/FeatureLayer");
import EsriMap = require("esri/Map");
import MapView = require("esri/views/MapView");
import TimeSlider = require("esri/widgets/TimeSlider");
import TimeExtent = require("esri/TimeExtent");
import SimpleRenderer = require("esri/renderers/SimpleRenderer");
import SimpleFillSymbol = require("esri/symbols/SimpleFillSymbol");
import Basemap = require("esri/Basemap");
import FeatureFilter = require("esri/views/layers/support/FeatureFilter");
import FeatureLayerView = require("esri/views/layers/FeatureLayerView");
// Firefly Imagery Hybrid
const basemap = new Basemap({
portalItem: {
id: "9e557abc61ce41c9b8ec8b15800c20d3"
}
});
const map = new EsriMap({
basemap
});
// center around sonoma county
const view = new MapView({
container: "viewDiv",
map,
center: [-122.7798, 38.6837],
zoom: 11
});
// only load kincade fire perimeters from 2019 CA fire perimeters
const featureLayer = new FeatureLayer({
url: "https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Historic_GeoMAC_Perimeters_2019/FeatureServer/0",
definitionExpression: "incidentname = 'KINCADE'",
outFields: ["*"],
renderer: new SimpleRenderer({
symbol: new SimpleFillSymbol({
color: "#FAD0C6",
outline: {
color: "#520B02",
width: "2px"
}
})
}),
effect: "brightness(600%)",
blendMode: "overlay",
});
map.add(featureLayer);
// add a new time slider without view settings
const timeSlider = new TimeSlider({
container: "timeSlider",
mode: "instant",
timeVisible: true,
playRate: 200
});
view.ui.add(timeSlider, "bottom-left");
let dates = new Array;
view.whenLayerView(featureLayer).then((layerView: FeatureLayerView) => {
const query = featureLayer.createQuery();
query.orderByFields = ["perimeterdatetime"];
// query all features from the kincade fire perimeters
// loop through perimeterdatetime field and add dates to
// dates array and set the time slider stops to dates array
featureLayer.queryFeatures(query).then((results) => {
results.features.forEach((feature) => {
const dt = new Date(feature.attributes.perimeterdatetime);
dates.push(dt);
});
timeSlider.stops = { dates };
// set the time slider's full time extent to cover
// kincade fire perimeters date
timeSlider.fullTimeExtent = new TimeExtent({
start: dates[0],
end: dates[dates.length-1]
});
const start = dates[0].getTime();
const where = `perimeterdatetime = ${start}`;
layerView.filter = new FeatureFilter({
where
});
});
// watch time slider timeExtent event and
// set layer view filter on fires perimeter layer
// to show fire perimeter that falls within the time extent
timeSlider.watch("timeExtent", () => {
const start = timeSlider.timeExtent.start.getTime();
const where = `perimeterdatetime = ${start}`;
layerView.filter = new FeatureFilter({
where
});
});
});