Setting Properties

Setting Layer Properties

There are a number of properties for layers. The properties will effect all the features within a layer.

Setting properties is as easy as calling "TheLayer.SetProperty(CMLayer.FEATURE_STYLE,TheStyle)". This is the same as calling "SetStyle(TheStyle)" as you did in the second tutorial. The format for this function is:

TheLayer.SetProperty(Property,Value); 

The full set of available properties are:

Property	Value
CMLayer.INFO	The HTML content that will be placed in the information window
CMLayer.FEATURE_STYLE	Style to use to paint features
CMLayer.MOUSE_OVER_STYLE	Style to use when the user moves the mouse over a feature
CMLayer.SELECTED_STYLE	Style to to paint a feature when it is selected
CMLayer.ICON_IMAGE	Image to replace the mark for a point with: { TheImage:Image Object, OffsetX:OffsetX, OffsetY:OffsetY };
CMLayer.MARK_TYPE	Type of mark to display for points
CMLayer.MARK_SIZE	Size of marks in pixels
CMLayer.ZOOM_RANGE	Sets the zoom range for a layer to be displayed at. Value is an array formatted at [MinZoomLevel,MaxZoomLevel]

The styles are all JSON objects containing Canvas style key/value pairs.

As an example, if we wanted to make the feature that the mouse was over appear black with a white border as in the Africa example, we would add the following line to our OnLoad() function where we create the layer:

TheLyaer.SetProperty(CMLayer.MOUSE_OVER_STYLE,{fillStyle:"rgb(0,0,0)",strokeStyle:"rgb(255,255,255)"}); 

Each of these properties can be set for all of the features in a layer or for individual features in a layer. The properties can also be set to have the values come from an attribute in the layer. These properties work in a similar way to CSS in that you can provide a general setting for all features and then provide properties for specific features which will override the general setting but just for the specified features. Similarly, you can provide a general property for all features and then provide an attribute column for all or a subset of the features. If the attribute value is blank, the general property value will be used, otherwise, the attribute value will be used.

Setting Properties from Attributes

You can also set properties to have values pulled from an attribute table. This allows you to customize the properties for each feature in a layer. In the function below, we'd use the appropriate property from the table above and then set the value to the name of the column in the attribute table that contains the value for the properties for each feature. The values in the table can be blank to indicate you want to use the default property value.

TheLayer.SetPropertyAttribute(Property,Value);

Setting Properties for Individual Features

You can also set properties for individual features within your files. This can be done with individual features or by providing an entire array of feature properties. This allows us a great deal of flexibility in colorizing our maps, among other uses. The "SetFeaturePropery()" function will set a property for an individual feature using an index to that feature from 0 being the first feature in the layer. The "SetFeaturesProperties()" takes an array of key/value pairs with the keys being indexes to the features to change and the value being the property value to set.

TheLayer.SetFeatureProperty(Property,FeatureIndex,Value);
TheLayer.SetFeatureProperties(Key,FeatureProperties);

Below is an example of each of the two functions and the US Census example uses this approach to uniquely colorize a data set of counties based on their population.

		// setup an array with styles based on the colors
		var FeatureColors=Result.FeatureColors;
		var FeatureStyles=[];
		for (var i=0;i<Layer_Counties.GetNumAttributeRows();i++)
		{
			FeatureStyles[i]={
				fillStyle:FeatureColors[i],
				strokeStyle:"rgba(220,220,200,0.8)"
			};
		};
		// set the styles into the layer
		Layer_Counties.SetFeatureProperties(CMLayer.FEATURE_STYLE,FeatureStyles);
		
		// make a black outline for the mouse over style
		Layer_Counties.SetProperty(CMLayer.SELECTED_STYLE,{
			strokeStyle:"#000000",
			lineWidth:"2",fillStyle:"rgba(0,0,0,0)"
		});