Tutorial - Annotations

Draw different annotations, optionally setting the aspect ratio for rectangles and ellipses.

Define some HTML with the divs for the map and controls.

Step 1
Active
Inactive

Define some CSS to position the controls at the top of the window.

Step 2
Active
Inactive

Create a map, center it in an interesting area, and create an annotation layer. The annotation layer specifies clickToEdit which allows clicking on an existing annotation to modify it.

Step 3
Active
Inactive

When the you click the Draw button, if it is not currently selected, switch to drawing the currently selected annotation style. If already drawing an annotation, cancel the drawing.

For rectangles and ellipses, use the aspect ratio input field to constrain the aspect ratio. Numbers greater than 1 will be wider than tall; numbers between 0 and 1 will be taller than wide. You can enter a comma-separated list of aspect ratios to snap to the closest value.

Step 4
Active
Inactive