Sj-ng-webgl-globe NPM

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

Angular Angular2 ng sj webgl globe

tslib

@infinitebrahmanuniverse/nolb-sj @everything-registry/sub-chunk-2773

0.1.0

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago