GlobeletJS

How to add GlobeletJS code to your webpage?

GlobeletJS is provided as an ESM import. Define your script tag as type="module", then import the module: import * as globeletjs from "https://unpkg.com/globeletjs@ /dist/globelet.js"; // Add code to initialize a globe here... // ...

How to initialize a globe?

The globeletjs object has an initGlobe method that can initialize a new globe as follows: const params = { container: 'globe', style: "./klokantech-basic-style-geojson.json", center: [-100, 38.5], altitude: 6280, }; const globePromise = globeletjs.initGlobe(params); The params object supplied to initGlobe can have the following properties: container (REQUIRED): An HTML DIV element (or its string ID) where the globe.

How to interact with the globe API?

The Promise returned by initGlobe resolves to an API object, which you can use to control the globe. globePromise.then(globeAPI => { globeAPI.startAnimation(); // ...etc. Do more things with globeAPI here...

How to add and remove markers?

A marker can be added to the globe as follows: const marker = globeAPI.addMarker(options); where options is an object with the following properties: element: A link to an HTML Element that will be used to visualize the marker position. If not supplied, a default SVG will be used type: The type of marker.