0

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>
1

TimeSlider works with layers that are time-aware. https://developers.arcgis.com/javascript/3/jsapi/timeslider-amd.html

There isn't yet a way to specify time-awareness for CSVLayer. So the TimeSlider won't work with your CSV layer. https://developers.arcgis.com/javascript/3/jsapi/csvlayer-amd.html

You could read/parse the CSV and put it into a FeatureCollection, and then it would work with your data: https://developers.arcgis.com/javascript/3/jssamples/mobile_geolocaterenderer.html

If you're part of an ArcGIS Online organization, you could publish the CSV file as a hosted Featurelayer and then make that layer time-aware on its item details page. But that might not be what you want to do since it's a one-time conversion.

  • FYI: the next version, ArcGIS API for JavaScript 3.21, will have support for time-aware CSV layers. – Bjorn Svensson May 23 '17 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.