Quick start guide¶

Build dependencies¶

The following software is required to build geojs from source:

Git
Node.js

In addition, the following python modules are recommended for development and testing of geojs.

These docs assume that the Grunt command line interface has been installed globally, which can be done with the following command:

npm install -g grunt-cli

Getting the source code¶

Get the latest geojs source code from our GitHub repository by issue this command in your terminal.

git clone https://github.com/OpenGeoscience/geojs.git

This will put all of the source code in a new directory called geojs. Geojs depends on another repository called vgl. In order to get the vgl source code as well you will need to go into the geojs directory and tell git to download the vgl submodule.

git submodule init
git submodule update

Building the source¶

Inside the new geojs directory, you can simply run the following commands to install all dependent javascript libraries and bundle together everything that is needed.

npm install
grunt

Compiled javascript libraries will be named geo.min.js and geo.ext.min.js in dist/built. The first file contains geojs and vgl bundled together. The second file contains all of the dependent libraries. The bundled libraries are minified, but source maps are provided

Using the library¶

The following html gives an example of including all of the necessary files and creating a basic full map using the osmLayer class.

<head>
    <script src="/built/geo.ext.min.js"></script>
    <script src="/built/geo.min.js"></script>

    <style>
        html, body, #map {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>

    <script>
    $(function () {
        geo.map({'node': '#map'}).createLayer('osm');
    });
    </script>
</head>
<body>
    <div id="map"></div>
</body>

You can save this page into a new file at dist/mymap.html. To view your new creation, start up a web server with the command

grunt serve

Now, if you open up http://localhost:8082/mymap.html in your favorite webgl enabled browser, you should see a map like the following:

Additionally, you will be able to see all of the built-in examples at http://localhost:8082/examples.