Building the layout

Now that we have covered some of the most essential structural aspects of the library, let's consider the architecture of an application deployed in a production environment. Take another look at the code. There is a chapters folder in which you can access the examples within the appropriate subfolder. If you open ch01, you can see three file types in it. As you have noticed, the different parts of the web page (HTML, CSS, and JavaScript) are separated. There is one main reason behind this: the code remains as clean as possible.

With a clean and rational design, you will always know where to look when you would like to make a modification. Moreover, if you're working for a company there is a good chance someone else will also work with your code. This kind of design will make sure your colleague can easily handle your code. On top of that, if you have to develop a wrapper API around OpenLayers 3, this is the only way your code can be integrated into future projects.

Creating the appeal

As the different parts of the application are separated, we will create a minimalistic HTML document. It will expand with time as the application becomes more complicated and needs more container elements. For now, let's write a simple HTML document:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Chapter 1 - Creating a simple map</title>
        <link href="../../js/ol3-3.11.0/ol.css" rel="stylesheet">
        <link href="ch01.css" rel="stylesheet">
        <script type="text/javascript" src="../../js/ol3-3.11.0/ol.js"></script>
        <script type="text/javascript" src="ch01_simple_map.js"></script>
    </head>
    <body>
        <div id="map" class="map"></div>
    </body>
</html>

Tip

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

In this simple document, we defined the connection points between the external resources, and our web page. In the body, we created a simple div element with the required properties. We don't really need anything else; the magic will happen entirely in our code. Now we can go on with our CSS file and define one simple class, called map:

.map {
    width: 100%;
    height: 100%;
}

Save this simple rule to a file named ch01.css, in the same folder you just saved the HTML file.

Tip

If you are using a different file layout, don't forget to change the relative paths in the link, and script tags appropriately.

Writing the code

Now that we have a nice container for our map, let's concentrate on the code. In this book, most of the action will take place in the code; therefore this will be the most important part. First, we write the main function for our code:

function init() {
    document.removeEventListener('DOMContentLoaded', init);
}
document.addEventListener('DOMContentLoaded', init);

By using an event listener, we can make sure the code only runs when the structure of the web page has been initialized. This design enables us to use relative values for sizing, which is important for making adaptable applications. Also, we make sure the map variable is wrapped into a function (therefore we do not expose it) and seal a potential security breach. In the init function, we detach the event listener from the document, because it will not be needed once the DOM structure has been created.

Tip

The DOMContentLoaded event waits for the DOM structure to build up. It does not wait for images, frames, and dynamically added content; therefore the application will load faster. Only IE 8 and prior versions do not support this event type, but if you have to fall back you can always use the window object's load event. To check a feature's support in major browsers, you can consult the following site: http://www.caniuse.com/.

Next, we extend the init function by creating a vector layer and assigning it to a variable. Note that in OpenLayers 3.5.0, creating vector layers has been simplified. Now, a vector layer has only a single source class, and the parser can be defined as a format in the source:

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON({
            defaultDataProjection: 'EPSG:4326'
        }),
        url: '../../res/world_capitals.geojson',
        attributions: [
            new ol.Attribution({
                html: 'World Capitals © Natural Earth'
            })
        ]
    })
});

We are using a GeoJSON data source with a WGS84 projection. As the map will use a Web Mercator projection, we provide a defaultDataProjection value to the parser, so the data will be transformed automagically into the view's projection. We also give attribution to the creators of the vector dataset.

Tip

You can only give attribution with an array of ol.Attribution instances passed to the layer's source. Remember: giving attribution is not a matter of choice. Always give proper attribution to every piece of data used. This is the only way to avoid copyright infringement.

Finally, construct the map object, with some extra controls and one extra interaction:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayer
    ],
    controls: [
        //Define the default controls
        new ol.control.Zoom(),
        new ol.control.Rotate(),
        new ol.control.Attribution(),
        //Define some new controls
        new ol.control.ZoomSlider(),
        new ol.control.MousePosition(),
        new ol.control.ScaleLine(),
        new ol.control.OverviewMap()
    ],
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.Select({
            layers: [vectorLayer]
        })
    ]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

In this example, we provide two layers: a simple OpenStreetMap tile layer and the custom vector layer saved into a separate variable. For the controls, we define the default ones, then provide a zoom slider, a scale bar, a mouse position notifier, and an overview map. There are too many default interactions, therefore we extend the default set of interactions with ol.interaction.Select. This is the point where saving the vector layer into a variable becomes necessary. The view object is a simple view that defaults to projection EPSG:3857 (Web Mercator).

Tip

OpenLayers 3 also has a default set of controls that can be accessed similarly to the interactions, under ol.control.defaults(). Default controls and interactions are instances of ol.Collection, therefore both of them can be extended and modified like any other collection object. Note that the extend method requires an array of features.

Save the code to a file named ch01_simple_map.js in the same folder as your HTML file. If you open the HTML file, you should see the following map:

Note

You have different, or no results? Do not worry, not even a bit! Open up your browser's developer console (F12 in modern ones, or CTRL + J if F12 does not work), and resolve the error(s) noted there. If there is no result, double-check the HTML and CSS files; if you have a different result, check the code or the CORS requirements based on the error message. If you use Internet Explorer, make sure you have version 9 or higher.

Previous Chapter

Structure of OpenLayers 3

Next Chapter

Using the API documentation

Table of Contents for Mastering OpenLayers 3

Building the layout

Creating the appeal

Tip

Tip

Writing the code

Tip

Tip

Tip

Note

Table of Contents for
Mastering OpenLayers 3