openglobus/framework-intergration.md

Frameworks integrations

npm install @openglobus/og --save
# or
yarn add @openglobus/og

Code: using reactjs

example

Code: using in Angular

import { Component, OnInit } from '@angular/core';
import * as og from '@openglobus/og';

@Component({
  template: '<div id="globus" style="width:100%;height:100%"></div>'
})
export class GlobeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const osm = new og.layer.XYZ('OpenStreetMap', {
      isBaseLayer: true,
      url: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      visibility: true,
    });
    const globus = new og.Globe({
      target: 'globus', // a HTMLDivElement which its id is `globus`
      name: 'Earth',
      terrain: new og.terrain.GlobusTerrain(),
      layers: [osm],
      autoActivated: true
    });
    globus.planet.flyLonLat(new og.LonLat(2, 48, 20108312));
  }

}

Note: tsconfig.json compilerOptions>strict need to be false

Note: You will need to import the css in angular.json

"styles": [
  "node_modules/@openglobus/og/css/og.css",
  ...
],

Code: using in VueJs

<template>
  <div id="globus" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as og from "@openglobus/og";

export default {
  name: "openglobus",
  mounted() {
    const osm = new og.layer.XYZ("OpenStreetMap", {
      isBaseLayer: true,
      url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      visibility: true,
    });
    const globus = new og.Globe({
      target: "globus", // a HTMLDivElement which its id is `globus`
      name: "Earth",
      terrain: new og.terrain.GlobusTerrain(),
      layers: [osm],
      autoActivated: true
    });
    globus.planet.flyLonLat(new og.LonLat(2, 48, 20108312));
  }
};
</script>