Writing a Simple VTS-Browser-JS application

In this tutorial we set up a basic JavaScript web application using the latest VTS Browser JS hosted at Melown Tech’s CDN. The app will allow you to browse any map for which you have the map configuration.

HTML Page

You have to add 2 files to your web page, the CSS file and the VTS-Browser-JS library (minified version):

1
2
3
    <link rel="stylesheet" type="text/css" href="https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.css">
    <!-- Include JavaScript Melown API -->
    <script type="text/javascript" src="https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.js"></script>

Then, target <div /> element has to be set:

1
2
    <div id="map-div" style="width:100%; height:100%;">
    </div>

And finally, the final JavaScript Application will be add to in separated file:

1
    <script type="text/javascript" src="sample-app.js"></script>

You can download srcs/sample-app.html and test the file at your server.

JavaScript Code

The code is straigt forward, you have to initialize the browser with two parameters:

  1. Target <div /> element ID
  2. Map configuration JSON file
    var browser = vts.browser('map-div', {
        map: 'https://cdn.melown.com/mario/store/melown2015/map-config/melown/VTS-Tutorial-map/mapConfig.json'
    });

You can download srcs/sample-app.js the javascript code too.

See it in action