Adding a Scale Bar

You can add a scale bar that is accurate for where it is place on the map. If you are using projected data, you'll need to make sure you specified a projector for the CanvasMap. The CSS style for a scale bar is CM_ScaleBar

var TheScaleBar=new CMScaleBar();

TheView.AddMapElement(TheScaleBar);

The default units for the scale bar are SI units. You can change them to English units by calling:

TheScaleBar.SetUnits(CMScaleBar.UNITS_ENGLISH);

Styling The Scale Bar

Since the scale bar is drawn into the Canvas element, you'll need to provide Canvas drawing styles for it rather than CSS styles. Below is an example:

// setup the scale bar's style to closely match those specified in the CSS file
TheScaleBar.SetSetting("Style","fillStyle","rgba(255,255,255,1)");
TheScaleBar.SetSetting("Style","stokeStyle","rgba(0,100,0,0)");
TheScaleBar.SetSetting("Style","lineWidth",2);
TheScaleBar.SetSetting("Style","shadowBlur",5);
TheScaleBar.SetSetting("Style","shadowColor","rgb(0,0,0)");