The VTS Browser JS is a JavaScript WebGL map rendering engine with small footprint (about 163 kB of gziped JS code). It provides almost all features for 3D mapping you will ever want.
With VTS Browser JS you are able to combine and render various geospatial data in one map. Style and display height-coded geodata. Render your textured meshes or OBJ models. Or occupy it's font rendering engine with exotic writing systems.
VTS Browser JS is (independently usable) part of VTS 3D Geospatial Software Stack: a state-of-the-art, full-stack open source platform for 3D geospatial application development.
- Features
- Live Demos
- Get started with VTS Browser JS
- Get the library
- Documentation
- Roadmap
- Map Configuration
- Licence
- How to Contribute
- Part of large VTS 3D Geospatial Software Stack
- Supports WebGL-capable browsers
- Realistic rendering model
- Map features search
- Tiled, hierarchical data model
- Web presentation optimalized
- Different coordinate systems
- Multiple surfaces
- Multiple bound layers on each surface
- Vector layers (geodata)
- Geodata styling and interaction
- Dynamic surfaces and layers switching
- Various writing systems (e.g. Arabic, Indic, Chinese, Japanese, ...)
- Extensive API (including UI extensions)
- Custom meshes, lines, polygons, icons, OBJ models, ...
- Rendering and styling GeoJSON files
- Small library size 163KB (minified and gzipped)
- Large set of ready to use data
- BSD-2 license
The CesiumJS is an excelent JavaScript WebGL map rendering engine and we must acknowledge the hard work of Cesium team standing behind this library.
If you asks us to compare The VTS Browser JS with The CesiumJS. There is a list of points which you may find interesting:
| Feature | VTS Browser JS | Cesium |
|---|---|---|
| Different coordinate systems support | yes | limited |
| Dynamic tiled surfaces mixing (including glues) | yes | no |
| Multiple surfaces and multiple bound layers support (Including transparent layers) | yes | no |
| Bound layers with optimized masks | yes | no |
| Out-of-the-box OSM data support with custom styling | yes | limited |
| Fully open sourced back-end tools | yes | no |
| Part of the VTS Software Stack for the large scale mapping | yes | no |
| Text rendering engine with almost complete coverage of writing systems | yes | limited |
| Compact-size library (gzipped and minified) | 163 KB | 577 KB + Workers |
3D map can rapidly enhance your web project's user experience. You can find your inspiration in following use cases.
- Include The VTS Browser JS library
<link rel="stylesheet"
type="text/css" href="https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.css" />
<script type="text/javascript"
src="https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.js"></script>- Declare map containing element (with id
map-div)
<div id="map-div" style="width:100%; height:100%;"></div>- Initiate vts browser (with example map configuration)
<script>
var browser = vts.browser('map-div', {
map: 'https://cdn.melown.com/mario/store/melown2015/map-config/melown/VTS-Tutorial-map/mapConfig.json'
});
</script>Wonder where to find mapConfig.json file? See [Map Configuration](#Map Configuration) section.
You can run many examples in JSFiddle.
There is several ways how to bundle The VTS Browser JS Library into your project.
The most easy way to link The VTS Browser JS Library is to use the latest build (or specific version) from our CDN network.
<link rel="stylesheet"
href="https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.css" />
<script type="text/javascript"
src="https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.js"></script>In case you do not want to build libray yourself or use our CDN, there is a link where you can find latest compiled libraries with demo examples.
Vts-browser-js library is in npm js repository. To add it as dependecy to your project just add it as any npm package
npm install -S vts-browser-js
And of course you can build The VTS Browser JS Library from source code.
The build system uses webpack module bundler.
Typical development cycle starts with npm install for installation of
dependenices. Then you usually run webpack-dev-server and build with webpack.
Download and install all dependencies to local node_modules directory.
NOTE: For some dependencies, you need git available in your system.
npm install
or more advanced (if you are using new versions of NodeJS and Yarn)
yarn install
The development server is serving local files at http://localhost:8080.
node_modules/.bin/webpack-dev-server
And go to http://localhost:8080/demos/
node_modules/.bin/webpack
The unzipped file (along with source map and CSS) is stored in build/
directory. You may now start the dev server (see lower) and open browser at
http://localhost:8080 to see some demos in the demos/
directory.
The compressed version - it's intended to be used in in production env. You can
include in the <script ...></script> tags (along with CSS) there.
Compressed version is build in the dist/ directory.
NODE_ENV=production node_modules/.bin/webpack
There is also Makefile available in the project directory. Referer make help
to specific make targets. The Makefile is just wrapper around npm run commands
(which are wrappers around webpack configuration).
Map configuration contains a all information The VTS Browser JS library needs to display given map/model. Library is usually initialize with URL to mapConfig.json file which is JSON representation of Map configuration data.
The question is, where you can get your own Map Configuration. Basically you have two options:
Melown Cloud is a source of custom map configurations for client application development.
It is a cloud 3D map development platform operated by Melown Technologies atop of VTS 3D Stack. It is a point-and-click interface to a subset of VTS functionality ideal for smaller projects and less technically savvy users.
If Melown Cloud doesn't meet your needs you can install, configure and deploy your own backend instnace of The VTS 3D Geospatial Software Stack components. You will gain full control over your data sources, Map Configurations and integration with other geospatial services.
VTS Browser JavaScript API documentation is available in our wiki:
See the LICENSE file for VTS Browser JS license, run webpack and check the
build/3rdpartylicenses.txt file for 3rd party licenses.
Check out the CONTRIBUTING.md file.