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
npm install sj-ng-webgl-globe --saveUsage
First you should include api.js into the script tag of angular.json file.
"scripts": [
"node_modules/sj-ng-webgl-globe/assets/api.js"
]Next import the SJNgWebglGlobeModule into your application module.
import { SJNgWebglGlobeModule } from 'sj-ng-webgl-globe';@NgModule({
imports: [
...
SJNgWebglGlobeModule
]
...
})
export class AppModule { }At last include sj-ng-webgl-globe tag in to your component html file.
<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:
<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.
<sj-ng-webgl-globe [markers]=markers></sj-ng-webgl-globe>Where markers is array of objects.
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)