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 --save

Usage

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)

License

MIT