Skip to content

Commit e7670b7

Browse files
xSentryxSentry
committed
Added template, styling and component for v1.0.0
0 parents  commit e7670b7

12 files changed

+458
-0
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Omnedia
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
## ngx-globe
2+
3+
`@omnedia/ngx-globe` is an Angular library that provides an interactive 3D globe visualization. The globe is rendered using the cobe library, allowing for smooth animations, rotation, and customizable markers. This component is highly configurable, making it ideal for displaying geographic data or adding a dynamic visual element to your Angular application.
4+
5+
## Features
6+
7+
- Interactive 3D globe visualization with customizable rotation and markers.
8+
- Customizable globe size, colors, and appearance.
9+
- Smooth animation using the cobe library for rendering and rotation.
10+
- Lightweight and easy to integrate as a standalone component.
11+
12+
## Installation
13+
14+
Install the library and its peer dependency using npm:
15+
16+
```bash
17+
npm install @omnedia/ngx-globe
18+
npm install cobe --save
19+
```
20+
21+
cobe is required as a peer dependency for this library to function properly.
22+
23+
## Usage
24+
25+
Import the `NgxGlobeComponent` in your Angular module or component:
26+
27+
```typescript
28+
import { NgxGlobeComponent } from '@omnedia/ngx-globe';
29+
30+
@Component({
31+
...
32+
imports: [
33+
...
34+
NgxGlobeComponent,
35+
],
36+
...
37+
})
38+
```
39+
40+
Use the component in your template:
41+
42+
```html
43+
<om-globe
44+
[rotationSpeed]="0.002"
45+
[globeSize]="800"
46+
[globeOptions]="{
47+
markers: [{ location: [34.0522, -118.2437], size: 0.1 }],
48+
baseColor: [0.5, 0.5, 1],
49+
glowColor: [1, 0.5, 0.5],
50+
markerColor: [0, 1, 0]
51+
}"
52+
styleClass="custom-globe-class"
53+
></om-globe>
54+
```
55+
56+
## API
57+
58+
```html
59+
<om-globe
60+
[rotationSpeed]="rotationSpeed"
61+
[globeSize]="globeSize"
62+
[globeOptions]="globeOptions"
63+
styleClass="your-custom-class"
64+
>
65+
</om-globe>
66+
```
67+
68+
- rotationSpeed (optional): The speed of the globe's rotation. Defaults to 0.005.
69+
- globeSize (optional): The size of the globe in pixels. Defaults to 600px.
70+
- globeOptions (optional): An object containing options for customizing the globe's appearance, such as marker locations, colors, and brightness.
71+
- styleClass (optional): A custom CSS class to apply to the globe's wrapper element.
72+
73+
## Example
74+
75+
```html
76+
<om-globe
77+
[rotationSpeed]="0.01"
78+
[globeSize]="500"
79+
[globeOptions]="{
80+
markers: [{ location: [51.5074, -0.1278], size: 0.1 }],
81+
baseColor: [0.2, 0.2, 1],
82+
markerColor: [1, 0.2, 0.2],
83+
glowColor: [0.9, 0.9, 0.9]
84+
}"
85+
styleClass="globe-custom-style"
86+
></om-globe>
87+
```
88+
89+
This will render a globe with a custom size, rotation speed, and marker at the specified location (London, UK).
90+
91+
## Globe Options
92+
93+
The globeOptions input allows you to configure various aspects of the globe's appearance and behavior:
94+
95+
- `markers`: An array of objects defining locations and sizes of markers on the globe. Each marker should have a location (an array of latitude and longitude) and a size (a number).
96+
- `baseColor`: The color of the globe in the form of an RGB array (e.g., [1, 1, 1] for white).
97+
- `glowColor`: The color of the globe's glow, also an RGB array.
98+
- `markerColor`: The color of the markers on the globe, also an RGB array.
99+
- `mapSamples`: Number of samples for the texture mapping.
100+
- `mapBrightness`: Brightness of the map texture.
101+
- `diffuse`: The intensity of the globe's diffuse lighting.
102+
103+
## Dependencies
104+
105+
This library uses the cobe npm package as a peer dependency to handle the rendering of the globe. Make sure to install it alongside this library for proper functionality.
106+
107+
```bash
108+
npm install cobe --save
109+
```
110+
111+
## Styling
112+
113+
To customize the appearance of the globe or container, use the styleClass input to apply your own CSS classes.
114+
115+
```css
116+
.globe-custom-style {
117+
background-color: #000;
118+
border-radius: 50%;
119+
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
120+
}
121+
```
122+
123+
## Contributing
124+
125+
Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
126+
127+
## License
128+
129+
This project is licensed under the MIT License.

‎ng-package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../../dist/ngx-globe",
4+
"lib": {
5+
"entryFile": "src/public-api.ts"
6+
}
7+
}

‎package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "@omnedia/ngx-globe",
3+
"description": "A simple component library to create a container with an animated and interactive globe.",
4+
"version": "1.0.0",
5+
"peerDependencies": {
6+
"@angular/common": "^18.2.0",
7+
"@angular/core": "^18.2.0",
8+
"cobe": "^0.6.3"
9+
},
10+
"dependencies": {
11+
"tslib": "^2.3.0"
12+
},
13+
"sideEffects": false,
14+
"keywords": [
15+
"npm",
16+
"globe",
17+
"3d",
18+
"interactive",
19+
"animation"
20+
],
21+
"repository": {
22+
"url": "https://github.com/omnedia/ngx-globe"
23+
},
24+
"author": "Markus Block ([email protected])",
25+
"license": "MIT"
26+
}

‎src/lib/ngx-globe.component.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="om-globe" [ngStyle]="style">
2+
<div class="om-globe-background">
3+
<canvas (pointerdown)="updatePointerInteraction($event.clientX - pointerInteractionMovement)"
4+
(pointerup)="updatePointerInteraction(null)" (pointerout)="updatePointerInteraction(null)"
5+
(mousemove)="updateMovement($event.clientX)" (touchmove)="updateMovement($event.touches[0].clientX)"
6+
width="1000" height="1000" #globeCanvas></canvas>
7+
</div>
8+
</div>

‎src/lib/ngx-globe.component.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.om-globe {
2+
--globe-size: 600px;
3+
position: relative;
4+
width: var(--globe-size);
5+
height: var(--globe-size);
6+
overflow: hidden;
7+
8+
.om-globe-background {
9+
position: absolute;
10+
width: 100%;
11+
max-width: var(--globe-size);
12+
aspect-ratio: 1/1;
13+
margin-left: auto;
14+
margin-right: auto;
15+
inset: 0;
16+
17+
canvas {
18+
width: 100%;
19+
height: 100%;
20+
contain: layout paint size;
21+
opacity: 1;
22+
cursor: grab;
23+
}
24+
}
25+
}

‎src/lib/ngx-globe.component.ts

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import { CommonModule } from '@angular/common';
2+
import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
3+
import { COBEOptionsPart, GlobeOptions } from './ngx-globe.types';
4+
import createGlobe from 'cobe';
5+
import Phenomenon from 'phenomenon';
6+
7+
@Component({
8+
selector: 'om-globe',
9+
standalone: true,
10+
imports: [CommonModule],
11+
templateUrl: "./ngx-globe.component.html",
12+
styleUrl: "./ngx-globe.component.scss",
13+
})
14+
export class NgxGlobeComponent implements AfterViewInit, OnDestroy {
15+
@ViewChild('globeCanvas')
16+
globeCanvas!: ElementRef<HTMLCanvasElement>;
17+
18+
@Input("styleClass")
19+
styleClass?: string;
20+
21+
@Input("rotationSpeed")
22+
rotationSpeed = 0.005;
23+
24+
@Input("globeOptions")
25+
set globeOptions(options: GlobeOptions) {
26+
this.globeSize = options.width ?? this.globeSize;
27+
this.setGlobeOptions(options);
28+
29+
if (this.globeInitialized) {
30+
this.initGlobe();
31+
}
32+
}
33+
34+
@Input("globeSize")
35+
set globeCanvasSize(size: number) {
36+
this.globeSize = size;
37+
this.cobeOptions.width = this.globeSize;
38+
this.cobeOptions.height = this.globeSize;
39+
this.style["--globe-size"] = size + 'px';
40+
41+
if (this.globeInitialized) {
42+
this.initGlobe();
43+
}
44+
}
45+
46+
style: any = {};
47+
48+
private globeSize = 600;
49+
50+
private globeInitialized = false;
51+
52+
private globe?: Phenomenon;
53+
54+
cobeOptions: COBEOptionsPart = {
55+
devicePixelRatio: 2,
56+
width: this.globeSize,
57+
height: this.globeSize,
58+
phi: 0,
59+
theta: 0.3,
60+
dark: 0,
61+
diffuse: 0.4,
62+
scale: 1,
63+
mapSamples: 16000,
64+
mapBrightness: 1.2,
65+
baseColor: [1, 1, 1],
66+
markerColor: [251 / 255, 100 / 255, 21 / 255],
67+
glowColor: [1, 1, 1],
68+
offset: [0, 0],
69+
markers: [
70+
{ location: [14.5995, 120.9842], size: 0.03 },
71+
{ location: [19.076, 72.8777], size: 0.1 },
72+
{ location: [23.8103, 90.4125], size: 0.05 },
73+
{ location: [30.0444, 31.2357], size: 0.07 },
74+
{ location: [39.9042, 116.4074], size: 0.08 },
75+
{ location: [-23.5505, -46.6333], size: 0.1 },
76+
{ location: [19.4326, -99.1332], size: 0.1 },
77+
{ location: [40.7128, -74.006], size: 0.1 },
78+
{ location: [34.6937, 135.5022], size: 0.05 },
79+
{ location: [41.0082, 28.9784], size: 0.06 },
80+
],
81+
};
82+
83+
private pointerInteracting: any = null;
84+
pointerInteractionMovement = 0;
85+
private globeRotation = 0;
86+
87+
ngAfterViewInit(): void {
88+
this.initGlobe();
89+
}
90+
91+
ngOnDestroy(): void {
92+
this.globe?.destroy();
93+
}
94+
95+
initGlobe(): void {
96+
let phi = this.cobeOptions.phi;
97+
let cobeOptions = {
98+
...this.cobeOptions,
99+
onRender: (state: any) => {
100+
if (!this.pointerInteracting) {
101+
phi += this.rotationSpeed;
102+
}
103+
104+
state.phi = phi + this.globeRotation
105+
},
106+
}
107+
108+
this.globe = createGlobe(this.globeCanvas.nativeElement, cobeOptions);
109+
110+
this.globeInitialized = true;
111+
112+
this.globeCanvas.nativeElement.width = this.globeSize;
113+
this.globeCanvas.nativeElement.height = this.globeSize;
114+
}
115+
116+
updatePointerInteraction(value: any): void {
117+
this.pointerInteracting = value;
118+
this.globeCanvas.nativeElement.style.cursor = value ? "grabbing" : "grab";
119+
};
120+
121+
updateMovement(clientX: any): void {
122+
if (this.pointerInteracting !== null) {
123+
const delta = clientX - this.pointerInteracting;
124+
this.pointerInteractionMovement = delta;
125+
this.globeRotation = delta / 200;
126+
}
127+
};
128+
129+
setGlobeOptions(options: GlobeOptions): void {
130+
this.cobeOptions.width = options.width ?? this.cobeOptions.width
131+
this.cobeOptions.height = options.height ?? this.cobeOptions.height
132+
this.cobeOptions.phi = options.phi ?? this.cobeOptions.phi
133+
this.cobeOptions.theta = options.theta ?? this.cobeOptions.theta
134+
this.cobeOptions.mapSamples = options.mapSamples ?? this.cobeOptions.mapSamples
135+
this.cobeOptions.mapBrightness = options.mapBrightness ?? this.cobeOptions.mapBrightness
136+
this.cobeOptions.mapBaseBrightness = options.mapBaseBrightness ?? this.cobeOptions.mapBaseBrightness
137+
this.cobeOptions.baseColor = options.baseColor ?? this.cobeOptions.baseColor
138+
this.cobeOptions.markerColor = options.markerColor ?? this.cobeOptions.markerColor
139+
this.cobeOptions.glowColor = options.glowColor ?? this.cobeOptions.glowColor
140+
this.cobeOptions.markers = options.markers ?? this.cobeOptions.markers
141+
this.cobeOptions.diffuse = options.diffuse ?? this.cobeOptions.diffuse
142+
this.cobeOptions.devicePixelRatio = options.devicePixelRatio ?? this.cobeOptions.devicePixelRatio
143+
this.cobeOptions.dark = options.dark ?? this.cobeOptions.dark
144+
this.cobeOptions.opacity = options.opacity ?? this.cobeOptions.opacity
145+
this.cobeOptions.offset = options.offset ?? this.cobeOptions.offset
146+
this.cobeOptions.scale = options.scale ?? this.cobeOptions.scale
147+
this.cobeOptions.context = options.context ?? this.cobeOptions.context
148+
}
149+
}

0 commit comments

Comments
 (0)