# SJ Angular WebGL Globe

The fastest way to embed a 3D reactive globe in your Angular application using WebGL Earth. It is an open-source virtual globe made with HTML5 and Canvas WebGL technology. It comes with a JavaScript API adapting the popular LeafletJS API. On top of this API i created a library wrapper for Angular.

## Installation

```bash
npm install sj-ng-webgl-globe --save
```

## Usage
First you should include **api.js** into the script tag of **angular.json** file.
```json
"scripts": [
	"node_modules/sj-ng-webgl-globe/assets/api.js"
]
```
Next import the **SJNgWebglGlobeModule** into your application module.

```ts
import { SJNgWebglGlobeModule } from 'sj-ng-webgl-globe';
```

```ts
@NgModule({
  imports: [
    ...
    SJNgWebglGlobeModule
  ]
  ...
})
export class AppModule { }
```

At last include **sj-ng-webgl-globe** tag in to your component html file.
```html
<sj-ng-webgl-globe></sj-ng-webgl-globe>
```

##Options


| Options  |Type   |Default   |Description   |
| ------------ | ------------ | ------------ | ------------ |
|center | Array | null | Lat, lng center of view.|
| zoom | Number | null | Sets zoom.|
| altitude | Number| 7000000 | Sets altitude of view in meters.|
| atmosphere | Boolean | false | Show the athmosphere. Best used with black background sets by CSS.|
|sky| Boolean| false| Show stars.|
| minAltitude| Number | 20 | Sets lower altitude limit for interactions.|
|maxAltitude| Number | Infinity | Sets upper altitude limit for interactions.|
|dragging| Boolean | true | Allow interaction.|
|tilting| Boolean| true | Allow tilt the view.|
|zooming| Boolean | true | Allow zooming.|
|scrollWheelZoom | Boolean | true | Sets mouse scroll wheel zoom.|
| unconstrainedRotation | Boolean | false | Modifies the interaction to allow arbitrary rotation (unconstrained by Z axis).|
| proxyHost | String | | Link to proxy map tiles cross-domain (without CORS headers on server).|

Example: 
```html
<sj-ng-webgl-globe [zooming]="false" [dragging]="false" [sky]="true"></sj-ng-webgl-globe>
```
## Marker
If you want to add marker into your globe please use **[markers]** attribute.
```html
<sj-ng-webgl-globe [markers]=markers></sj-ng-webgl-globe>
```
Where markers is array of objects.
```ts
 markers = [
    {
      latitude: -22.971200,
      longitude: -46.996410,
      isPopupEnable: true,
      popupHTML: `
        <div>
          <h3>Heading</h3>
          <p>Body of the popup</p>
        </div>
      `
    },
    {
      latitude: 22.971200,
      longitude: 46.996410,
      isPopupEnable: false,
    }
  ];
```
## Author
Shiljith Mp (Angular Developer)

## License
[MIT](./LICENSE)