Created
April 9, 2020 21:32
-
-
Save zhik/fbd8df5dd3202c0e87abdf095c337ea6 to your computer and use it in GitHub Desktop.
timeslider example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| html, | |
| body, | |
| #viewDiv { | |
| padding: 0; | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"> | |
| <script src="https://js.arcgis.com/4.15/"></script> | |
| </head> | |
| <body> | |
| <div id="viewDiv"></div> | |
| <div id="timeSliderDiv"></div> | |
| <script> | |
| require([ | |
| "esri/Map", | |
| "esri/views/MapView", | |
| "esri/layers/FeatureLayer", | |
| "esri/symbols/SimpleMarkerSymbol", | |
| "esri/widgets/TimeSlider" | |
| ], function (Map, MapView, FeatureLayer, SimpleMarkerSymbol, TimeSlider) { | |
| var map = new Map({ | |
| basemap: "topo-vector" | |
| }); | |
| var view = new MapView({ | |
| container: "viewDiv", | |
| map: map, | |
| center: [-73.821366, 40.601273], // longitude, latitude | |
| zoom: 11 | |
| }); | |
| var symbol = { | |
| type: "simple-marker", // autocasts as new SimpleMarkerSymbol() | |
| style: "square", | |
| color: "red", | |
| size: "8px", // pixels | |
| outline: { // autocasts as new SimpleLineSymbol() | |
| color: [255, 255, 0], | |
| width: 3 // points | |
| } | |
| }; | |
| var symbolRender = { | |
| type: 'simple', | |
| symbol: symbol, | |
| label: 'label', | |
| visualVariables: [ | |
| { | |
| type: "size", | |
| field: "FloodDepth", | |
| stops: [ | |
| { | |
| value: 20, // features where < 15% of the pop is in poverty | |
| size: 4, // will be assigned a marker with this size in pts | |
| label: "20" // label to display in the legend | |
| }, | |
| { | |
| value: 40, // features where > 35% of the pop is in poverty | |
| size: 24, // will be assigned a marker with this size in pts | |
| label: "more 40" // label to display in the legend | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| var layer = new FeatureLayer({ | |
| url: "https://services1.arcgis.com/0Lw2m57KEotYYFaA/arcgis/rest/services/NewGeoForm/FeatureServer/0", | |
| renderer: symbolRender | |
| }); | |
| map.add(layer); | |
| var timeSlider = new TimeSlider({ | |
| container: "timeSliderDiv", | |
| mode: "cumulative-from-start", | |
| }); | |
| view.ui.add(timeSlider, "manual"); | |
| let timeLayerView; //blank | |
| view.whenLayerView(layer).then(function (layerView) { | |
| timeLayerView = layerView; | |
| var start = new Date(2019, 06, 20) | |
| var end = new Date(2020, 4, 1) | |
| timeSlider.fullTimeExtent = { | |
| start: start, | |
| end: end | |
| } | |
| timeSlider.values = end; | |
| }); | |
| timeSlider.watch("timeExtent", function (value) { | |
| // update layer view filter to reflect current timeExtent | |
| console.log(value) | |
| timeLayerView.filter = { | |
| timeExtent: value | |
| }; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment