I am trying to display the time series data in CSV using the ArcGIS Javascript API. I need the end product something like this: http://arcg.is/mnC59
The sample CSV looks like this:
lat,lon,datetime,rainfall
6.9271,79.8612,4/27/2017 17:00,0.018415
6.9271,79.8612,4/27/2017 18:00,0.143072
6.9271,79.8612,4/27/2017 19:00,0.056536
6.9271,79.8612,4/27/2017 20:00,0.00036
6.9271,79.8612,4/27/2017 21:00,0.002989
I have written some code that generates the map, gets the CSV from the URL as CSVLayer, adds to the map and have used the TimeSlider widget as well. However, when the TimeSlider is played, the value of rainfall is not updated in the label and the same value is shown every time.
What am I missing here?
The code looks this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Time Series Visulization</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
#map {
position: relative;
}
#bottom {
left: 50%;
margin: 0 auto;
margin-left: -500px;
position: absolute;
bottom: 2.5em;
}
#info{
border-radius: 4px;
border: solid 2px #ccc;
background-color: #fff;
display: block;
padding: 5px;
position: relative;
text-align: center;
width: 1000px;
z-index: 99;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/CSVLayer", "esri/layers/LabelClass",
"esri/TimeExtent",
"esri/dijit/TimeSlider",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/TextSymbol",
"esri/renderers/SimpleRenderer",
"esri/InfoTemplate",
"dojo/_base/array", "dojo/_base/Color",
"dojo/dom",
"dojo/domReady!"
], function (
Map, CSVLayer, LabelClass, TimeExtent, TimeSlider, SimpleMarkerSymbol, TextSymbol,
SimpleRenderer, InfoTemplate, arrayUtils, Color, dom
) {
map = new Map("map", {
basemap: "gray",
center: [80.7555, 7.8333],
zoom: 8,
showLabels: true
});
var csv = new CSVLayer("http://localhost/arcgis_api/data/rainfall.csv");
var markerColor = new Color("#ff4500");
var marker = new SimpleMarkerSymbol("solid", 15, null, markerColor);
var renderer = new SimpleRenderer(marker);
csv.setRenderer(renderer);
var template = new InfoTemplate("Daily Discharge");
csv.setInfoTemplate(template);
dynamicLabel();
map.addLayers([csv]);
map.on("layers-add-result", initSlider);
function initSlider() {
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, dom.byId("timeSlider"));
map.setTimeSlider(timeSlider);
var timeExtent = new TimeExtent();
timeExtent.startTime = new Date("4/27/2017 UTC");
timeExtent.endTime = new Date("4/28/2017 UTC");
timeSlider.setThumbCount(2);
timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsHours");
timeSlider.setThumbIndexes([0, 1]);
timeSlider.setThumbMovingRate(2000);
timeSlider.startup();
var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {
return timeStop.getHours() + ":" +
timeStop.getMinutes();
});
timeSlider.setLabels(labels);
timeSlider.on("play", dynamicLabel);
timeSlider.on("pause", dynamicLabel);
timeSlider.on("next", dynamicLabel);
timeSlider.on("previous", dynamicLabel);
timeSlider.on("time-extent-change", dynamicLabel);
}
function dynamicLabel() {
var csvLabel = new TextSymbol().setColor(new Color("#000"));
csvLabel.font.setSize("14pt");
csvLabel.font.setFamily("arial");
var json = {
"labelExpressionInfo": {"value": "{rainfall}" + " mm"}
};
var labelClass = new LabelClass(json);
labelClass.symbol = csvLabel;
csv.setLabelingInfo([labelClass]);
}
});
</script>
</head>
<body class="claro">
<div id="map">
<div id="bottom">
<div id="info">
<div>
Time Series Analysis
</div>
<div id="timeSlider"></div>
</div>
</div>
</div>
</body>
</html>
