@openglobus/og 0.17.1 → 0.18.0

package/README.md

@@ -1,14 +1,17 @@
 [![NPM PACKAGE](https://img.shields.io/npm/v/@openglobus/og.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/@openglobus/og)
+![BUILD](https://github.com/openglobus/openglobus/actions/workflows/push.yml/badge.svg)
 
 # Openglobus
 
 English | [简体中文](README_CN.md) | [Portuguese-BR](README_pt-BR.md)
 
-[Openglobus](http://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets
-with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and
+[Openglobus](http://www.openglobus.org/) 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 lookin, user friendly and easy to implement in any
+Openglobus main goal is to make 3D map features fast, good looking, user friendly and easy to implement in any
 related project.
 
 ## Getting Start
@@ -24,65 +27,72 @@ yarn add @openglobus/og
 ### Code: using umd lib
 
 ```html
-<link rel="stylesheet" href="./libs/og.css">
-<script src="./libs/og.umd.js"></script>
+
+<link rel="stylesheet" href="../dist/@openglogus/og.css">
+<script src="../dist/@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],
-    autoActivated: true,
-    viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
-  })
+    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,
+        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
 
-``` html
-<link rel="stylesheet" href="./libs/og.css">
+```html
+
+<link rel="stylesheet" href="../dist/@openglobus/og.css">
 <div id="globus"></div>
 <script type="module">
 
-  import { layer, Globe, terrain } from './libs/og.esm.js'
-  const { XYZ } = layer
-  const { GlobusTerrain } = terrain
-
-  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],
-    autoActivated: true,
-    viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
-  })
+    import {XYZ, Globe, GlobusTerrain} from '../dist/@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],
+        autoActivated: 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](./framework-intergration.md).
+Openglobus integrates well with front-end frameworks like React, Angular or
+Vuejs [Read more here](./framework-intergration.md).
 
 ## Documentation
+
 UNDER CONSTRUCTION
-Check out the [hosted examples](http://www.openglobus.org/examples.html), or
+Here is a [Wiki](https://github.com/openglobus/openglobus/wiki), also
+check out the [hosted examples](http://www.openglobus.org/examples.html), and
 the [API documentation](http://www.openglobus.org/api/).
 
 ## Get Started to contribute
@@ -113,20 +123,39 @@ Then, it will generate 5 files at `dist/@openglobus/`:
 - og.esm.js
 - og.esm.js.map
 - og.css
+- ./res/...
 
-All JavaScript files are compressed by `terser` plugin.
+### Run examples
 
-### Other scripts
+First, it starts by watching sources and building into dist folder esm module:
+
+```sh
+npm run dev
+```
+
+Second, runs local server, then you can browse 127.0.0.1:8080:
 
-`npm run core` - build og.core (rendering engine) stand-alone
+```sh
+npm run serve
+```
+
+Third, try an example from the sandbox:
 
-`npm run webgl` - build og.webgl (webgl wrap) stand-alone
+```sh
+ http://127.0.0.1:8080/sandbox/osm/osm.html
+```
+
+### Other scripts
 
 `npm run docs` - build [api documentation](https://www.openglobus.org/api/) into /api folder
 
 `npm run serve` - run local web server for develop and watch examples
 
-`npm run font` - generate custom font atlas
+`npm run lint` - run code linter
+
+`npm run test` - run tests
+
+`tsc` - run typescript parser
 
 ## Support the Project