Table of Contents for
OpenLayers 3 : Beginner's Guide

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition OpenLayers 3 : Beginner's Guide by Erik Hazzard Published by Packt Publishing, 2015
  1. Cover
  2. Table of Contents
  3. OpenLayers 3 Beginner's Guide
  4. OpenLayers 3 Beginner's Guide
  5. Credits
  6. About the Authors
  7. About the Reviewers
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Sections
  13. Time for action – heading
  14. Conventions
  15. Reader feedback
  16. Customer support
  17. 1. Getting Started with OpenLayers
  18. Advantages of using OpenLayers
  19. What, technically, is OpenLayers?
  20. Anatomy of a web mapping application
  21. Connecting to Google, Bing Maps, and other mapping APIs
  22. Time for action – downloading OpenLayers
  23. Time for action – creating your first map
  24. Where to go for help
  25. OpenLayers issues
  26. OpenLayers source code repository
  27. Getting live news from RSS and social networks
  28. Summary
  29. 2. Key Concepts in OpenLayers
  30. Time for action – creating a map
  31. Time for action – using the JavaScript console
  32. Time for action – overlaying information
  33. OpenLayers' super classes
  34. Key-Value Observing with the Object class
  35. Time for action – using bindTo
  36. Working with collections
  37. Summary
  38. 3. Charting the Map Class
  39. Time for action – creating a map
  40. Map renderers
  41. Time for action – rendering a masterpiece
  42. Map properties
  43. Time for action – target practice
  44. Map methods
  45. Time for action – creating animated maps
  46. Events
  47. Views
  48. Time for action – linking two views
  49. Summary
  50. 4. Interacting with Raster Data Source
  51. Layers in OpenLayers 3
  52. Common operations on layers
  53. Time for action – changing layer properties
  54. Tiled versus untiled layers
  55. Types of raster sources
  56. Tiled images' layers and their sources
  57. Time for action – creating a Stamen layer
  58. Time for action – creating a Bing Maps layer
  59. Time for action – creating tiles and adding Zoomify layer
  60. Image layers and their sources
  61. Using Spherical Mercator raster data with other layers
  62. Time For action – playing with various sources and layers together
  63. Time For action – applying Zoomify sample knowledge to a single raw image
  64. Summary
  65. 5. Using Vector Layers
  66. Time for action – creating a vector layer
  67. How the vector layer works
  68. The vector layer class
  69. Vector sources
  70. Time for action – using the cluster source
  71. Time for action – creating a loader function
  72. Time for action – working with the TileVector source
  73. Time for action – a drag and drop viewer for vector files
  74. Features and geometries
  75. Time for action – geometries in action
  76. Time for action – interacting with features
  77. Summary
  78. 6. Styling Vector Layers
  79. Time for action – basic styling
  80. The style class
  81. Time for action – using the icon style
  82. Have a go hero – using the circle style
  83. Multiple styles
  84. Time for action – using multiple styles
  85. Style functions
  86. Time for action – using properties to style features
  87. Interactive styles
  88. Time for action – creating interactive styles
  89. Summary
  90. 7. Wrapping Our Heads Around Projections
  91. Time for action – using different projection codes
  92. Time for action – determining coordinates
  93. OpenLayers projection class
  94. Transforming coordinates
  95. Time for action – coordinate transforms
  96. Time for action – setting up Proj4js.org
  97. Time for action – reprojecting extent
  98. Time for action – using custom projection with WMS sources
  99. Time for action – reprojecting geometries in vector layers
  100. Summary
  101. 8. Interacting with Your Map
  102. Time for action – converting your local or national authorities data into web mapping formats
  103. Time for action – testing the use cases for ol.interaction.Select
  104. Time for action – more options with ol.interaction.Select
  105. Introducing methods to get information from your map
  106. Time for action – understanding the forEachFeatureAtPixel method
  107. Time for action – understanding the getGetFeatureInfoUrl method
  108. Adding a pop-up on your map
  109. Time for action – introducing ol.Overlay with a static example
  110. Time for action – using ol.Overlay dynamically with layers information
  111. Time for action – using ol.interaction.Draw to share new information on the Web
  112. Time for action – using ol.interaction.Modify to update drawing
  113. Understanding interactions and their architecture
  114. Time for action – configuring default interactions
  115. Discovering the other interactions
  116. Time for action – using ol.interaction.DragRotateAndZoom
  117. Time for action – making rectangle export to GeoJSON with ol.interaction.DragBox
  118. Summary
  119. 9. Taking Control of Controls
  120. Adding controls to your map
  121. Time for action – starting with the default controls
  122. Controls overview
  123. Time for action – changing the default attribution styles
  124. Time for action – finding your mouse position
  125. Time for action – configuring ZoomToExtent and manipulate controls
  126. Creating a custom control
  127. Time for action – extending ol.control.Control to make your own control
  128. Summary
  129. 10. OpenLayers Goes Mobile
  130. Using a web server
  131. Time for action – go mobile!
  132. The Geolocation class
  133. Time for action – location, location, location
  134. The DeviceOrientation class
  135. Time for action – a sense of direction
  136. Debugging mobile web applications
  137. Debugging on iOS
  138. Debugging on Android
  139. Going offline
  140. Time for action – MANIFEST destiny
  141. Going native with web applications
  142. Time for action – track me
  143. Summary
  144. 11. Creating Web Map Apps
  145. Using geospatial data from Flickr
  146. Time for action – getting Flickr data
  147. A simple application
  148. Time for Action – adding data to your map
  149. Styling the features
  150. Time for action – creating a style function
  151. Creating a thumbnail style
  152. Time for action – switching to JSON data
  153. Time for action – creating a thumbnail style
  154. Turning our example into an application
  155. Time for action – adding the select interaction
  156. Time for action – handling selection events
  157. Time for action – displaying photo information
  158. Using real time data
  159. Time for action – getting dynamic data
  160. Wrapping up the application
  161. Time for action – adding dynamic tags to your map
  162. Deploying an application
  163. Creating custom builds
  164. Creating a combined build
  165. Time for action – creating a combined build
  166. Creating a separate build
  167. Time for action – creating a separate build
  168. Summary
  169. A. Object-oriented Programming – Introduction and Concepts
  170. Going further
  171. B. More details on Closure Tools and Code Optimization Techniques
  172. Introducing Closure Library, yet another JavaScript library
  173. Time for action – first steps with Closure Library
  174. Making custom build for optimizing performance
  175. Time for action – playing with Closure Compiler
  176. Applying your knowledge to the OpenLayers case
  177. Time for action - running official examples with the internal OpenLayers toolkit
  178. Time for action - building your custom OpenLayers library
  179. Syntax and styles
  180. Time for action – using Closure Linter to fix JavaScript
  181. Summary
  182. C. Squashing Bugs with Web Debuggers
  183. Time for action – opening Chrome Developer Tools
  184. Explaining Chrome Developer debugging controls
  185. Time for action – using DOM manipulation with OpenStreetMap map images
  186. Time for action – using breakpoints to explore your code
  187. Time for action – playing with zoom button and map copyrights
  188. Using the Console panel
  189. Time for action – executing code in the Console
  190. Time for action – creating object literals
  191. Time for action – interacting with a map
  192. Improving Chrome and Developer Tools with extensions
  193. Debugging in other browsers
  194. Summary
  195. D. Pop Quiz Answers
  196. Chapter 5, Using Vector Layers
  197. Chapter 7, Wrapping Our Heads Around Projections
  198. Chapter 8, Interacting with Your Map
  199. Chapter 9, Taking Control of Controls
  200. Chapter 10, OpenLayers Goes Mobile
  201. Appendix B, More details on Closure Tools and Code Optimization Techniques
  202. Appendix C, Squashing Bugs with Web Debuggers
  203. Index

Chapter 7. Wrapping Our Heads Around Projections

When you look at a map, you are looking at a two-dimensional representation of a 3D object (the Earth). Because we are, essentially, 'losing' a dimension when we create a map, no map is a perfect representation of the Earth. All maps have some distortion.

The distortion depends on what projection (a method of representing the earth's surface on a two dimensional plane) you use. In this chapter, we'll talk more about what projections are, why they're important, and how we can use them in OpenLayers. We'll also cover some other fundamental geographic principles that will help make it easier to better understand OpenLayers.

In this chapter, we will cover the following topics:

  • Concept of map projections
  • Types of projections
  • Latitude, longitude, and other geographic concepts
  • The OpenLayers projection class
  • Transforming coordinates
  • Projections in context of raster layers
  • Projections using vector layers

Let's get started!

Map projections

No maps of the earth are truly perfect representations; all maps have some distortion. The reason for this, is because they are attempting to represent a 3D object (an ellipsoid: the Earth) in two dimensions (a plane: the map itself).

A projection is a representation of the entire, or parts of a surface of a 3D sphere (or more precisely, an ellipsoid) on a 2D plane (or other types of geometry).

Why on earth are projections used?

Every map has some sort of projection—it is an inherent attribute of maps. Imagine unpeeling an orange and then flattening the peel out. Some kind of distortion will occur, and if you try to fully fit the peel into a square or rectangle (like a flat, two-dimensional map), you'd have a very hard time.

To get the peel to fit perfectly onto a flat square or rectangle, you can try to stretch out certain parts of the peel or cut some pieces of the peel off and rearrange them. The same sort of idea applies while trying to create a map.

There are literally an infinite amount of possible map projections; an unlimited number of ways to represent a three-dimensional surface in two dimensions, but none of them are totally distortion free.

So, if there are so many different map projections, how do we decide on which one to use? Is there a best one? The answer is no. The 'best' projection to use depends on the context in which you use your map, what you're looking at, and what characteristics you wish to preserve.

Projection characteristics

As a two-dimensional representation is not without distortion, each projection makes a trade off between some characteristics. As we lose a dimension when projecting the earth onto a map, we must make some sort of trade off between the characteristics we want to preserve. There are numerous characteristics, but for now, let's focus on three of them.

Area

Area refers to the size of features on the map. Projections that preserve area are known as equal-area projections (also known as equiareal, equivalent, or homolographic). A projection preserves area if, for example, a meter measured at different places on the map covers the same area. Because area remains the same, angles, scales, and shapes are distorted. This is what an equal area projected map may look like:

Area

Here, we use Tissot indicatrix with EPSG:3410 NSIDC EASE-Grid Global, where the EPSG code helps define all existing projections. We will cover EPSG in detail, later in this chapter.

Without going into technical details, Tissot indicatrix is a way to display map projections deformation visually. In a perfect projection, we will keep area, distance, and shape, with circles with equal area and equal distance.

As you see, with this equal-area projection, we have circle and ellipse shapes but areas remain the same.

Scale

Scale is the ratio of the map's distance to the actual distance (for example, one centimeter on the map may be equal to one hundred actual meters). All map projections show scale incorrectly at some areas throughout the map; no map can show the same scale throughout the map. There are parts of the map, however, where scale remains correct—the placement of these locations mitigates scale errors elsewhere. The deformation of scale also depends on the area being mapped. Projections are referred to as equidistant if they contain true scale between a point and every other point on the map.

An example to illustrate can be the EPSG:32662 projection known as Plate Carree.

Scale

Here, we keep the distance between the center of the ellipse/circle. We overlay on top of the image of a grid so that you can better evaluate distance.

Shape

Maps that preserve shape are known as conformal or orthomorphic. Shape means that relative angles to all points on a map are correct. Most maps that show the entire earth are conformal, such as the Mercator projection (used by Google Earth and other common web maps). Depending on the specific projection, areas throughout the map are generally distorted but may be correct in certain places. Also, a map that is conformal cannot be equal-area.

To illustrate shape preservations, let's see the following example using EPSG code 3395 (WGS 84 - World Mercator), where all circles stay circles wherever they are:

Shape

Other characteristics

Projections have numerous other characteristics, such as bearing, distance, and direction. The key concept to take away here is that all projections preserve some characteristics at the expense of others. For instance, a map that preserves shape cannot completely preserve area.

There is no perfect map projection. The usefulness of a projection depends on the context the map is being used in. A particular projection may excel at a certain task, for example, navigation, but can be a poor choice for other purposes. For example, when we do thematic mapping and respect representations rules, colors are related to areas of countries. When we look at a world thematic map with a wrong projection, our eyes see a country bigger than the others, whereas because of projections, this country can, in reality, have a calculated area identical to countries represented with a smaller size.

The following figure overlays an area preserving projection (Robinson) on top of a Spherical Mercator to show the difference and why it matters:

Other characteristics

Have a go hero – projections' effects on scale

One of the simple ways to convince you that each projection has a reason to exist is to visit the OpenLayers 3 website examples.

We will compare the scale line example, http://openlayers.org/en/v3.0.0/examples/scale-, with the tiled WMS with the custom projection example, http://openlayers.org/en/v3.0.0/examples/wms-custom-proj.html.

Your instructions until now are:

  • To not look at the code but only the behavior of the scale line in the bottom-left corner of the map.
  • In both cases, to zoom in and at the same zoom level, pan up and down looking at the scale line.
  • How the scale line behaves.
  • How do you explain it?

Types of projections

Projections are projected onto a geometric surface, three of the most common ones being a plane, cone, or cylinder.

Imagine a cylinder being wrapped around the earth, with the center of the cylinder's circumference touching the equator. Now, the earth is projected onto the surface of this cylinder, and if you cut the cylinder from top to bottom vertically and unwrap it and lay it flat, you'd have a regular cylindrical projection:

Types of projections

The Mercator projection is just one of these types of projections. If you've never worked with projections before, there is a good chance that most of the maps you've seen were in this projection.

Because of its nature, there is heavy distortion near the ends of the poles. Looking at the previous screenshot, you can see that the cells get progressively larger, the closer you get to the North and South poles. For example, Greenland looks larger than South America, but in reality, it is about the size of Mexico. For illustrating this problem visually, you can compare countries overlapping with http://overlapmaps.com. If area distortion is important in your map, you might consider using an equal area projection, as we mentioned earlier.

Note

More information about projections can be found at the USGS (US Geological Survey) website at http://pubs.er.usgs.gov/publication/pp1395, where you can download the reference book Map Projections: A Working Manual (U.S. Geological Survey Professional Paper 1395), John P. Snyder, 1987, 397 pages.

EPSG codes

As we mentioned, there are literally an infinite number of possible projections. So, it makes sense that there should be some universally agreed upon classification system that keeps track of projection information. There are many different classification systems, but OpenLayers uses EPSG codes. EPSG refers to the European Petroleum Survey Group, a scientific organization involved in oil exploration, which in 2005 was taken over by the OGP (International Association of Oil and Gas Producers).

For the purpose of OpenLayers, EPSG codes are referred to as EPSG:4326.

The numbers (4326, in this case) after EPSG: refer to the projection identification number. It uses the familiar longitude/latitude coordinate system, with coordinates that range from -180° to 180° (longitude) and -90° to 90° (latitude).