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

Chapter 3. Working with Layers

Now that we have learned the basics of creating a frame for our custom WebGIS client, we will proceed to build a fully operational layer tree. Through out the chapter, we will revise how to manage the layer stack of OpenLayers 3 and utilize these capabilities in our application.

In this chapter, we will cover the following topics:

  • Adding and removing layers dynamically
  • Adding layers with the HTML5 File API
  • Changing layer attributes based on user input
  • Changing the order of a layer with the HTML5 Drag and Drop API

Before getting started

In the previous chapters, we discussed the HTML and CSS parts quite thoroughly. From now on, we will focus on the JavaScript part of the application. We will use native JavaScript (no jQuery, ExtJS, or other libraries) to build our application. This way, we will have a better understanding of the native language, rather than a library's abstraction methods. Eventually, our code will be more verbose, but this is a price we are willing to pay in order to gain better insight into JavaScript.

Using a proxy

For this chapter, I have adapted a simple Python proxy file to use from the one made by the OpenLayers Contributors for OpenLayers 2. As we will use AJAX requests to fetch features and metadata, we can easily bump into real CORS restrictions. These restrictions can only be resolved by a server-side proxy script, which requests the data from the target server and forwards it to us. From this moment on, the data will be from the same origin as the proxy script on the same server, which is similar to our application.

To use the proxy script, we will need two things: a Python interpreter and a running web server. If you don't have both of these, you won't be able to use the proxy. In this case, you will have to use a map server, which allows CORS requests.

Tip

If you've used a Python server before, it won't be sufficient now. We need to access a CGI script; therefore, you have to start a different Python server. If you use Python 2, you can create CGIHttpServer. With Python 3, you just have to start your server with the --cgi flag.

If you have a web server and Python installed in it, you can find the proxy file in the code appendix as proxy.py. Copy the file into your server's cgi-bin folder. Note that you may have to modify the relative paths in the examples that are based on your server's layout.

Note

If your web server is public, don't use the proxy script! It is a dead simple script without any validation, sanitization, or security checks. If people can access your server from the Internet, they can use it for bad purposes, and as a consequence, charges can even be brought against you.

Resources to use

Through the examples used in this book, we will build a complete GUI for layer management. This involves adding layers from different sources with the help of forms. As some of the forms need valid resources to work with, called map servers, we will need some URLs to test our application on. The two most common open source map servers are MapServer and GeoServer. They have slightly different semantics that need some consideration when we automatize the data requesting process. We will use the following demo servers, layers, and projections for testing purposes:

  • For WMS, refer to the following:
    • http://demo.opengeo.org/geoserver/wms (GeoServer without the CORS restriction)
    • http://demo.mapserver.org/cgi-bin/wms (MapServer with the CORS restriction)
  • For WFS, refer to the following:
    • http://demo.opengeo.org/geoserver/wfs (GeoServer with the CORS restriction)
    • Layers: topp:states and osm:water_areas
    • Projection: EPSG:3857
    • http://demo.mapserver.org/cgi-bin/wfs (MapServer with the CORS restriction)
    • Layers: cities and continents
    • Projection: EPSG:4326

Note that these demo servers are made available for use free of cost by Boundless and the University of Minnesota Twin Cities. Respect them by using their servers responsibly and not exploiting their services.

Basic considerations

The layer tree will consist of two parts: the layer container with the layer elements and the control buttons. The buttons will be responsible to add and remove layers. The layer container will contain the layers in reverse order, which are as usual in the GIS software. Some of the layers' attributes will be ported to the elements, giving us the ability to change them through the GUI. The layer tree will have a reference to the map object and message bar, giving it the capability of making changes in the map and notifying us of every significant change.