Choropleth Map with TimeSlider

ChristopherJohnson1 — Tue, 25 Aug 2015 11:35:35 GMT

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.

Re: Choropleth Map with TimeSlider

KellyHutchins — Tue, 25 Aug 2015 16:24:09 GMT

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

Re: Choropleth Map with TimeSlider

ChristopherJohnson1 — Tue, 25 Aug 2015 17:01:32 GMT

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

Re: Choropleth Map with TimeSlider

KellyHutchins — Tue, 25 Aug 2015 17:21:49 GMT

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

Re: Choropleth Map with TimeSlider

ChristopherJohnson1 — Tue, 25 Aug 2015 17:27:37 GMT

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

Re: Choropleth Map with TimeSlider

ChristopherJohnson1 — Tue, 25 Aug 2015 20:02:42 GMT

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

Thanks...Chris

Re: Choropleth Map with TimeSlider

KellyHutchins — Tue, 25 Aug 2015 22:52:00 GMT

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.

Re: Choropleth Map with TimeSlider

ChristopherJohnson1 — Wed, 26 Aug 2015 11:06:32 GMT

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

Re: Choropleth Map with TimeSlider

ChristopherJohnson1 — Thu, 14 Jan 2016 17:51:51 GMT

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

topic Choropleth Map with TimeSlider in ArcGIS JavaScript Maps SDK Questions

Choropleth Map with TimeSlider

Re: Choropleth Map with TimeSlider

Re: Choropleth Map with TimeSlider

Re: Choropleth Map with TimeSlider

Re: Choropleth Map with TimeSlider

Re: Choropleth Map with TimeSlider

Re: Choropleth Map with TimeSlider

Re: Choropleth Map with TimeSlider

Re: Choropleth Map with TimeSlider