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.
Playground: https://jsfiddle.net/tbo47/27b8dsg1/
Examples: https://openglobus.org/examples/
npm install @openglobus/og
# or
yarn add @openglobus/og
<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 textures folder
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
});
</script>
<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 textures folder
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
});
</script>
Openglobus integrates well with front-end frameworks like React, Angular or Vuejs Read more here.
UNDER CONSTRUCTION Here is a Wiki, also check out the hosted examples, and the API documentation.
- Clone repository.
- Run in the repo folder:
npm install
# if you use yarn, you can run `yarn`
yarn
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/...
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
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
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
- Support with money https://opencollective.com/openglobusjs