The ability to deal with input events is an important part of your application. LuciadRIA provides built-in controls for the most common tasks, such as panning and zooming on a map. These controls are automatically enabled when you create a new Map.

The class responsible for dealing with these input events from the user is called a Controller in the LuciadRIA API.

You can activate and de-activate controllers by setting the Map.controller property. When this property is set, any previously configured controller is de-activated, and the newly configured controller is activated. The controllers get notified of this state change through the Controller.onDeactivate() and Controller.onActivate() methods.

In the remainder of this tutorial, we describe some of the Controller implementations in the LuciadRIA API. You can also create your own custom controllers to handle custom user interaction. This is explained in Implementing custom user interaction.

Creating new vector features using the CreateController

The CreateController class makes it possible to initiate an interactive session of vector feature creation.

By default, users can place feature vertices through mouse clicks or free-hand drawing. You can configure the drawing mode as well as the minimum and maximum number of points to determine the actions you expect from the user.

For your convenience, LuciadRIA provides a concrete implementation, BasicCreateController. This controller implements Createcontroller.onCreateNewObject() by creating a new shape based on a shape type token that is passed to its constructor. It also wraps the shape in a Feature instance.

The usage of the BasicCreateController class is illustrated below:

Program: Using BasicCreateController (from samples/createedit/main.js)
var createController = new BasicCreateController(shapeType, {}, {
  finishOnSingleClick: true
});

Refer to sample samples.view.controller.CreateController and ObjectWithUUIDCreateController.js in samples.cop for complete illustrations.

Editing existing vector features

Graphical editing

To initiate an editing session, use an EditController. During a graphical editing session, users can modify the shape position by dragging the shape.

They can also modify the shape geometry by dragging one of its vertices. Vertices will automatically snap to other objects when they get close to them. To disable snapping while editing, hold down the Ctrl-key.

They can also insert new points by activating one of the control points located in between the vertices of a shape.

User can also delete vertices from the shape. Depending on the device they are using, they can delete a point by pressing and holding a control point, or by pressing the Ctrl-key and clicking the control point. In a desktop environment, users can also right-click a control point and select Delete from the pop-up menu.

graphicalEdit
Figure 1. Graphically editing a line shape

When an object is being edited, a commit is performed only at the end of an editing session. This prevents overly frequent updates of the Store during editing.

Editing is supported on WebGL maps in 2D and 3D.

However, only 2D shapes or 2D aspects of 3D shapes are editable. For example, you can edit only the base shape of an extruded shape.

Textual editing of vector features via the context menu

You can execute custom actions from the context menu. This is the menu that pops up when a user right-clicks an object. Those actions are typically used for editing or changing textual properties of a domain object.

You can add actions to any FeatureLayer by implementing the onCreateContextMenu method.

See the sample samples.view.controller.CreateController for example implementations of FeatureLayer.onCreateContextMenu.

Deleting vector features

You can delete vector features by removing them from their container model.