Styling Polyline data

Below we've added a point layer for the major cities of the world. There are two ways you can draw points, as "MARKs" and as an ImageIcon. The marks in CanvasMap include circles, triangles, stars, and sqaures. These can be styled just as polygons can with stroke and fill styles. The marks can be replaced by an icon that comes from a PNG or JPG file. Scroll the code on the right to the bottom of the window to see how the points in the map are styled.

Points as Marks

In the code above, find the two "SetProperty()" function calls that set the MARK_TYPE and MARK_SIZE. The size is in pixels. Try changing the size and pressing "Try It".

TheCityLayer.SetProperty(CMLayer.MARK_TYPE,CMLayer.MARK_STAR);
TheCityLayer.SetProperty(CMLayer.MARK_SIZE,10);  

The MARK_TYPE is specified with one of the following definitions. Try changing the MARK_TYPE in the code above.

CMLayer.MARK_CIRCLE
CMLayer.MARK_TRIANGLE
CMLayer.MARK_SQUARE
CMLayer.MARK_STAR

Points as Icon Images

You can also replace the mark with a PNG or JPG image. This requires a URL to the image and then an "XOffset" and "YOffset" that specifies the How the image should be placed over the coordinate for the point. To set an icon image use the "SetIconImage()" function.

TheLayer.SetIconImage(URL, XOffset, YOffset);

Typically, you'll shift the image to upper-left to move the point toward the center of the icon. This means the offsets will typicaly be negative numbers. Try replacing the two SetProperty() function calls for the point layer with the following and then changing the offset values to see how they position the icon.

TheCityLayer.SetIconImage("Images/IconLightning.png",-20,-32);