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

[KellyHutchins]

Is your map service time aware? What's happening when you run your code? Do you get any errors in the developer console?

[ChristopherJohnson1]

Hi, Kelly.  Thanks for replying.

Yes, the map service is time aware.  When I run the code, there are no errors.  On initial load of the page, however, no map displays...when it should.  When I click the play button, after a few clicks on the time slider, the base map displays, but without showing the operational layer.

Thanks...Chris

[KellyHutchins]

I think a working example of your code would help to debug this. Is your app public? Or can you share all your code. If you'd like you can zip it and email to me at khutchins@esri.com

[ChristopherJohnson1]

Hi, Kelly.  No, the application nor the map service is not public yet.  All of the code is in my previous post, however.  The only parts obfuscated are the field names and map service URLs.

Do you know of/have any sample code of using a timeslider with a thematic map?  I have only seen point data.

Thanks...Chris

[ChristopherJohnson1]

Do you know if/think that I should be using the TemporalRenderer?

Thanks...Chris

[KellyHutchins]

There should be no issues with viewing your time-aware data when rendered using a class breaks renderer.  One quick test you might want to try is to comment out the time slider code and make sure your map draws as expected with just the renderer applied. This will help determine if there's an error in your rendering logic that might be causing issues with the map display.

A temporal renderer is useful if you want to render your data by some time period. For example if you were looking at a hurricane track and wanted to see initial hurricane points fade out as time progresses.

[ChristopherJohnson1]

Ah...OK...thanks for the explanation/clarification on Temporal Renderers.

As for your suggestion, I did check that, before posting, and then again, after you suggested it, and the map displays without any issues.

Any other ideas?

Thanks...Chris

[ChristopherJohnson1 · Accepted solution]

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