# JSColorGrid

> Create a API with Module.createColorGrid.

```javascript
var colorGrid = Module.createColorGrid("ID");
```

## Function

### getId() → string

> Returns the Key of the object.

{% tabs %}
{% tab title="Information" %}

* Return
  * string: Successful return of the object's Key string.
  * null: If the object is null.
    {% endtab %}

{% tab title="Template" %}

```javascript
var strKey = object.getId();
```

{% endtab %}
{% endtabs %}

### SetGridPosition(leftTop, rightTop, rightBottom, leftBottom, altitude, row, col) → number

> Creates a 2D grid object based on four longitude and latitude coordinates.

{% tabs %}
{% tab title="Information" %}

| Name        | Type                                                                                        | Description                                     |
| ----------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| leftTop     | [JSVector2D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector2d) | Top left longitude and latitude coordinate.     |
| rightTop    | [JSVector2D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector2d) | Top right longitude and latitude coordinate.    |
| rightBottom | [JSVector2D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector2d) | Bottom right longitude and latitude coordinate. |
| leftBottom  | [JSVector2D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector2d) | Bottom left longitude and latitude coordinate.  |
| altitude    | number                                                                                      | Object height.                                  |
| row         | number                                                                                      | Number of horizontal grid cells.                |
| col         | number                                                                                      | Number of vertical grid cells.                  |

* Return
  * Total number of grid cells.
* Sample
  * Refer to function showGrid.
  * [Sandbox\_Grid(2D)](https://sandbox.egiscloud.com/code/main.do?id=object_grid_2d)
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid("COLOR_GRID_2D");
var gridCellNum = colorGrid2D.SetGridPosition(new Module.JSVector2D(124.2, 39), new Module.JSVector2D(130.5, 39), new Module.JSVector2D(130.5, 34.5), new Module.JSVector2D(124.2, 34.5), 100000.0, 100, 100);
```

{% endtab %}
{% endtabs %}

### SetGridPositionByCellOptions(leftTop, altitude, width, height, row, col) → number

> Creates a 2D grid object from the top left position.

{% tabs %}
{% tab title="Information" %}

| Name     | Type                                                                                        | Description                                 |
| -------- | ------------------------------------------------------------------------------------------- | ------------------------------------------- |
| leftTop  | [JSVector2D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector2d) | Top left longitude and latitude coordinate. |
| altitude | number                                                                                      | Object height.                              |
| width    | number                                                                                      | Width of the grid.                          |
| height   | number                                                                                      | Height of the grid.                         |
| row      | number                                                                                      | Number of horizontal grid cells.            |
| col      | number                                                                                      | Number of vertical grid cells.              |

* Return
  * Total number of grid cells.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid("COLOR_GRID_2D");
var gridCellNum = colorGrid2D.SetGridPositionByCellOptions(new Module.JSVector2D(124.2, 39), 100000.0, 1000, 1000, 100, 100);
```

{% endtab %}
{% endtabs %}

### SetGridPositionByCellSize(leftTop, rightBottom, altitude, width, height) → number

> Creates a 2D grid object based on minimum and maximum longitude and latitude coordinates.

{% tabs %}
{% tab title="Information" %}

| Name        | Type                                                                                        | Description                                     |
| ----------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| leftTop     | [JSVector2D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector2d) | Top left longitude and latitude coordinate.     |
| rightBottom | [JSVector2D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector2d) | Bottom right longitude and latitude coordinate. |
| altitude    | number                                                                                      | Object height.                                  |
| width       | number                                                                                      | Width of the grid.                              |
| height      | number                                                                                      | Height of the grid.                             |

* Return
  * Total number of grid cells.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid("COLOR_GRID_2D");
var gridCellNum = colorGrid2D.SetGridPositionByCellSize(new Module.JSVector2D(124.2, 39), new Module.JSVector2D(130.5, 34.5), 100000.0, 1000, 1000);
```

{% endtab %}
{% endtabs %}

### SetGridCellDefaultColor(color) → boolean

> Sets the default color value for the grid.

{% tabs %}
{% tab title="Information" %}

| Name  | Type                                                                                  | Description       |
| ----- | ------------------------------------------------------------------------------------- | ----------------- |
| color | [JSColor](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jscolor) | Grid color value. |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
* Sample
  * Refer to function showGrid.
  * [Sandbox\_Grid(2D)](https://sandbox.egiscloud.com/code/main.do?id=object_grid_2d)
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetGridCellDefaultColor(new Module.JSColor(255, 255, 255, 0));
```

{% endtab %}
{% endtabs %}

### SetGridCellColor(row, column, color) → boolean

> Sets the color value for the cell at the specified horizontal and vertical index.

{% tabs %}
{% tab title="Information" %}

| Name   | Type                                                                                  | Description            |
| ------ | ------------------------------------------------------------------------------------- | ---------------------- |
| row    | number                                                                                | Cell horizontal index. |
| column | number                                                                                | Cell vertical index.   |
| color  | [JSColor](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jscolor) | Cell color value.      |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
  * Failure conditions.
    * If the specified horizontal or vertical index exceeds the range.
* Sample
  * Refer to function showGrid.
  * [Sandbox\_Grid(2D)](https://sandbox.egiscloud.com/code/main.do?id=object_grid_2d)
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetGridCellColor(0, 0, new Module.JSColor(255, 255, 0, 0));
```

{% endtab %}
{% endtabs %}

### SetLeftToRightSlopeAngle(angle) → boolean

> Sets the slope angle along the x-axis.

{% tabs %}
{% tab title="Information" %}

| Name  | Type   | Description        |
| ----- | ------ | ------------------ |
| angle | number | Angle(in degrees). |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetLeftToRightSlopeAngle(30);
```

{% endtab %}
{% endtabs %}

### SetLeftToRightSlopeAngleByAltitude(left, right) → boolean

> Sets the slope based on altitude values for the left and right sides.

{% tabs %}
{% tab title="Information" %}

| Name  | Type   | Description                 |
| ----- | ------ | --------------------------- |
| left  | number | Altitude on the left side.  |
| right | number | Altitude on the right side. |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetLeftToRightSlopeAngleByAltitude(100000, 150000);
```

{% endtab %}
{% endtabs %}

### SetFrontToBackSlopeAngle(angle) → boolean

> Sets the slope angle along the y-axis.

{% tabs %}
{% tab title="Information" %}

| Name  | Type   | Description        |
| ----- | ------ | ------------------ |
| angle | number | Angle(in degrees). |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetFrontToBackSlopeAngle(30);
```

{% endtab %}
{% endtabs %}

### SetFrontToBackSlopeAngleByAltitude(top, bottom) → boolean

> Sets the slope based on altitude values for the top and bottom.

{% tabs %}
{% tab title="Information" %}

| Name   | Type   | Description             |
| ------ | ------ | ----------------------- |
| top    | number | Altitude at the top.    |
| bottom | number | Altitude at the bottom. |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetFrontToBackSlopeAngleByAltitude(100000, 150000);
```

{% endtab %}
{% endtabs %}

### SetDirectionAngle(angle) → boolean

> Sets the direction of the 2D grid object.
>
> The rotation information based on the angle input
>
> * 0, 360: North.
> * 90: East.
> * 180: South.
> * 270: West.

{% tabs %}
{% tab title="Information" %}

| Name  | Type   | Description      |
| ----- | ------ | ---------------- |
| angle | number | Direction angle. |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetDirectionAngle(0);
```

{% endtab %}
{% endtabs %}

### SetTerrainUnion(union) → boolean

> Sets whether the 2D grid object is combined with the terrain.

{% tabs %}
{% tab title="Information" %}

| Name  | Type    | Description                                                 |
| ----- | ------- | ----------------------------------------------------------- |
| union | boolean | true for terrain union, false for object-based positioning. |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetTerrainUnion(true);
```

{% endtab %}
{% endtabs %}

### SetTerrainUnionGap(altitude) → boolean

> Sets the height value after combining the 2D grid object with the terrain.

{% tabs %}
{% tab title="Information" %}

| Name     | Type   | Description              |
| -------- | ------ | ------------------------ |
| altitude | number | Height from the terrain. |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetTerrainUnion(true);
colorGrid2D.SetTerrainUnionGap(100);
```

{% endtab %}
{% endtabs %}

### SetDrawLine(type) → boolean

> Sets the creation of the border for the 2D grid object.
>
> The initial setting for border creation is false.

{% tabs %}
{% tab title="Information" %}

| Name | Type    | Description                                                            |
| ---- | ------- | ---------------------------------------------------------------------- |
| type | boolean | <p>true for creating a border.<br>false for not creating a border.</p> |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetDrawLine(true);
```

{% endtab %}
{% endtabs %}

### SetGridLineColor(color) → boolean

> Sets the border color of the 2D grid object.

{% tabs %}
{% tab title="Information" %}

| Name  | Type                                                                                  | Description   |
| ----- | ------------------------------------------------------------------------------------- | ------------- |
| color | [JSColor](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jscolor) | Border color. |

* Return
  * true: Object option setting successful.
  * false: Object option setting failed.
  * Failure conditions.
    * If the 2D grid border is not created.
* Sample
  * Refer to function showGrid.
  * [Sandbox\_Grid(2D)](https://sandbox.egiscloud.com/code/main.do?id=object_grid_2d)
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.SetGridLineColor(new Module.JSColor(255, 255, 0, 0));
```

{% endtab %}
{% endtabs %}

### GetGridLeftTopPosition() → [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d)

> Returns the top left longitude and latitude coordinate of the 2D grid object.

{% tabs %}
{% tab title="Information" %}

* Return
  * [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d): Returns the top left coordinates (longitude, latitude, altitude) of the object successfully.
  * null: Coordinate return failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.Create();

var position = colorGrid2D.GetGridLeftTopPosition();
var lon = position.Longitude;
var lat = position.Latitude;
var alt = position.Altitude;
```

{% endtab %}
{% endtabs %}

### GetGridRightTopPosition() → [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d)

> Returns the top right longitude and latitude coordinate of the 2D grid object.

{% tabs %}
{% tab title="Information" %}

* Return
  * [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d): Returns the top right coordinates (longitude, latitude, altitude) of the object successfully.
  * null: Coordinate return failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.Create();

var position = colorGrid2D.GetGridRightTopPosition();
var lon = position.Longitude;
var lat = position.Latitude;
var alt = position.Altitude;
```

{% endtab %}
{% endtabs %}

### GetGridLeftBottomPosition() → [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d)

> Returns the bottom left longitude and latitude coordinate of the 2D grid object.

{% tabs %}
{% tab title="Information" %}

* Return
  * [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d): Returns the bottom left coordinates (longitude, latitude, altitude) of the object successfully.
  * null: Coordinate return failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
//...set grid object options...
colorGrid2D.Create();

var position = colorGrid2D.GetGridLeftBottomPosition();

var lon = position.Longitude;
var lat = position.Latitude;
var alt = position.Altitude;
```

{% endtab %}
{% endtabs %}

### GetGridRightBottomPosition() → [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d)

> Returns the bottom right longitude and latitude coordinate of the 2D grid object.

{% tabs %}
{% tab title="Information" %}

* Return
  * [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d): Returns the bottom right coordinates (longitude, latitude, altitude) of the object successfully.
  * null: Coordinate return failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.Create();

var position = colorGrid2D.GetGridRightBottomPosition();
var lon = position.Longitude;
var lat = position.Latitude;
var alt = position.Altitude;
```

{% endtab %}
{% endtabs %}

### GetGridCellPosition(row, column) → [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d)

> Returns the central longitude and latitude coordinate of the cell at the specified horizontal and vertical index.

{% tabs %}
{% tab title="Information" %}

| Name   | Type   | Description            |
| ------ | ------ | ---------------------- |
| row    | number | Cell horizontal index. |
| column | number | Cell vertical index.   |

* Return
  * [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d): Returns the centroid coordinates (longitude, latitude, altitude) of the object successfully.
  * null: Coordinate return failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.Create();

var position = colorGrid2D.GetGridCellPosition(0, 0);
var lon = position.Longitude;
var lat = position.Latitude;
var alt = position.Altitude;
```

{% endtab %}
{% endtabs %}

### GetGridCellRect(row, column) → [JSVec3Array](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvec3array)

> Returns the coordinates of each point (4 points) of the cell at the specified horizontal and vertical index.

{% tabs %}
{% tab title="Information" %}

| Name   | Type   | Description            |
| ------ | ------ | ---------------------- |
| row    | number | Cell horizontal index. |
| column | number | Cell vertical index.   |

* Return
  * [JSVec3Array](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvec3array): Successfully returns the coordinates of each point.
  * null: Coordinate return failed.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.Create();

var position = colorGrid2D.GetGridCellRect(0, 0);

var leftTop = position.get(0);
var rightTop = position.get(1);
var rightbottom = position.get(2);
var leftbottom = position.get(3);

var lon = leftTop.Longitude;
var lat = leftTop.Latitude;
var alt = leftTop.Altitude;
```

{% endtab %}
{% endtabs %}

### GetGridCellIndexByPosition(position) → string

> Returns the cell index corresponding to the longitude and latitude coordinate.

{% tabs %}
{% tab title="Information" %}

| Name     | Type                                                                                        | Description                                                |
| -------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| position | [JSVector3D](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvector3d) | Cell location coordinates (longitude, latitude, altitude). |

* Return
  * string: Successfully returns the cell index number.
  * null: If the object is null.
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.Create();

var Index = colorGrid2D.GetGridCellIndexByPosition(new Module.JSVector2D(124.2, 39.5, 100));
```

{% endtab %}
{% endtabs %}

### GetGridEdgeLinePosition(type, value) → [JSVec3Array](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvec3array)

> Returns the start and end longitude and latitude coordinates of the edge of the 2D grid object.
>
> Coordinates returned based on the type input.
>
> * 0: top.
> * 1: right.
> * 2: bottom.
> * 3: left.

{% tabs %}
{% tab title="Information" %}

| Name  | Type   | Description         |
| ----- | ------ | ------------------- |
| type  | string | Edge setting value. |
| value | number | Edge margin.        |

* Return
  * [JSVec3Array](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/core/jsvec3array): Successfully returns the start and end points of the edge.
  * null: Coordinate return failed.
  * Failure conditions.
    * If a value greater than 4 is set for type.
      {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.Create();

var linelist = colorGrid2D.GetGridEdgeLinePosition(0, 0);
```

{% endtab %}
{% endtabs %}

### Create() → boolean

> Creates the 2D grid object based on the set options.

{% tabs %}
{% tab title="Information" %}

* Return
  * true: Object creation successful.
  * false: Object creation failed.
  * Failure conditions.
    * If no coordinates are entered.
    * If the specified horizontal or vertical index exceeds the range.
* Sample
  * Refer to function showGrid.
  * [Sandbox\_Grid(2D)](https://sandbox.egiscloud.com/code/main.do?id=object_grid_2d)
    {% endtab %}

{% tab title="Template" %}

```javascript
var colorGrid2D = Module.createColorGrid2D("COLOR_GRID_2D");
colorGrid2D.Create();
```

{% endtab %}
{% endtabs %}

## Getter / Setter

### getDescription(), setDescription(desc) → string

> Set a description for the object.

{% tabs %}
{% tab title="Information" %}

| Name | Type   | Description                |
| ---- | ------ | -------------------------- |
| desc | string | Object description string. |

* Return
  * string: Successful return of the object's description string.
  * null: If the object is null.
    {% endtab %}

{% tab title="Template" %}

```javascript
var strDesc = object.getDescription();
// ... or ...
object.setDescription("First Object.");
```

{% endtab %}
{% endtabs %}

### getName(), setName(name) → string

> Sets the name of the object.

{% tabs %}
{% tab title="Information" %}

| Name | Type   | Description                     |
| ---- | ------ | ------------------------------- |
| name | string | The name to set for the object. |

* Return
  * string: Successful return of the object's name.
  * null: If the object is null.
    {% endtab %}

{% tab title="Template" %}

```javascript
var objName = object.getName();
// ... or ...
object.setName("MyObject");
```

{% endtab %}
{% endtabs %}

### getVisible(), setVisible(visible) → boolean

> Sets the visibility state of an object.

{% tabs %}
{% tab title="Information" %}

| Name    | Type    | Description                                                      |
| ------- | ------- | ---------------------------------------------------------------- |
| visible | boolean | <p>true: Make the object visible.<br>false: Hide the object.</p> |

* Return
  * true: Object visible state.
  * false: Object hidden state.
    {% endtab %}

{% tab title="Template" %}

```javascript
var objName = object.getName();
// ... or ...
object.setVisible(true);
```

{% endtab %}
{% endtabs %}