{"id":21528995,"url":"https://github.com/melowntech/vts-browser-js","last_synced_at":"2025-08-20T04:32:42.297Z","repository":{"id":46780738,"uuid":"85829694","full_name":"melowntech/vts-browser-js","owner":"melowntech","description":"JavaScript WebGL 3D map rendering engine","archived":false,"fork":false,"pushed_at":"2021-04-14T07:35:56.000Z","size":3991,"stargazers_count":221,"open_issues_count":25,"forks_count":42,"subscribers_count":25,"default_branch":"master","last_synced_at":"2024-11-24T01:55:26.675Z","etag":null,"topics":["3d-engine","3d-globe","gis","javascript","map","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/melowntech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-22T13:16:28.000Z","updated_at":"2024-11-21T02:04:37.000Z","dependencies_parsed_at":"2022-09-19T10:51:56.305Z","dependency_job_id":null,"html_url":"https://github.com/melowntech/vts-browser-js","commit_stats":null,"previous_names":["melown/vts-browser-js"],"tags_count":94,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melowntech%2Fvts-browser-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melowntech%2Fvts-browser-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melowntech%2Fvts-browser-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melowntech%2Fvts-browser-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/melowntech","download_url":"https://codeload.github.com/melowntech/vts-browser-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230394228,"owners_count":18218707,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-engine","3d-globe","gis","javascript","map","webgl"],"created_at":"2024-11-24T01:55:31.324Z","updated_at":"2024-12-19T07:06:52.076Z","avatar_url":"https://github.com/melowntech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"390\" alt=\"VTS Browser JS\" src=\"https://github.com/melowntech/assets/blob/master/vts-browser-js/vts-browser-js-no-left-padding.png?raw=true\"\u003e\n\n**VTS Browser JS** is a powerful JavaScript 3D map rendering engine with a very small footprint (about 163 kB of gziped JS code). It provides almost all features for web-based 3D mapping you will ever want.\n\nVTS Browser JS is independently usable part of [VTS 3D Geospatial Software Stack](https://vts-geospatial.org): a state-of-the-art, full-stack open source platform for 3D geospatial application development. \n\nWith VTS Browser JS you may combine and render diverse geospatial data in a single online map, style and display various types of geodata, render textured polygonal meshes or OBJ models, or even render topographic labels in almost any international writing system.\n\n\n- [Features](#features)\n- [Live Demos](#live-demos)\n- [Getting Started with VTS Browser JS](#examples)\n  - [First Steps](#first-steps)\n  - [More examples](https://github.com/Melown/vts-browser-js/wiki/Examples)\n- [Get the library](#get-the-library)\n  - [Our CDN](#our-cdn)\n  - [Prebuilt package](#prebuilt)\n  - [NPM](#npm-repository)\n  - [From Source code](#build-from-code)\n- [Documentation](#documentation)\n- [Roadmap](https://github.com/Melown/vts-browser-js/wiki/Roadmap)\n- [Map Configuration](#map-configuration)\n- [Licence](#licence)\n- [How to Contribute](#how-to-contribute)\n\n\u003cimg width=\"888\" alt=\"VTS Browser JS showcase\" src=\"https://github.com/melowntech/assets/blob/master/vts-browser-js/vts-browser-js-readme-2-880.jpg?raw=true\"\u003e\n\n## Features\n* [x] part of a comprehensive open-source 3D geospatial software Stack\n* [x] supports all modern web browsers\n* [x] photorealistic rendering\n* [x] geocoding API support\n* [x] tiled, hierarchical data model\n* [x] optimized for web-based rendering\n* [x] supports any coordinate system\n* [x] multiple surfaces\n* [x] multiple bound layers on each surface\n* [x] vector layers (geodata)\n* [x] geodata styling and geodata interaction\n* [x] dynamic surfaces and layer switching\n* [x] international writing systems (e.g. Arabic, Devangaric, Chinese, Japanese, ...)\n* [x] extensive, yet simple API (including UI extensions)\n* [x] custom meshes, lines, polygons, icons, OBJ models, etc\n* [x] rendering and styling of GeoJSON files\n* [x] very small footprint (163KB minified and gzipped)\n* [x] large set of ready-to-use data\n* [x] open-source under BSD-2 license\n\n### Comparison to CesiumJS library\n\nThe open-source [CesiumJS](https://cesiumjs.org) is an excellent JavaScript 3D mapping library which is widely used and frequently compared to VTS Browser JS. The following table might help you to identify the application scenarios where VTS Browser JS may be an alternative, or simply a straightforward software platform of choice for your project.  \n\n| Feature | VTS\u0026nbsp;Browser\u0026nbsp;JS | CesiumJS |\n| --- | --- | --- |\n| Different [coordinate systems](https://vts-geospatial.org/reference/concepts.html#reference-frame) support | yes | limited |\n| Dynamic tiled [surfaces](https://vts-geospatial.org/reference/concepts.html#surface) mixing (including [glues](https://vts-geospatial.org/reference/concepts.html#glue)) | yes | no |\n| Multiple surfaces and multiple bound layers support (including transparent layers) | yes | no |\n| Bound layers with optimized [masks](https://vts-geospatial.org/reference/concepts.html#mask) | yes | no |\n| Out-of-the-box OSM data support with [custom styling](https://github.com/Melown/vts-browser-js/wiki/VTS-Geodata-Format) | yes | limited |\n| Open-source backend components | yes | no |\n| Backend data-fusion capabilities | yes | no |\n| Support for international writing systems | yes | limited |\n| Compact-size library (gzipped and minified) | 221\u0026nbsp;KB | 577\u0026nbsp;KB\u0026nbsp;+\u0026nbsp;Workers |\n\n## Live Demos\n\nThese are some of the applications built with VTS browser JS:\n\n * [Planet Mercury](https://www.melown.com/mercury/)\n * [Intergeo presentation](https://www.melown.com/intergeo2017/)\n * [Mapy.cz](https://mapy.cz/zakladni?x=14.4125847\u0026y=50.0517997\u0026z=17\u0026m3d=1\u0026height=687\u0026yaw=41.252\u0026pitch=-26) (cs)\n * [GPX Demo](https://gpx-demo.mlwn.se)\n\n## Examples\n\n### First steps\n\n1. Include The VTS browser JS library\n```html\n\u003clink rel=\"stylesheet\"\n  type=\"text/css\" href=\"https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.css\" /\u003e\n\u003cscript type=\"text/javascript\"\n  src=\"https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.js\"\u003e\u003c/script\u003e\n```\n\n2. Declare map containing element (with id `map-div`)\n```html\n\u003cdiv id=\"map-div\" style=\"width:100%; height:100%;\"\u003e\u003c/div\u003e\n```\n\n3. Initiate vts browser (with example [map configuration](https://))\n```html\n\u003cscript\u003e\n  var browser = vts.browser('map-div', {\n    map: 'https://cdn.melown.com/mario/store/melown2015/map-config/melown/VTS-Tutorial-map/mapConfig.json'\n  });\n\u003c/script\u003e\n ```\n\nWonder where to find `mapConfig.json` file? See [Map Configuration](#map-configuration) section.\n\n### Next steps\n\nYou can run many [examples in JSFiddle](https://github.com/Melown/vts-browser-js/wiki/Examples).\n\n## Get the library\n\nThere is several ways how to bundle The VTS Browser JS Library into your project.\n\n### Our CDN\n\nThe easiest way to link The VTS Browser JS Library is to use the latest build (or specific version) from Melown Technologies CDN.\n\n```html\n\u003clink rel=\"stylesheet\"\n  href=\"https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.css\" /\u003e\n\u003cscript type=\"text/javascript\"\n  src=\"https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.js\"\u003e\u003c/script\u003e\n```\n\n### Prebuilt\n\nIn case you do not want to build libray yourself or use our CDN, there is a [link](https://github.com/Melown/vts-browser-js/releases) where you can find latest compiled libraries with demo examples.\n\n### NPM repository\n\nVts-browser-js library is in npm js repository. To add it as dependecy to your project just add it as any npm package\n```\nnpm install -S vts-browser-js\n```\n\n### Build from code\n\nIf you prefer, you may build The VTS Browser JS Library from source code.\n\n#### Build system\nThe build system uses [webpack module bundler](http://webpack.github.io/).\nTypical development cycle starts with `npm install` for installation of\ndependenices. Then you usually run `webpack-dev-server` and build with `webpack`.\n\n#### Install\n\nDownload and install all dependencies to local `node_modules` directory.\n\n**NOTE:** For some dependencies, you need `git` available in your system.\n\n```\nnpm install\n```\n\nor more advanced (if you are using new versions of NodeJS and Yarn)\n\n```\nyarn install\n```\n\n#### Run dev server\n\nThe development server is serving local files at\n[http://localhost:8080](http://localhost:8080).\n\n```\nnode_modules/.bin/webpack-dev-server\n```\n\nAnd go to [http://localhost:8080/demos/](http://localhost:8080/demos/)\n\n\n#### Build\n\n```\nnode_modules/.bin/webpack\n```\nThe unzipped file (along with source map and CSS) is stored in `build/`\ndirectory. You may now start the dev server (see lower) and open browser at\n[http://localhost:8080](http://localhost:8080) to see some demos in the `demos/`\ndirectory.\n\n#### Build compressed version\n\nThe compressed version - it's intended to be used in in production env. You can\ninclude in the `\u003cscript ...\u003e\u003c/script\u003e` tags (along with CSS) there.\n\nCompressed version is build in the `dist/` directory.\n\n```\nNODE_ENV=production node_modules/.bin/webpack\n```\n\n#### Makefile\n\nThere is also `Makefile` available in the project directory. Referer `make help`\nto specific make targets. The Makefile is just wrapper around `npm run` commands\n(which are wrappers around webpack configuration).\n\n## Map Configuration\n\nMap 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.\n\nThe question is, where you can get your own Map Configuration. Basically you have two options:\n\n### Melown Cloud\n\n[Melown Cloud](https://www.melown.com/cloud) is point-and-click interface to a subset of VTS technology, operated by Melown Tecchnologies. Conveniently, Melown Cloud may be also used as a source of custom map configurations for VTS browser JS application development.\n\n### VTS 3D Geospatial Software stack\n\nVTS Browser JS forms part of the [VTS 3D Geospatial Software Stack](https://vts-geospatial.org). Running the full stack gives you complete control over your map resources, provides you with powerful data fusion capabilities and allows for closed networks or other types of off-grid deployment.\n\n## Documentation\n\nVTS Browser JavaScript API documentation is available in our wiki:\n\n* [VTS Browser API](https://github.com/Melown/vts-browser-js/wiki)\n\n## License\n\nSee the `LICENSE` file for VTS Browser JS license, run `webpack` and check the\n`build/3rdpartylicenses.txt` file for 3rd party licenses.\n\n## How to contribute\n\nCheck out the [CONTRIBUTING.md](CONTRIBUTING.md) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelowntech%2Fvts-browser-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelowntech%2Fvts-browser-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelowntech%2Fvts-browser-js/lists"}