Book Image

Mastering OpenLayers 3

By : Gábor Farkas
Book Image

Mastering OpenLayers 3

By: Gábor Farkas

Overview of this book

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.
Table of Contents (17 chapters)
Mastering OpenLayers 3
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Debugging the code


As you will have noticed, there was a third file in the OpenLayers 3 folder discussed at the beginning of the chapter (js/ol3-3.11.0). This file, named ol-debug.js, is the uncompressed source file, in which the library is concatenated with all of its dependencies. We will use this file for two purpose in this book. Now, we will use it for debugging. First, open up ch01_simple_map.js. Next, extend the init function with an obvious mistake:

var geometry = new ol.geom.Point([0, 0]);
vectorLayer.getSource().addFeature(geometry);

Don't worry if you can't spot the error immediately. That's what is debugging for. Save this extended JavaScript file with the name ch01_error.js. Next, replace the old script with the new one in the HTML file, like this:

<script type="text/javascript" src="ch01_error.js"></script>

If you open the updated HTML, and open your browser's developer console, you will see the following error message:

Now that we have an error, let's check it in the source file by clicking on the error link on the right side of the error message:

Quite meaningless, isn't it? The compiled library is created with Google's Closure Library, which obfuscates everything by default in order to compress the code. We have to tell it which precise part of the code should be exported. We will learn how to do that in the last chapter. For now, let's use the debug file. Change the ol.js in the HTML to ol-debug.js, load up the map, and check for the error again:

Finally, we can see, in a well-documented form, the part that caused the error. This is a validating method, which makes sure the added feature is compatible with the library. It requires an ol.Feature as an input, which is how we caught our error. We passed a simple geometry to the function, instead of wrapping it in an ol.Feature first.