Table of Contents for
Mastering OpenLayers 3

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Mastering OpenLayers 3 by Gábor Farkas Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. Mastering OpenLayers 3
  4. Mastering OpenLayers 3
  5. Credits
  6. About the Author
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. Creating Simple Maps with OpenLayers 3
  16. Structure of OpenLayers 3
  17. Building the layout
  18. Using the API documentation
  19. Debugging the code
  20. Summary
  21. 2. Applying Custom Styles
  22. Customizing the default appearance
  23. Styling vector layers
  24. Customizing the appearance with JavaScript
  25. Creating a WebGIS client layout
  26. Summary
  27. 3. Working with Layers
  28. Building a layer tree
  29. Adding layers dynamically
  30. Adding vector layers with the File API
  31. Adding vector layers with a library
  32. Removing layers dynamically
  33. Changing layer attributes
  34. Changing the layer order with the Drag and Drop API
  35. Clearing the message bar
  36. Summary
  37. 4. Using Vector Data
  38. Accessing attributes
  39. Setting attributes
  40. Validating attributes
  41. Creating thematic layers
  42. Saving vector data
  43. Saving with WFS-T
  44. Modifying the geometry
  45. Summary
  46. 5. Creating Responsive Applications with Interactions and Controls
  47. Building the toolbar
  48. Mapping interactions to controls
  49. Building a set of feature selection controls
  50. Adding new vector layers
  51. Building a set of drawing tools
  52. Modifying and snapping to features
  53. Creating new interactions
  54. Building a measuring control
  55. Summary
  56. 6. Controlling the Map – View and Projection
  57. Customizing a view
  58. Constraining a view
  59. Creating a navigation history
  60. Working with extents
  61. Rotating a view
  62. Changing the map's projection
  63. Creating custom animations
  64. Summary
  65. 7. Mastering Renderers
  66. Using different renderers
  67. Creating a WebGL map
  68. Drawing lines and polygons with WebGL
  69. Blending layers
  70. Clipping layers
  71. Exporting a map
  72. Creating a raster calculator
  73. Creating a convolution matrix
  74. Clipping a layer with WebGL
  75. Summary
  76. 8. OpenLayers 3 for Mobile
  77. Responsive styling with CSS
  78. Generating geocaches
  79. Adding device-dependent controls
  80. Vectorizing the mobile version
  81. Making the mobile application interactive
  82. Summary
  83. 9. Tools of the Trade – Integrating Third-Party Applications
  84. Exporting a QGIS project
  85. Importing shapefiles
  86. Spatial analysis with Turf
  87. Spatial analysis with JSTS
  88. 3D rendering with Cesium
  89. Summary
  90. 10. Compiling Custom Builds with Closure
  91. Configuring Node JS
  92. Compiling OpenLayers 3
  93. Bundling an application with OpenLayers 3
  94. Extending OpenLayers 3
  95. Creating rich documentation with JSDoc
  96. Summary
  97. Index

Compiling OpenLayers 3

Now that we have resolved every dependency, let's build some versions of the library. First, we will build the minified and debug versions of the library just to see whether everything works fine. In the tasks folder, we can see a bunch of JavaScript files used in various stages of development. There are some test programs, serve commands, and the command that we will use to compile the library: build.js. This program requires two parameters to run. The first is a configuration file, while the second is the name of the result.

As the Closure Compiler is a quite complex library built in Java and Python, OpenLayers 3's developers created some utilities to make our lives easier. With build.js, we do not have to directly parameterize the Closure Compiler, we just have to write a configuration file in the JSON format. The program reads our configuration file and writes every exportable symbol (constructor, method, and so on) from the src folder to a file named info.json. This file can be located in the build folder. Then it goes on to parameterize the Closure Compiler based on the parameters of our configuration file's compile section and builds the library.

Note

There is another utility called closure-utils. This program contains all the programs from the tasks folder in one place. It uses a slightly different syntax from build.js. You can watch a great tutorial to use this program on the OpenLayers 3 official site at http://openlayers.org/en/master/doc/tutorials/closure.html. It covers everything from creating a new Node project with OpenLayers 3 as a dependency to creating debug builds.

Building default versions

Next, as we now know how to use the build.js program, we can build the default versions of OpenLayers 3. For this, we only need the default configuration files, which are located in the config folder. From the source directory, we can build the two versions with the following commands:

node tasks/build.js config/ol.json ol.js
node tasks/build.js config/ol-debug.json ol-debug.js
Building default versions

In the examples for this chapter, you will find an example named ch10_test. It is a simple copy of the simple map example from the first chapter. If you copy your freshly compiled library to this example and link it to the HTML file, you will see the map show up. You can test your debug version in a similar manner.

Tip

If you use Windows, you will most likely run into an error if you have one or more whitespaces in your full path. You have to remove them prior to compiling the code.

Understanding a configuration file

Before we create a smaller build, let's take a look at the configuration file first. Open the ol.json file from the config folder of the source code in a text editor. We can see that there are three parameters in the file. The first one is called exports. It defines an array of symbols which we would like to export. Every other symbol will be obfuscated in the compiled library. The second one is umd. UMD stands for Universal Module Definition, and it should be used when we would like to use our library in a modular way, for example, with Browserify or ReactJS. The third symbol is compile, which contains the Closure Compiler-related parameters.

There is one extra parameter that we should discuss. It is called src, and it contains an array of paths. The JavaScript files under these paths are used in the compilation process. For now, its default value is sufficient; however, if we have some files outside the src folder, it has to be defined.

Note

Note that symbols are only exported from JavaScript files located in the src folder.

Building OpenLayers 3 with a subset of features

In the configuration file, we saw that the exports parameter had a single member: *. This means that every exportable symbol should be exported and there is no filter applied. To compile only the necessary features for a project, we can define an array of features in this parameter. In this example, we will compile a small library with only the features needed for our geocaching application from Chapter 8, OpenLayers 3 for Mobile. First, there is a configuration file called ch10_geocaching_conf.json. If we open this configuration file, we can see that every feature of it is used in a mobile application in the order of occurrence. The other thing that we recognize instantly is that we have to export methods besides constructors. Methods are annotated after a corresponding constructor that is delimited by #:

{
  "exports": [
    "ol.Map",
    "ol.layer.Tile",
    "ol.source.OSM",
    "ol.control.Zoom",
    "ol.View",
    "ol.Geolocation",
    "ol.Map#getView",
    "ol.View#getProjection",
    "ol.layer.Vector",
    "ol.source.Vector",
    "ol.Map#addLayer",
    "ol.Geolocation#once",
    "ol.Geolocation#getAltitude",
    "ol.Geolocation#getPosition",
    […]

Now that we have a nice list of features to export, we can compile a smaller library. We copy this configuration file to the config folder of the source code and build a new version of it with the following command:

node tasks/build.js config/ch10_geocaching_conf.json ol-geocaching.js

Tip

Note that copying the configuration file into the config folder is not mandatory; we just do this for added consistency.

If we examine the resulting library, we will see that it's only 205.6 kilobytes. This is a great result compared to the original library, which is 497.3 kilobytes. Finally, we test our custom version. There is an example, called ch10_geocaching, which we use for testing purposes. Let's link this version in the example's HTML file and check whether it works:

Building OpenLayers 3 with a subset of features

Note

We could get such a small library with a defined set of exports because Closure Compiler checks for the exported symbols in the advanced mode. It exports the unchanged symbols and packs every other related code next to them in an obfuscated form. If a piece of code is entirely unrelated to the exported symbols, Closure removes it from the resulting library.