AnsweredAssumed Answered

Choropleth Map with TimeSlider

Question asked by CGSJohnson on Aug 25, 2015
Latest reply on Jan 14, 2016 by CGSJohnson

Good morning.  Can anyone assist with the code below?  I am trying to initially show a Choropleth map and then allow the user to use the TimeSlider object to view data on the thematic map over time.  Is something awry in my code below?

 

 

  var map;
  var yr;
  var whereclause;
  var symbol;

      require([

        "esri/map", "esri/layers/FeatureLayer","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/ImageParameters"

,"esri/tasks/QueryTask","esri/tasks/query","dojo/number", "esri/symbols/TextSymbol",

        "esri/InfoTemplate", "esri/symbols/SimpleFillSymbol", "esri/geometry/Extent", "esri/layers/LabelLayer",

"esri/tasks/GeometryService","esri/geometry/Point","esri/tasks/AlgorithmicColorRamp",

        "esri/renderers/ClassBreaksRenderer","esri/tasks/GenerateRendererParameters", "esri/tasks/GenerateRendererTask",

"esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/renderers/SimpleRenderer", "esri/TimeExtent",
"esri/dijit/TimeSlider", "dojo/_base/array", "esri/tasks/ClassBreaksDefinition",

        "esri/Color", "esri/dijit/Legend", "dojo/dom", "dojo/dom-construct", "dojo/dom-style", "dojo/domReady!"

      ], function(

        Map, FeatureLayer,ArcGISDynamicMapServiceLayer, ImageParameters, QueryTask, Query, number, TextSymbol,

        InfoTemplate, SimpleFillSymbol, Extent, LabelLayer, GeometryService, Point, AlgorithmicColorRamp,

        ClassBreaksRenderer,GenerateRendererParameters, GenerateRendererTask,SimpleMarkerSymbol,SimpleLineSymbol,SimpleRenderer,

TimeExtent, TimeSlider, arrayUtils, ClassBreaksDefinition, Color, Legend, dom, domConstruct, domStyle

      ) {

 
  yr = 2013;
whereclause = "xxx";
symbol = new SimpleFillSymbol();

        symbol.setColor(new Color([150, 150, 150, 0.5]));

  if (map)
{
map.destroy();
}

        map = new Map("mapDiv", {

          //basemap: "streets",

          //center: [-98.215, 38.382],

          //zoom: 10

          //slider: false//,

  //extent: bbox
  showAttribution: false,
  logo: false

        });

var imageParameters = new ImageParameters();

        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

 

 

        //Takes a URL to a non-cached map service.

        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("mapserviceurl", {

          "opacity" : 0.5,

          "imageParameters" : imageParameters

        });

var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("${field1}");
infoTemplate.setContent("Data Value: ${field2}");

        var featureLayer = new FeatureLayer("featurelayerurl", {

          mode: FeatureLayer.MODE_SNAPSHOT,

          outFields: ["*"],

          infoTemplate: infoTemplate

        });

showMap(yr);
function showMap(yrselected){
'use strict;'

 

 

createRenderer("field2");
}
function createRenderer(field2) {
'use strict;'
var classDef = new ClassBreaksDefinition();
classDef.classificationField = "field2";
classDef.classificationMethod = "quantile";
classDef.breakCount = 4;
classDef.baseSymbol = symbol;

 

 

var colorRamp = new AlgorithmicColorRamp();
colorRamp.fromColor = new Color.fromHex("#F0F9E8");
colorRamp.toColor = new Color.fromHex("#2B8C5A");
colorRamp.algorithm = "hsv";
classDef.colorRamp = colorRamp;

 

 

var params = new GenerateRendererParameters();
params.classificationDefinition = classDef;
params.formatLabel = true;

 

 

// limit the renderer to data being shown by the feature layer
params.where = whereclause;
var generateRenderer = new GenerateRendererTask("featurelayerurl");
generateRenderer.execute(params, applyRenderer, showErr);
}

 

 

function applyRenderer(renderer) {
'use strict;'
featureLayer.setDefinitionExpression(whereclause);
renderer.defaultSymbol = symbol;
renderer.defaultLabel = "Data unavailable";
renderer.isMaxInclusive = false;
featureLayer.setRenderer(renderer);
featureLayer.redraw();

 

 

// define State labels (from feature layer field)

 

 

var labelField = "labelfield";
var statesColor = new Color("#000000");
var statesLabel = new TextSymbol().setColor(statesColor);

 

 

statesLabel.font.setSize("11pt");
statesLabel.font.setFamily("Lato,'Helvetica Neue',Helvetica,Arial,sans-serif");

 

 

var statesLabelRenderer = new SimpleRenderer(statesLabel);
var labels = new LabelLayer({ id: "labels" });

 

 

// associate feature layer and label layer

 

 

labels.addFeatureLayer(featureLayer, statesLabelRenderer, "{" + labelField + "}");

 

 

//getInfoFromRenderer(renderer);
//createLegend();

 

 

// add all layers to the map
// dynamicMapServiceLayer servers as base layer
// featureLayer has data to be visualized
// labels has labels for geographic boundaries on the featuer layer

 

 

map.addLayers([dynamicMapServiceLayer, featureLayer, labels]);
map.on("layers-add-result", initSlider);
}
function showErr(err){
'use strict;'
console.log(err); 
}
function formatValues(num) {
'use strict;'

            return number.format(num, { "places": 1 });

}
function initSlider() {
'use strict;'
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, dom.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);
var timeExtent = new TimeExtent();
timeExtent.startTime = new Date("1/1/1993 UTC"); // get from data
timeExtent.endTime = new Date("12/31/2010 UTC"); // get from data
timeSlider.setThumbCount(1);
timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsYears");
timeSlider.setThumbIndexes([0]);
timeSlider.setThumbMovingRate(7000);
timeSlider.startup();
//add labels for every other time stop
var lbls = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {
if ( i % 2 === 0 ) {
return timeStop.getUTCFullYear();
} else {
return "";
}

          });

 
  timeSlider.setLabels(lbls);
 
  timeSlider.on("time-extent-change", function(evt) {

            var startValString = evt.startTime.getUTCFullYear();

            var endValString = evt.endTime.getUTCFullYear();

            dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString  + "<\/i>";

yr = endValString;
//showMap(yr);

          });

  }
});

 

Does anyone have an example of a choropleth map playing over time?

 

Thanks.

Outcomes