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
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",
name: "Earth",
terrain: new og.terrain.GlobusTerrain(),
layers: [osm],
autoActivate: true,
fontsSrc: "../res/fonts",
resourcesSrc: "../res",
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",
name: "Earth",
terrain: new GlobusTerrain(),
layers: [osm],
autoActivate: true,
fontsSrc: "../res/fonts",
resourcesSrc: "../res",
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
- Clone repository.
- Run in the repo folder:
npm install
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