JavaScript WebGL 3D map rendering engine

Overview

VTS Browser JS

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.

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.

With 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.

VTS Browser JS showcase

Features

  • part of a comprehensive open-source 3D geospatial software Stack
  • supports all modern web browsers
  • photorealistic rendering
  • geocoding API support
  • tiled, hierarchical data model
  • optimized for web-based rendering
  • supports any coordinate system
  • multiple surfaces
  • multiple bound layers on each surface
  • vector layers (geodata)
  • geodata styling and geodata interaction
  • dynamic surfaces and layer switching
  • international writing systems (e.g. Arabic, Devangaric, Chinese, Japanese, ...)
  • extensive, yet simple API (including UI extensions)
  • custom meshes, lines, polygons, icons, OBJ models, etc
  • rendering and styling of GeoJSON files
  • very small footprint (163KB minified and gzipped)
  • large set of ready-to-use data
  • open-source under BSD-2 license

Comparison to CesiumJS library

The open-source CesiumJS 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.

Feature VTS Browser JS CesiumJS
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
Open-source backend components yes no
Backend data-fusion capabilities yes no
Support for international writing systems yes limited
Compact-size library (gzipped and minified) 221 KB 577 KB + Workers

Live Demos

These are some of the applications built with VTS browser JS:

Examples

First steps

  1. 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>
  1. Declare map containing element (with id map-div)
<div id="map-div" style="width:100%; height:100%;"></div>
  1. 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 section.

Next steps

You can run many examples in JSFiddle.

Get the library

There is several ways how to bundle The VTS Browser JS Library into your project.

Our CDN

The easiest way to link The VTS Browser JS Library is to use the latest build (or specific version) from Melown Technologies CDN.

<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>

Prebuilt

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.

NPM repository

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

Build from code

If you prefer, you may build The VTS Browser JS Library from source code.

Build system

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.

Install

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

Run dev server

The development server is serving local files at http://localhost:8080.

node_modules/.bin/webpack-dev-server

And go to http://localhost:8080/demos/

Build

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.

Build compressed version

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

Makefile

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

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

Melown 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.

VTS 3D Geospatial Software stack

VTS Browser JS forms part of the VTS 3D Geospatial Software Stack. 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.

Documentation

VTS Browser JavaScript API documentation is available in our wiki:

License

See the LICENSE file for VTS Browser JS license, run webpack and check the build/3rdpartylicenses.txt file for 3rd party licenses.

How to contribute

Check out the CONTRIBUTING.md file.

Comments
  • geodata polygons

    geodata polygons

    Hi,

    Got an error when playing around with geojson polygons for the first time. When I tried to find out what the error was, I noticed that on one of the jsFiddles it says: //import GeoJSON data //polygon are not supported yet

    Is that still the case or is the error on my end?

    opened by jrjdavidson 13
  • Uncaught RangeError: Offset is outside the bounds of the DataView

    Uncaught RangeError: Offset is outside the bounds of the DataView

    While zooming in/out with mouse I get Uncaught RangeError: Offset is outside the bounds of the DataView on the following line of code: https://github.com/melowntech/vts-browser-js/blob/1f3c4235c5ae4aefbbb64188e93867e89da834c9/src/core/map/metatile.js#L238 after this exception the map freezes.

    here is the stack trace: vts-browser.min.js:formatted:20137 Uncaught RangeError: Offset is outside the bounds of the DataView at DataView.getUint8 () at n.parseMetatatile (vts-browser.min.js:formatted:20137) at n.onLoaded (vts-browser.min.js:formatted:20120) at j.processProcessingTasks (vts-browser.min.js:formatted:18504) at j.update (vts-browser.min.js:formatted:18542) at A.onUpdate (vts-browser.min.js:formatted:2423) n.parseMetatatile @ vts-browser.min.js:formatted:20137 n.onLoaded @ vts-browser.min.js:formatted:20120 j.processProcessingTasks @ vts-browser.min.js:formatted:18504 j.update @ vts-browser.min.js:formatted:18542 A.onUpdate @ vts-browser.min.js:formatted:2423 requestAnimationFrame (async) A.onUpdate @ vts-browser.min.js:formatted:2425

    opened by skazemi 7
  • Geodata point appearing behind surface

    Geodata point appearing behind surface

    Hi again,

    I made a global map of volcanoes using a freelayer, however that are located behind the planet appear through the layer. I tried playing with the visibility styling, but didn't have any success. Any thoughts? https://www.holoceneadventures.com/ivft2/world.html

    opened by jrjdavidson 5
  • loading page

    loading page

    Sorry, new to this, so not sure if this is the right place.

    I'm getting issues when trying to load map from Melown cloud using the vts-browser with js.

    Access to XMLHttpRequest at 'https://cdn.melown.com/vts/melown2015/terrain/global/viewfinder3/0-0-0.meta?3' from origin 'https://www.holoceneadventures.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    vts-browser.min.js:5 GET https://cdn.melown.com/vts/melown2015/terrain/global/viewfinder3/0-0-0.meta?3 403

    opened by jrjdavidson 5
  • Touch events

    Touch events

    hi,

    trying to play with touch events on map and having issues with touch events -appears to not pass coords in events so that event.getTouchCoords returns [0,0]

    opened by jrjdavidson 4
  • map-update

    map-update

    Hello! The map-update event is triggered every time after the map element has been rendered. But how do I know that the whole map (i.e. all elements) is updated? https://imgur.com/a/RZchhyJ

    opened by OlegYarko 4
  • Point is not visible when we zoom near the surface

    Point is not visible when we zoom near the surface

    Hi,

    We used your example Geodata Basic (https://github.com/Melown/vts-browser-js/wiki/Examples) in order to display a point on the right lat, lon, altitude. Our try is on: https://jsfiddle.net/alamR/jjynbpoL/13/ The problem is that the point is not visible when we zoom near the surface. The real altitude of the point is 333m. In our code we add this point: geodata.addPoint([14.3836691, 50.0485568, 333], 'fix', { 'name' : 'Nice place' }, 'some-place'); But it is not visible (when we zoom near surface)! When we change the altitude around 380m then we can see it. Have we missed something? Thank you in advance!

    opened by alam-R 4
  • Initialize VTS to the location of the GeoJson loaded

    Initialize VTS to the location of the GeoJson loaded

    Hi,

    I am working on a VTS based web app.

    I plan to read GeoJson data from a URL. I want that my app is initialized to this data, like appropriate positioning of camera etc.

    How can this be achieved?

    opened by mghildiy 4
  • Is it possible to use the

    Is it possible to use the "viewfinder-1-arc-sec" data from melown's CDN?

    Hello,

    In the examples, mapConfig files are loaded from melown's CDN: https://cdn.melown.com/mario/store/melown2015/map-config/melown/VTS-Tutorial-map/mapConfig.json with URLs relative to the CDN for glues and meta ("metaUrl" : "../../../stage/glues/melown-viewfinder-world_melown-viewfinder-1-arc-sec/{lod}-{x}-{y}.2dmeta?1", etc.).

    I tried the "basic" demo from the repo, saved the mapConfig.json file next to my index and edited it. I tried changing the "../../../" paths to the CDN, but with no success. It seems like sometimes the base URL is "http://cdn.melown.com/mario/store/", sometimes it's "http://cdn.melown.com/mario/proxy/", depending on the resource. It looks like the CORS headers are present, to allow for cross-domain access. So a couple of questions:

    • Is it allowed (legally speaking) to use the ressources (glues and stuff) from melown's CDN or is it forbidden? The project is open-source but generating/hosting all those files must be costy, so it would make sense
    • If it is not allowed, is there a way to download the DEM and generate the glues on my own VTS-backend? Is there a documented procedure?
    • If it is allowed, how do you create a mapConfig.json file for remote access to the CDN ressources

    Thanks a lot, Fabien

    opened by fnicollet 4
  • Create package.json and gulpfile

    Create package.json and gulpfile

    • [x] package.json with working npm install
    • [x] working yarn instead of npm install
    • [x] webpack for build
    • [ ] basic unit tests
    • [ ] eslint
    • [x] create two versions of final libs: core and core+browser
    • [x] leave build untouched
    • [x] start with ES6 imports
    enhancement 
    opened by davidmtech 4
  • How to achieve better earth surface resolutions?

    How to achieve better earth surface resolutions?

    Hello, I am using vts-browser-js as a GIS tool for my application.

    I observed that we can change the mapconfig.json file to load different maps, and I tried using three different sources; Melown-Earth-Intergeo-2017, VTS-Tutorial-Map-4 and VTS-Tutorial-map. But I could not see the considerable change in resolution level.

    Could you please suggest a way to achieve better earth surface resolutions in vts-browser-js?

    Any help would be really appreciated!

    opened by shrikant-panchal 3
  • mapConfig.json not working 404 ?

    mapConfig.json not working 404 ?

    browser = vts.browser('map-div', { map: 'https://cdn.melown.com/mario/store/melown2015/map-config/melown/VTS-Tutorial-Map-4/mapConfig.json', position : positionData });

    https://cdn.melown.com/mario/store/melown2015/map-config/melown/VTS-Tutorial-Map-4/mapConfig.json - this link isn't correct. Get 404 status

    opened by ezhabchik-dev 0
  • loader for threejs?

    loader for threejs?

    A bit sad to see very little action on this package, I think it's still beyond what anybody else does in this space..

    Personally, I've been spending a lot time working inthreejs lately and I've been really impressed. I really like the webXR ability, I've made some quite impressive examples here with that.

    One thought I had would be that a loader that creates a vts mesh in threejs would be amazing. Imagine being able to explore your detailed models in your browser as well as in VR? There are some people that have developed examples to import 3D tiles, and I even saw one that accepts cesiumJS, but I still prefer VTS by far.

    Anyone keen to explore or see how difficult it would be to develop a means to create a mesh streaming vts data in threejs? I'd be willing to spend a bit of time on this, but don't think I have quite the right level of skill...

    opened by jrjdavidson 1
  • Modifying Freelayer position

    Modifying Freelayer position

    Hi,

    I've comme across an problem I can't solve by searching in the different documentations.

    I have a view containing three elements :

    • A surface, displaying a complete map (the exact same as the Bing tutorial)
    • Two free layers :
      • A DEM from copernicus, also like the tutorial but with an other country wide area and also textured using bing map
      • A high resolution 3D model of a photogrammetric scan of a small town scale area properly positioned in lat/long.

    Everything loads perfectly in the browser exept that the 3D model is below the DEM and I wanted to align them properly in altitude.

    I know there is the zShift parameter to modify the height of the model when running slpk2vts, however I don't know the exact required value and "trials and errors" method may take too much time for each tests (one run of slpk2vts takes aproximatly 2hours). Is there a way to apply a transform to a freelayer in a view to change the height at runtime ?

    opened by AriemX 4
  • Render OBJ - MTL and JPG

    Render OBJ - MTL and JPG

    Hello,

    I'm following the tutorial to place custom OBJ in my project. So far, everything has worked as expected.

    I'm having the issue that the object has textures (MTL) and JPG, and I can't find any documentation to render those assets along with my object.

    opened by artsmorgan 0
  • vts community hub?

    vts community hub?

    Hey - i was wondering, is there some kind of hub for vts users to share their work? I know other Open source software I use has a gitter page, im sure there are other things like that that exist... It would be cool to see what others are doing and to help each other out outside of the issues page on github..

    JD

    opened by jrjdavidson 0
Releases(v2.23.11)
Owner
Melown Technologies, SE
Melown Technologies, SE
This map is tracking the position of ISS(international space setallite) at every 1 second. I use Nasa's "where the iss" API and "Leaflet.js" for the map.

ISS-tracking-map About This map is tracking the position of ISS(international space setallite) at every 1 second. I use Nasa's "where the iss" API and

Waz.sheeran 2 Oct 25, 2021
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specif

Mapbox 9.4k Jan 7, 2023
jQuery Vector Map Library

This project is a heavily modified version of jVectorMap as it was in April of 2012. I chose to start fresh rather than fork their project as my inten

10 Best Design 1.8k Dec 28, 2022
jQuery Vector Map Library

This project is a heavily modified version of jVectorMap as it was in April of 2012. I chose to start fresh rather than fork their project as my inten

10 Best Design 1.8k Dec 28, 2022
Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Microsoft Power BI Make sense of your big & dynamic location data with the Mapbox Visual for Power BI. Quickly design high-performan

Mapbox 121 Nov 22, 2022
A Node.js map tile library for PostGIS and torque.js, with CartoCSS styling

Windshaft A Node.js map tile library for PostGIS and torque.js, with CartoCSS styling. Can render arbitrary SQL queries Generates image and UTFGrid in

CARTO 306 Dec 22, 2022
Add time dimension capabilities on a Leaflet map.

Leaflet TimeDimension Add time dimension capabilities on a Leaflet map. Examples and basic usage API L.Map L.TimeDimension L.TimeDimension.Layer L.Tim

SOCIB public code 379 Dec 23, 2022
Serverless raster and vector map tile generation using Mapnik and AWS Lambda

tilegarden ??️ ?? Contents About Usage Deployment to AWS Additional Configuration Options Required AWS Permissions Features Configuration Selection an

Azavea 89 Dec 22, 2022
Lightweight Node.js isochrone map server

Galton Lightweight Node.js isochrone server. Build isochrones using OSRM, Turf and concaveman. Francis Galton is the author of the first known isochro

Urbica 266 Dec 17, 2022
A pluggable Node.js map tile server.

TileStrata TileStrata is a pluggable "slippy map" tile server that emphasizes code-as-configuration. The primary goal is painless extendability. It's

Natural Atlas 409 Dec 30, 2022
A map tool with real-time collaboration 🗺️

Mapus Maps with real-time collaboration ??️ Mapus is a tool to explore and annotate collaboratively on a map. You can draw, add markers, lines, areas,

Alyssa X 3k Jan 4, 2023
Mind elixir is a free open source mind map core.

Mind-elixir is a framework agnostic mind map core

DJJo 1.4k Jan 2, 2023
Fast Map built for keys that are always fixed size uniformly distributed buffers.

turbo-hash-map Fast Map built for keys that are always fixed size uniformly distributed buffers. npm install turbo-hash-map Uses a prefix trie to map

Mathias Buus 39 Jun 20, 2022
A library that makes Image Map Area responsive

A library that makes Image Map Area responsive

elenh 1 Jan 21, 2022
Greasemonkey script to allow marking items on the interactive map of Elden Ring as completed.

Greasemonkey script (or Tampermonkey) to allow marking items on the interactive map of Elden Ring as completed. The interactive map is a Fextralife-project, all credits for the map go to them.

Daniel Tischner 6 Jun 19, 2022
Interactive map overlay for finding secrets hidden around the world of Lost Ark.

Lostark Map Overlay This is an interactive map overlay which is resizable, movable and can be kept up during gameplay for finding secrets hidden aroun

Omar Minaya 6 Dec 29, 2022
:ukraine: A self-hosted app for keeping track of employee wellbeing and dislocation during the Russo-Ukrainian war, with an interactive map.

Helping organizations stay together and help their members in times of disaster On February 24th, 2022, the lives of the entire Ukrainian nation were

MacPaw Inc. 111 Dec 15, 2022
Generates an embeddable map that displays business info from an OSM object id.

# OSM Business Card Generates an embeddable map that displays business info from an OSM object id. Loads object type (n/w/r) and id from url parameter

Will Bennett 6 May 26, 2022
Simple location picker on Leaflet map

Leaflet Location Picker Simple location picker with Leaflet map Usage: <label>Insert a Geo Location <input id="geoloc" type="text" value="" /> </lab

Stefano Cudini 37 Nov 17, 2022