Integration with Angular Framework

[Visualityity]

Hi, I'm sorry if this is very obvious, but I've been playing about for 2 days now and can't get to integrate a globe with street view in to an Angular App

I know there's Cesium and three.js superset of WebGL, but it's not quite the same as WebGLEarth, Cesium alone always seems slower and I can't find a way of integrating a street view maps provider to three.js, only static images

The issue in Angular is that it doesn't recognise the WE variable in the code.

Any ideas of feasibility or has this already been done by someone?

EDIT: Could it be a good idea to create a NPM module for this? Happy to help

Thanks in advance

Steven

[macon-suckow]

I know this is a pretty outdated post, but I came across a need for this recently and took it as an opportunity to give it a shot. Not sure if you need this answer still or not, but somebody might down the road. So here it is.

1) Download the webgl.js file here and place in src/assets. 2) In angular.json navigate down to projects -> {{project}} -> architect -> build -> scripts. a. Scripts may not be there by default, but it is an option. b.

            "scripts": [
              "src/assets/webgl.js"
            ]

3) What this does, is that it tells Angular to load this script into the compiled code and load the script to where you can access from the components. 4) In the component you want access to it, lets say app.component.ts you will need to declare a variable

...
import { Component } from '@angular/core';
declare var WE: any;
...

5) Then you can use the variable WE as you would have normally. 6) So for mine I setup this in the ngOnInit

...
  public ngOnInit(): void {
    this.earth = new WE.map('earth_div', this.options);
    WE.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=nuJz6LyJiuvZ76k1NwsQ', {
            tileSize: 512,
            tms: false
        }).addTo(this.earth);
  }
...

[SatellitesAndRainforests]

this.earth = new WE.map('earth_div', this.options); WE.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=nuJz6LyJiuvZ76k1NwsQ', { tileSize: 512, tms: false }).addTo(this.earth);

thanks! what code should be in the .html and the rest of the code in the .ts to display a simple globe ?

[macon-suckow]

HTML:

<div #earth_div id="earth_div" class="earth" (pinchin)="onPinchIn($event)" (pinchout)="onPinchOut($event)"></div>

CSS:

.earth {
  top: 130px;
  right: 30em;
  bottom: 2.5em;
  left: 2.5em;
  position: absolute !important;
  border-radius: 15px;
}

TS:

      this.earth = new WE.map('earth_div', { 
        atmosphere: true,
        center: [this.defaultLatitude, this.defaultLongitude], 
        altitude: 12000000,
        minAltitude: 3000000, 
        maxAltitude: 30000000 
      });
      WE.tileLayer(`https://api.maptiler.com/maps/basic/256/{z}/{x}/{y}@2x.png?key=${this.key}`).addTo(this.earth);

[SatellitesAndRainforests]

Thank You, sorry for the late reply. I still couldn't make it work. Turned out 'Chrome --> Settings --> Advanced --> System --> 'Use hardware acceleration when available' needed to be turned on! apparently "The WebGL initialization failed error is a common one, and it's usually caused by a graphics-processing unit (GPU) compatibility issue."