Skip to main content

Drawing Tools

Click Create in the Bounding Box panel to reveal three ways to define your analysis region:

Box (Rectangle)

Click the Box option, then:

  1. Click and hold on the map at one corner of the desired area
  2. Drag to the opposite corner
  3. Release to finalize the rectangle

A cyan/blue rectangle entity appears. The box coordinates are stored as four Cesium.Cartesian3 corner points.

Right-click at any time during drawing to cancel.

Draw (Freeform Polygon)

Click the Draw option, then:

  1. Click and drag on the map to trace your region boundary
  2. Release to complete the polygon

The polygon shape is defined by the mouse path. This is useful for irregular regions that don't fit a rectangle.

Right-click to cancel the current drawing.

Boundary (US States and Counties)

Click the Boundary option to open the Boundary Selection dialog. See Boundary Selection for full details.

Editing a Box

After a box is created, click Edit to enter edit mode:

  • Four corner handles (circular billboards) appear at the box corners
  • Click and drag any handle to resize the box
  • The box dynamically updates in real time as you drag
  • Camera auto-pan activates when you drag near the edge of the canvas, letting you expand the box beyond the current viewport

Click Save to commit the edited shape, or Cancel to revert to the previous coordinates.

Edit mode is only available for the rectangular Box type. Freeform polygons and boundary selections are not editable after creation.

Visual Appearance

StateColor
Box created, not activeWhite / light gray
Box activated (analysis running)Cyan
Drawing in progressDashed yellow outline
Edit handlesBlue circular billboards

Keyboard Shortcuts

KeyAction
Right-clickCancel active drawing operation

Implementation Notes

Drawing is implemented using Cesium.ScreenSpaceEventHandler:

  • LEFT_DOWN + MOUSE_MOVE + LEFT_UP events track the drag gesture
  • Position is converted from screen coordinates to Cesium Cartesian3 using viewer.scene.globe.pick()
  • The box entity uses Cesium.PolygonGraphics for the fill and Cesium.PolylineGraphics for the outline