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.

In the LuciadRIA API, the Controller class deals with these input events from the user.

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

In this tutorial, we describe some Controller implementations in the LuciadRIA API. You can also create your own custom controllers to handle custom user interaction. See Implementing custom user interaction for more information.

Creating new vector features using the CreateController

The CreateController class makes it possible to start 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 and 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 passed to its constructor. It also wraps the shape in a Feature instance.

This is an illustration of the usage of the BasicCreateController class:

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

See the sample samples.view.controller.CreateController and ObjectWithUUIDCreateController.js in samples.cop for complete illustrations.

Editing existing vector features

Graphical editing

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

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

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

User can also delete vertices from the shape. Depending on the device they’re 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.

Figure 1. Graphically editing a line shape

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

WebGL maps support editing in 2D and 3D.

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.