# LineMapLayer

LineMapLayer renders a line or area according to the information in latitude and longitude.\
Layer for HarmoVisLayers.

#### Examples

```javascript
<HarmoVisLayers ...
    layers={[
        new LineMapLayer( { data: this.props.linemapData } )
    ]}
/>
```

#### Properties

Inherits from Base Layer properties.

| Properties        | PropTypes       | Default                     | Description                                      |
| ----------------- | --------------- | --------------------------- | ------------------------------------------------ |
| id                | string option   | 'LineMapLayer'              | Layer id                                         |
| data              | Array required  | --                          | state `linemapData`                              |
| lineOpacity       | Number option   | 1.0                         | Line opacity                                     |
| polygonOpacity    | Number option   | 0.5                         | Polygon Opacity                                  |
| getWidth          | Function option | x => x.strokeWidth \|\| 1   | Line Width specification accessor.               |
| getColor          | Function option | x => x.color \|\| WHITE     | object color specification accessor.             |
| getSourcePosition | Function option | x => x.sourcePosition       | Line source position specification accessor.     |
| getTargetPosition | Function option | x => x.targetPosition       | Line target position specification accessor.     |
| getPath           | Function option | x => x.path \|\| \[]        | Connecting line position specification accessor. |
| getPolygon        | Function option | x => x.polygon \|\| \[]     | 3-D object position specification accessor.      |
| getCoordinates    | Function option | x => x.coordinates \|\| \[] | area position specification accessor.            |
| getElevation      | Function option | x => x.elevation \|\| 3     | 3-D object height specification accessor.        |
| getDashArray      | Function option | x => x.dash \|\| \[0,0]     | Dotted line pattern specification accessor.      |

#### The json format of the line data file

```javascript
// linemapData (Define as needed)
[  // line source & target
   { "sourcePosition": [999.9999, 999.9999, 999.9999], // line start position (long,Lati,height)
     "targetPosition": [999.9999, 999.9999, 999.9999], // line end position (long,Lati,height)
   },・・・・・・
   // Connecting line
   { "path": [[999.9999, 999.9999, 999.9999], // line path position (long,Lati,height)
              [999.9999, 999.9999, 999.9999]・・・・・・],
     "dash ": [5,2], // line pattern
   },・・・・・・
   // 3-D object
   { "polygon": [[999.9999, 999.9999, 999.9999], // polygon path position (long,Lati,height)
                 [999.9999, 999.9999, 999.9999]・・・・・・],
     "elevation ": 999, // 3-D object height
   },・・・・・・
   // Area object
   { "coordinates":[[999.9999, 999.9999, 999.9999], // coordinates path position (long,Lati,height)
                    [999.9999, 999.9999, 999.9999]・・・・・・],
   },・・・・・・
]
```

#### Reserved key name of simulation data file

```
sourcePosition, targetPosition, path, polygon, coordinates
```

**Display example**

<div align="left"><img src="https://4102328192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWxk9k4ZoHtWQJdRi1G%2F-LvE5vuYcPgsmTRjvztz%2F-LvE6XNy-Z-TyX0aSo_x%2Flinemap_sample.jpg?alt=media&#x26;token=59092088-dedd-40cb-838f-f487858ee5d2" alt=""></div>
