CanvasMap
Getting Started Tutorials 3D Reference

Styling the Data in a Map

Try changing the colors that are the "TheCountryLayer.SetSetting("Style","fillStyle","red")" 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 adding code below and see the lines change around the country:

TheCountryLayer.SetSetting("Style","strokeStyle","rgba(0,0,255,1)");
TheCountryLayer.SetSetting("Style","lineWidth",2); // notice the "2" does not have quotes because it is a number

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.SetSetting("Style","fillStyle","rgba(255,0,0,1)");
TheCountryLayer.SetSetting("Style","strokeStyle","rgba(0,0,255,1)");
TheCountryLayer.SetSetting("Style","lineWidth",2);
TheCountryLayer.SetSetting("Style","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:

Gradients and Pattern Images

The newest version of CanvasMap also supports gradients and pattern images. The code below shows an example of a gradient with two color stops and a pattner. 

// Setting a gradient into a layer's features
TheCountryLayer.SetSetting("Style","GradientType",'Linear'); // The type can be Linear or Gradient
TheCountryLayer.SetSetting("Style","GradientCoordinates",
{
	Xs:[0,400],
	Ys:[0,400]
});
TheCountryLayer.SetSetting("Style","GradientColors",["rgb(0,0,0)","rgb(255,255,255)"]);

// Setting a pattern into a layer's features
var TheImage=document.createElement("IMG"); // create an IMG element to hold the image
TheImage.src="../CanvasMap/Examples/Images/IconLightning.png"; // request the image from the server
TheCountryLayer.SetSetting("Style","PatternImage",TheImage); // specify the image for the pattern background

Using the Debugger

About this point you might type something into the JavaScript window that generates an error. You won't typically see these errors and will just get a blank page which can be very frustrating. You'll want to open a debugger and keep it open while working with JavaScript. My favorite is in Google Chrome and you can open it by clicking on the ellipses in the upper right clicking on "More Tools" and then clicking on "Developer Tools".

 

>>>>>>>>