What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Mastering OpenLayers 3

Chapter 1. Creating Simple Maps with OpenLayers 3

OpenLayers 3 is the most robust open source web mapping library out there, highly capable of handling the client side of a WebGIS environment. Whether you know how to use OpenLayers 3 or you are new to it, this chapter will help you to create a simple map and either refresh some concepts or get introduced to them. As this is a mastering book, we will mainly discuss the library's structure and capabilities in depth. In this chapter we will create a simple map with the library, and revise the basic terms related to it.

In this chapter we will cover the following topics:

Structure of OpenLayers 3
Architectural considerations
Creating a simple map
Using the API documentation effectively
Debugging the code

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.

Using the API documentation

The API documentation for OpenLayers 3.11.0, the version we are using, can be found at http://www.openlayers.org/en/v3.11.0/apidoc/. The API docs, like the library itself, are versioned, thus you can browse the appropriate documentation for your OpenLayers 3 version by changing v3.11.0 in the URL to the version you are currently using.

Note

The development version of the API is also documented; you can always reach it at http://www.openlayers.org/en/master/apidoc/. Be careful when you use it, though. It contains all of the newly implemented methods, which probably won't work with the latest stable version.

Check the API documentation by typing one of the preceding links in your browser. You should see the home page with the most frequently used classes. There is also a handy search box, with all of the classes listed on the left side. We have talked about default interactions and their lengthy nature before. On the home page you can see a link to the default interactions. If you click on it, you will be directed to the following page:

Now you can also see that nine interactions are added to the map by default. It would be quite verbose to add them one by one just to keep them when we define only one extra interaction, wouldn't it?

Note

You can see some features marked as experimental while you browse the API documentation with the Stable Only checkbox unchecked. Do not consider those features to be unreliable. They are stable, but experimental, and therefore they can be modified or removed in future versions. If the developer team considers a feature is useful and does not need further optimization or refactoring, it will be marked as stable.

Understanding type definitions

For every constructor and function in the API, the input and expected output types are well documented. To see a good example, let's search for a function with inputs and outputs as well. If you search for ol.proj.fromLonLat, you will see the following function:

The function takes two arguments as input, one named coordinate and one named projection; projection is optional. coordinate is an ol.Coordinate type (an array with two numbers), while projection is an ol.proj.ProjectionLike type (a string representing the projection). The returned value, as we can see next to the white arrow, is also an ol.Coordinate type, with the transformed values.

Tip

A good developer always keeps track of future changes in the library. This is especially important with OpenLayers 3 when a major change occurs, as it lacks backward compatibility. You can see all of the major changes in the library in the OpenLayers 3 GitHub repository: https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md.

Key benefits

Develop responsive and platform-independent web mapping applications with OpenLayers 3

Learn the key points of creating great applications with native JavaScript through the step-by-step examples

Master the use of the library, from compiling custom builds to developing a complete WebGIS appliation

Description

OpenLayers 3 allows you to create stunning web mapping and WebGIS applications. It uses modern, cutting edge browser technologies. It is written with Closure Library, enabling you to build browser-independent applications without painful debugging ceremonies, which even have some limited fallback options for older browsers. With this guide, you will be introduced to the world of advanced web mapping and WebGIS. First, you will be introduced to the advanced features and functionalities available in OpenLayers 3. Next, you will be taken through the key points of creating custom applications with OpenLayers 3. You will then learn how to create the web mapping application of yours (or your company's) dream with this open source, expense-free, yet very powerful library. We’ll also show you how to make amazing looking thematic maps and create great effects with canvas manipulation. By the end of this book, you will have a strong command of web mapping and will be well on your way to creating amazing applications using OpenLayers 3.

Who is this book for?

This book is intended for front-end developers with basic understanding of JavaScript and GIS concepts, and preferably for those who are familiar with the fundamentals of OpenLayers 3. You might have never used OpenLayers 3 as a seasoned JavaScript developer. If this is the case and you are eager to learn web mapping, this book will definitely set you on the right track.

What you will learn

Use the advanced functionality of the OpenLayers 3 library effectively

Implement the library in your application, shaping it to your needs

Manage layers and the layer stack dynamically

Create not only stunning but also accurate thematic maps

Extend OpenLayers 3 with your own custom classes

Develop mobile-friendly web mapping applications

• Make stunning effects with canvas manipulation, or visualize point clouds with WebGL

• Integrate third-party applications, and create custom builds that completely satisfy your needs

What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

€41.99

€36.99

€41.99

Total € 120.97

Maru Jan 14, 2017

Wenn man etwas JavaScript Kenntnisse mitbringt kann man gemütlich das Buch durchschmökern und bekommt konkrete Ideen wo man seine OL3 Ansätze optimieren kann.

Amazon Verified review

Kathy Ellis May 30, 2017

Delivered as described.

Storytellers Rising Mar 31, 2016

This book was easy to read and answered a lot of my questions, however, there were a lot of references to code. It's a good reference for what I am doing in my current job.

Mastering OpenLayers 3: Create powerful applications with the most robust open source web mapping library using this advanced guide

What do you get with eBook?

Contact Details

Billing Address

Creating a working environment

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with eBook?

Contact Details

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs