Styling the Data in a Map

Below is the complete HTML for displaying a map in a simple web page. Take a look at each of the sections of code within the HTML. Comments have been provided to help with understanding the code. Press "Try it ->" and you'll see the map on the right flash as the HTML is being updated. "Open In New Window" will open just the HTML code in a new window so you can use it as a template for a new web page if you desire. The rest of this tutorial will introduce you to CanvasMap by changing the style of a vector map. The next tutorial will explain the overall structure of the code calling CanvasMap and then get you started with your own data.

Now 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.

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. When you feel ready, try changing the "lineWidth" for the "stroke". This is the width of the pen that will be used to draw the outline of the shape. You can use any of the colors, styles, shadow, and line styles, that are supported for drawing in a Canvas. See the W3Schools Canvas Reference for more information.