Styling the Data in a Map

Try changing the colors that are the "TheCountryLayer.SetStyle()" function call. The colors start as "PaleGreen" for the fill and "Red" for the "stroke". The strokeStyle is the term the HTML 5 Canvas element uses for the pen or outline color for drawing. You can enter the names of colors, RGB colors, or "Hex" colors for the style values. See the W3Schoolls HTML Colors web page for more information. You can also right click on the layer name in the CanvasMap on the right and then use the color controls in the "Feature" tab to find a new color for your map.

As you change the colors, becareful to make sure you do not delete the quotes. These are required. If the page stops working, just refresh the page and you'll be back with the original code.

RGBA Colors

Rather than the colors like "red", "blue", and "yellow", you can also use "rgba()" colors. These are much more flexible as you can specify the amount of red, green, and blue light and then provide a transparency value. Try putting the following values in the JavaScript code in place of the "PaleGreen" value (the rgba(...)) still has to be inside one set of quotes.

The red, green, and blue values are given as numbers from 0 to 255 where 0 is no light (black) and 255 is full on (full intensity). Think of this has having three "sliders" that you can move up and down to change the amount of light. Click on the color button below and use the controls to define different colors.

Now, take the red, green, and blue values from the control and set them as a "fillStyle" for the countries layer. You can also change the transparency value to go from 0 (transparent) to 1 (opaque) but this will just make the colors lighter until we put something behind it.

Try replacing the "SetStyle()" code with the code below and see the lines change around the country:

	TheCountryLayer.SetStyle({
		fillStyle:"rgba(255,0,0,1)",
		strokeStyle:"rgba(0,0,255,1)",
		lineWidth:2
	});

Try making the lineWidth larger with values like 6 or 8. Notice the big spikes that appear at the sharp corners? This is because of the angle that the lines meet at. To fix this, we need to a "lineJoin" value as follows (notice we've also added a comma as all entries in a JavaScript object have to be separated by a comma):

	TheCountryLayer.SetStyle({
		fillStyle:"rgba(255,0,0,1)",
		strokeStyle:"rgba(0,0,255,1)",
		lineWidth:2,
		lineJoin:"round"
	});

You are now ready to try some of the other options for an HTML 5 Canvas object. There is an excellent reference and tutorials at W3Schools Canvas Reference and the following are supported for vector layers in CanvasMap:

>>>>