MapViewerNode¶

AMapViewerNode represents an interactive element, entity or node, and it normally represents a seat or a section. You will see that most of the API methods have an input or output with these MapViewerNodes. A MapViewerNode is represented as a Javascript Object with the following properties:

• id (string): Unique node ID. For instance,S_115 is the id representing section 115. It is possible that this id might change if the map have translations assigned with a client_id.
• original_id (string): Unique Original node ID assigned in our end. If there are no translations, then original_id === id.
• aliases (Set<string>): Set with a list of aliases of this node. They can be use on any input that requires a node id.
• type (string): Indicates the node type, generally section or seat. The node type is important because most of the API methods ask the node type as an input parameter, as several actions depend on the type. You can read more about types here.
• state (string): current node state. You can see the available states here.
• tag (string | null): Nodes can have a tag assigned (just one tag) or null in case of not having it. A tag can define a custom style inside a state. You can read more about tags here.
• hover (boolean): true if the mouse is over it (or forced with hover method).
• parent (string | null): Parent identifier of the node. When we say that a node has a parent, this means that the node belongs to a hierarchy. For instance, section S_115 could have parent null (not belonging to a higher structure), while seatS_115-A-11 would have section S_115 as its parent (seat S_115-A-11 belongs to section S_115).
• children (string[]): List with the ids of its children, if any.
• groups (string[]): Groups that the node belongs to are indicated here (only if the node belongs to some group). You can read more about groups here.
• aabb (number[]): Axis aligned bounding box. Array of 4 numbers, representing the minimum bounding box of a node, aligned with the axis. Its value represents [x, y, width, height], where the (x, y) is the upper left corner.
• on_screen (boolean): true if the node is inside the current viewport. Note that if the node has no styles and is not painted, but is inside the viewport, even so, it will be considered that is on screen.
• row_id (string) [optional]: Only present if the node is part of a row. Id of the row.
• row ((string|null)[]) [optional]: Only present if the node is part of a row. Array of unique IDs of the nodes belonging to the same row as this node. Nodes are ordered.
• rows (Object) [optional]: Only present if the node has rows as children. Properties are the row id, and value are the ordered row with node ids.
• label (string|null) [optional]: Label to be drawn over the node. This is a legacy property that shows the first label of the node.
• labels (Labels[]) [optional]: Labels to be drawn over the node. A label object has the same properties as the output of getLabel.
• description (string) [optional]: Shows a description of the node. Usually is the id without S_.
• instance (MapViewer): Map Viewer instance this node belongs to.
• anchor (Object) [optional]: returns the position of the node. It usually is the center or the centroid of the node's geometry. It has the following properties:
  • dom (number[]): Array with the DOM coordinates [x,y] in pixels relatives to the dom element representing the map. The top left corner of the map element n the dom will be coordinate [0,0], and the bottom right corner will be [width,height]. Useful to create popups over the map.
  • scene (number[]): Array with the scene coordinates [x,y] in pixels relatives to the internal coordinate system. All nodes have a fixed position in the scene, independently of the scaling factor or translation of the viewport. Useful to be used with methods that accepts scene coordinates like focusOn, goTo or getNodesAt.
• getBoundingClientRect() (DOMRectReadOnly) [optional]: Function that simulates the html getBoundingClientRect function, returning a DOMRectReadOnly. As the majority of nodes are drawn on a canvas and they are not HTML elements, this function can be useful to put html elements, like popups, over the map elements.

MapViewerNode example¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// A seat node without tag and without groups
{
    id: "S_115-A-7",
    original_id: "S_115-A-7",
    hover: false,
    state: "available",
    tag: null,
    parent : "S_115",
    groups: [],
    row_id: "A",
    row: ["S_115-A-1", "S_115-A-2", "S_115-A-3", "S_115-A-4", "S_115-A-5", "S_115-A-6", "S_115-A-7", "S_115-A-8"],
    type: "seat",
    ...
}

States¶

The node state indicates the logic behind its interaction. Usually the available states are the following:

• available: An available node represents a node that can be selected.
• unavailable: An unavailable node represents a node that cannot be selected.
• selected: A selected node represents a node that was previously available and has been selected.
• disabled: A disabled node behaves the same way that an unavailable node, but its state cannot change to available (although this could be forced with enable and disable methods).

You can read more about state changes here.

Tags¶

The intention of tags is to define custom styles for states.

One node can have one single tag, or none.

Every state has a default way to be painted in the scene. You can read more about styles here. In addition, custom styles can be specified for each state. The way to identify these styles is called style tag or just tag.

Tags work as follows:

• When a node is going to be painted in the Viewer, its state and its tag are checked.
  • If the state has a custom style for its tag, this style is used.
  • If the state does not have a custom style for its tag, the default style is used for this state.
  • If the node does not have any tag, the default style of the state will be used.

For instance:

We have normal seats in a map (without tags) and wheelchairs (tag "disabled"). We want the seats to be painted equally when their state is unavailable, but we want them to be painted differently when their state is available.

In this case, we do not specify anything on unavailable styles, but we would specify custom styles for "disabled" tag on available state.

When an unavailable seat tagged as "disabled" is going to be painted, the system will not find a custom style for the tag, so it will use the default style. The same seat being available will find a custom style for its tag.

The workflow is similar if we were using CSS classes.

The following methods allow to configure the nodes tags:

• getNodesByTag
• setNodesTag

Groups¶

The intention of groups is organization and logic.

One node can have 0, 1, or N groups.

Once all groups are assigned to the nodes, the Viewer can obtain the union or the intersection of one or more groups. As its output is used as input for other methods (for example setAvailable), these methods can be useful when using filters (or multiple filters thanks to the intersection).

The following methods allow working with groups:

• getNodesByGroups
• addNodesToGroup
• removeNodesFromGroup

Groups can be used to styles, instead of tags, using styles_by_groups flag.

Types¶

A MapViewerNode can have different types that will define behaviors and different styles. The most common are:

• section

• seat¶

  But it may be more types with every map. You can check what types a map have with the method getTypesList.