Interacting with Other Elements

A powerful and relatively easy way to create interactive mapping applications is to create a map that displays dynamic information as the user interacts with the map.

The example below will display chart data using "Chart.js", a freely available library. When the user clicks in each county, the information for that county is displayed.

Example (this map can take a while to load as the county data is extensive).

The Functions To Override

JavaScript is very flexible in that you can "override" a function in a JavaScript object after the object has been created. This allows us to replace existing functions with new functions and take control of interactions with the user.

The following functions can be replaced for any layer:

YourLayer.MouseDown=function(TheView,RefX,RefY) {...}
YourLayer.MouseMove=function(TheView,RefX,RefY) {...}
YourLayer.MouseUp=function(TheView,RefX,RefY) {...}
YourLayer.Paint=function(TheView) {...}
YourLayer.PaintSelected=function(TheView) {...}
YourLayer.Resize=function(TheView) {...}
YourLayer.GetSearchResults=function(SearchPhrase,ResultsPanel) {...}

 

The Code

Below is the code for updating the chart when the user clicks on an area. This code can be inserted just before you call "StartMap()'. You'll also need to add an additional canvas element for the chart.

	Layer_Counties.MouseDown=function(TheView,RefX,RefY) 
	{
		var Used=false; // flag to indicate if we have used the event

		// call the parent function
		
		Used=this.SuperClass_MouseMove(TheView,RefX,RefY);
		
		// if this layer was clicked with the INFO tool then update the chart
		
		// get the feature selected, if any
		
		var FeatureIndex=this.In(TheView,RefX,RefY); 
		
		if (FeatureIndex!=-1) // -1 indicates no feature selected
		{
			// update the DIV tag over the chart to contain the name of the selected county
			
			var TheCountyInfo=document.getElementById("CountyInfo");
			
			TheCountyInfo.innerHTML="County: "+this.GetAttributeCellByHeading("NAME",FeatureIndex);
			
			// Setup the labels and "buckets" for the chart
			
			var AttributeHeaders=["AGE010180D","AGE010190D","AGE010200D","AGE010210D"];
			var Labels=["1980","1990","2000","2010"];
			
			var Buckets=[]; // the buckets (values) for each cateogory
			
			for (var i=0;i<Labels.length;i++) 
			{
				var TheHeading=AttributeHeaders[i];
				Buckets[i]=this.GetAttributeCellByHeading(TheHeading,FeatureIndex);
			}
			
			UpdateChart(Labels,Buckets);

			Used=true; // let the caller know we've used the event so no one else uses it
		}
		return(Used);
	};