Openglobus

TypeScript/JavaScript 3D maps and geospatial data visualization engine library
Alternatives To Openglobus
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Cesium11,016227371a day ago119August 01, 20231,289apache-2.0JavaScript
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
Blendergis6,570
2 months ago220gpl-3.0Python
Blender addons to make the bridge between Blender and geographic data
L73,1902774 days ago549August 09, 2023134mitTypeScript
🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine
Vizicities2,686
15 years agoNovember 02, 2014106bsd-3-clauseJavaScript
A framework for 3D geospatial visualization in the browser
Terriajs1,0503093 days ago422September 15, 2023943apache-2.0TypeScript
A library for building rich, web-based geospatial data platforms.
Itowns9486144 days ago92September 20, 2023226otherJavaScript
A Three.js-based framework written in Javascript/WebGL for visualizing 3D geospatial data
Webworldwind797644 months ago6June 24, 2022262apache-2.0JavaScript
The NASA WorldWind Javascript SDK (WebWW) includes the library and examples for creating geo-browser web applications and for embedding a 3D globe in HTML5 web pages.
Worldwindjava676
2 months ago1February 17, 2021149otherJava
The NASA WorldWind Java SDK (WWJ) is for building cross-platform 3D geospatial desktop applications in Java.
Go Geom67110536 months ago28June 02, 20219bsd-2-clauseGo
Package geom implements efficient geometry types for geospatial applications.
Openglobus560
2 days ago47October 08, 202244mitTypeScript
TypeScript/JavaScript 3D maps and geospatial data visualization engine library
Alternatives To Openglobus
Select To Compare


Alternative Project Comparisons
Readme

NPM PACKAGE BUILD

Openglobus

English | 简体中文 | Portuguese-BR

Openglobus is a typescript/javascript library designed to display interactive 3D maps at a scale from planet to bee. It supports various high-resolution terrain providers, imagery layers, renders thousands of 3D objects, provides geometry measurement tools, and more. It uses the WebGL technology, open-source and completely free.

Openglobus main goal is to make 3D map features fast, good looking, user friendly and easy to implement in any related project.

Getting Start

Installation

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

Code: using umd lib


<link rel="stylesheet" href="../lib/@openglogus/og.css">
<script src="../lib/@openglogus/og.umd.js"></script>
<div id="globus"></div>
<script>

    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],
        autoActivate: true,
        fontsSrc: "../res/fonts", // Fonts folder
        resourcesSrc: "../res",   // Night and water mask terxtures folder
        viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
    });

</script>

Code: using esm lib


<link rel="stylesheet" href="../lib/@openglobus/og.css">
<div id="globus"></div>
<script type="module">

    import {XYZ, Globe, GlobusTerrain} from '../lib/@openglobus/og.esm.js';

    const osm = new XYZ("OpenStreetMap", {
        isBaseLayer: true,
        url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
    });

    const globus = new Globe({
        target: "globus", // a HTMLDivElement which its id is `globus`
        name: "Earth",
        terrain: new GlobusTerrain(),
        layers: [osm],
        autoActivate: true,
        fontsSrc: "../res/fonts",  // Fonts folder
        resourcesSrc: "../res",    // Night and water mask terxtures folder
        viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
    });

</script>

Frameworks integrations

Openglobus integrates well with front-end frameworks like React, Angular or Vuejs Read more here.

Documentation

UNDER CONSTRUCTION Here is a Wiki, also check out the hosted examples, and the API documentation.

Get Started to contribute

Development

  1. Clone repository.
  2. Run in the repo folder:
npm install
# if you use yarn, you can run `yarn`
yarn

Build Library

Run

npm run build

Then, it will generate 5 files at lib/@openglobus/:

  • og.umd.js
  • og.umd.js.map
  • og.esm.js
  • og.esm.js.map
  • og.css
  • ./res/...

Run examples

First, it starts by watching sources and building into ./lib folder esm module:

npm run dev

Second, runs local server, then you can browse 127.0.0.1:8080:

npm run serve

Third, try an example from the sandbox:

 http://127.0.0.1:8080/sandbox/osm/osm.html

Other scripts

npm run docs - build api documentation into /api folder

npm run serve - run local web server for develop and watch examples

npm run lint - run code linter

npm run test - run tests

tsc - run typescript parser

Support the Project

There are many ways to contribute back to the project:

  • Help us test new and existing features and report bugs
  • Help answer questions on the community forum and chat
  • ⭐️ us on GitHub
  • Spread the word about openglobus on social media
  • Become a contributor

License

MIT

Popular Geospatial Projects
Popular 3d Graphics Projects
Popular Mapping Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Typescript
3d Graphics
Webgl
Gis
Earth
Geospatial
Api Documentation
Lidar
Terrain
Globe