Choropleth Map with TimeSlider

ChristopherJohnson1

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 = "xyz";
		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.

ChristopherJohnson1

Hi.  I was able to make more progress on this.  A part of the issue was the mode of the feature layer. I was using snapshot, as shown above.  When I changed it to ondemand, the application seems to be working (better) now.

Thanks...Chris