# API

**Installation**
Clone the project from github and use following command
 ```sh
npm install
```
after all dependencies installation user needs to build the project using following command
```sh
npm run build-bundle        // Development Mode
npm run build-bundle-prod   // Production Mode
```
this will create a dist folder where user will get the `droneView.js` file

**Documentation**
Build documentation using following commands
 ```sh
npm run build-doc
```

**Usage**
Using Script
 ```javascript
<script src="dist/droneView.js"></script>
<script>
const viewer = DroneView.default;
</script>
```


**Load Viewer**
To load viewer you need token, Which you can get from [Cesium Ion](hhttps://cesium.com/ion/signin). You can simply sign in and create new token.
 ```javascript
new viewer({mapOptions})
```

**2D Mode**
Uer can use this API for switch to 2D mode
```javascript
switch2DMode()
```
**3D Mode**
User can use this API for switch to 3D Mode
```javascript
switch3DMode()
```

**Add 2D data Imaginary data**

```javascript
addImaginary(url: string)
```
* User can use this API to render 2D imaginary data
* User should call API with Url ( endpoint of WMS Server that server image data)
* API will return ImageryLayer

**Remove 2D data Imaginary data**

```javascript
removeImaginaryLayer(imageLayer: ImageryLayer)
```
* User can use this API to remove Imagery layer by call with ImageryLayer received when added that ImageryLayer

### Draw

To enable draw mode 
 ```javascript
enableDrawing(config: MeasurementConfig)
```
To disable draw mode

 ```javascript
disableDrawing()
```
To enable edit mode
 ```javascript
editDrawing()
```
* After enabling edit mode user can click on geometry which user want to edit.
* Once geometry is selected point on vertices will be added 
* User can select these point to move or to delete using DELETE button
* When user will move the vertices two point will be added between neighbor points
* User can use these points to edit the the shape also
* User can hit ENTER to finish editing


To enable delete mode

 ```javascript
deleteDrawing()
```
* After enabling delete mode user can click on geometry
Once geometry selected points on vertices will be added
* User can select multiple points and can delete using DELETE button

To get added geometry details
 ```javascript
onDraw(callback)
```
* User can use this call back function to get data when a drawing of geometry complete
User will get the id, positions array & type of drawing


* If user want to add some data to geometry for future, Use this function

| DrawingConfig Parameter | Type     | Description                |
| :-------- | :--------- | :------------------------- |
| `type` | `"LineString" | "Polygon" | "Point"` | **Required** |
| `fillColor` | `string` | **Optional**. Css hex color code example `"#ff0000"` Default : `White` |
| `lineColor` | `string` | **Optional**. Css hex color code example `"#ff0000"` Default: `white` |
| `strokeColor` | `string` | **Optional**. Css hex color code example `"#ff0000"` Default : `Black` |
| `opacity` | `number` | **Optional**. Float Number between `0-1` Deafult : 1 |
**DrawingConfig Example**
 ```javascript
DrawingConfig = {
        type:"Polygon",
        fillColor:"#ff0000", 
        opacity: 0.5, 
        lineWidth:6,
        strokeColor:"#aaaa00",
        lineColor:"#00ffaa"
}
```


#### Annotation/Label
```javascript
addLabel(config: LabelConfigByLatLng)
```
* User can add annotation using this API
* To automate user can user mouse event API and can use the result like position to add label
* API will return an ID

| LabelConfigByLatLng Parameter | Type     | Description                |
| :-------- | :--------- | :------------------------- |
| `id` | `string` | **Optional** Only ise when user specially want to assign ID or when user want to update previously added annotation |
| `fillColor` | `string` | **Optional**. font color example `"#ff0000"` Default : `White` |
| `text` | `string` | **Required** Text |
| `position` | `GlobalPosition {latitude: number,longitude: number, altitude: number}` | **Required** |
| `fillColor` | `string` | **Optional**. font color example `"#ff0000"` Default : `White` |
| `size` | `number` | **Optional**. Default : 20 |
| `isBackground` | `Boolean` | **Optional**. if user wants background color Default : `true` |
| `backgroundColor` | `string` | **Optional**. Css hex color code example `"#ff0000"` Default : `Black` |
| `opacity` | `number` | **Optional**. Float Number between `0-1` Deafult : 1 |

**DrawingConfig Example**
 ```javascript
LabelConfigByLatLng = {
    id: string // User can pass previous Id if he want to update
    name: string
    fillColor: "#ff0000"
    size?: 40
    isBackground?: true
    backgroundColor?: "#00ff00" // If user set isBackground true
    opacity?: 0.8
    text: "TEXT-OF-ANNOTATION";
    position: GlobalPosition;
}
```