CanvasMap
Getting Started Tutorials 3D Reference

Styling Point 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.SetSetting("Mark","Type",CMMARK_STAR);
TheCityLayer.SetSetting("Mark","Size",10); 

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

CMMARK_CIRCLE
CMMARK_TRIANGLE
CMMARK_SQUARE
CMMARK_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. 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 changing the offset values to see how they position the icon.

CanvasMap will need to convert the URL you specify for the image to an HTML DOM image object. To achieve this, call the SetIconImage() function with the URL, XOffset, and YOffset values as below:

TheCityLayer.SetIconImage("https://gsp.humboldt.edu/CanvasMapWebsite/Documentation/Images/IconLightning.png",-20,-32);

Working Locally

At this piont, you might be wondering how you can use your own data and images. The examples you have been working with use full URLs to access data and images in the CanvasMap folder. You can copy the contents of the examples into an HTML page on your server and they still should work. Then, you can start by replacing the "IconLightning.png" image with your own.