# sj-ng-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 A

Latest version **0.1.0** (published 2021-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install sj-ng-webgl-globe
pnpm add sj-ng-webgl-globe
yarn add sj-ng-webgl-globe
bun add sj-ng-webgl-globe
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-05-05 |
| First published | 2021-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 105.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shiljith Mp |
| Maintainers | shiljith.mp |
| Keywords | Angular, Angular2, ng, sj, webgl, globe |

## Links

- npm: https://www.npmjs.com/package/sj-ng-webgl-globe
- Repository: https://github.com/shiljith/sj-ng-webgl-globe
- Homepage: https://github.com/shiljith/sj-ng-webgl-globe#readme
- Issues: https://github.com/shiljith/sj-ng-webgl-globe/issues
- npm.io page: https://npm.io/package/sj-ng-webgl-globe

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2021-05-05
- 0.0.2 — 2021-05-05
- 0.0.1 — 2021-05-05

## README

# 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)

---
_Source: https://npm.io/package/sj-ng-webgl-globe · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._