Table of Contents for
OpenLayers 3.x Cookbook - Second Edition

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition OpenLayers 3.x Cookbook - Second Edition by Antonio Santiago Perez Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. OpenLayers 3.x Cookbook Second Edition
  4. OpenLayers 3.x Cookbook Second Edition
  5. Credits
  6. About the Authors
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Sections
  13. Conventions
  14. Reader feedback
  15. Customer support
  16. 1. Web Mapping Basics
  17. Creating a simple fullscreen map
  18. Playing with the map's options
  19. Managing the map's stack layers
  20. Managing the map's controls
  21. Moving around the map view
  22. Restricting the map's extent
  23. 2. Adding Raster Layers
  24. Using Bing imagery
  25. Using OpenStreetMap imagery
  26. Adding WMS layers
  27. Changing the zoom effect
  28. Changing layer opacity
  29. Buffering the layer data to improve map navigation
  30. Creating an image layer
  31. Setting the tile size in WMS layers
  32. 3. Working with Vector Layers
  33. Adding a GML layer
  34. Adding a KML layer
  35. Creating features programmatically
  36. Exporting features as GeoJSON
  37. Reading and creating features from a WKT
  38. Using point features as markers
  39. Removing or cloning features using overlays
  40. Zooming to the extent of a layer
  41. Adding text labels to geometry points
  42. Adding features from a WFS server
  43. Using the cluster strategy
  44. Reading features directly using AJAX
  45. Creating a heat map
  46. 4. Working with Events
  47. Creating a side-by-side map comparator
  48. Implementing a work-in-progress indicator for map layers
  49. Listening for the vector layer features' events
  50. Listening for mouse or touch events
  51. Using the keyboard to pan or zoom
  52. 5. Adding Controls
  53. Adding and removing controls
  54. Working with geolocation
  55. Placing controls outside the map
  56. Drawing features across multiple vector layers
  57. Modifying features
  58. Measuring distances and areas
  59. Getting feature information from a data source
  60. Getting information from a WMS server
  61. 6. Styling Features
  62. Styling layers
  63. Styling features based on geometry type
  64. Styling based on feature attributes
  65. Styling interaction render intents
  66. Styling clustered features
  67. 7. Beyond the Basics
  68. Working with projections
  69. Creating a custom control
  70. Selecting features by dragging out a selection area
  71. Transitioning between weather forecast imagery
  72. Using the custom OpenLayers library build
  73. Drawing in freehand mode
  74. Modifying layer appearance
  75. Adding features to the vector layer by dragging and dropping them
  76. Making use of map permalinks
  77. Index

Creating an image layer

Sometimes a tiled layer, such as Bing Maps, OpenStreetMap, or from WMS services, is not what you need. You may have access to a georeferenced image or know of a server that can return an image for arbitrary extents and resolutions.

In these cases, OpenLayers offers the ol.layer.Image class that allows us to create a layer that is based on an image. For this recipe, we hook up to a WMS service that returns a single image on request for a given bounding box. The source code can be found in ch02/ch02-image-layer/.

This recipe will use the ol.source.ImageWMS source class to connect to the WMS server. However, if you have a static georeferenced image, then you should use ol.source.ImageStatic, which works in much the same way.

Creating an image layer

How to do it…

To create an image layer, perform the following steps:

  1. Create an HTML file with the OpenLayers dependencies and a div for the map container.
  2. Within your custom JavaScript file, create an extent, which will be used to center the map and restrict the extent variable for our image layer:
    var extent = [-93941, 6650480, 64589, 6766970];
  3. Initialize the map with a tiled raster layer from Stamen, as follows:
    var map = new ol.Map({
  view: new ol.View({
    zoom: 10,
    center: ol.extent.getCenter(extent)
  }),
  target: 'js-map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.Stamen({
        layer: 'toner'
      })
    })
  ]
});
  4. Create the WMS image layer and add it to the map:
    map.addLayer(new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: 'http://ogc.bgs.ac.uk/cgi-bin/' +
         'BGS_Bedrock_and_Superficial_Geology/wms',
    params: {
            LAYERS: 'BGS_EN_Bedrock_and_Superficial_Geology'
    },
    attributions: [
      new ol.Attribution({
        html: 'Contains <a href="http://bgs.ac.uk">' +
              'British Geological Survey</a> ' +
              'materials &copy; NERC 2015'
      })
    ]
  }),
  opacity: 0.7,
  extent: extent
}));

How it works…

We decided to make use of a WMS service from the British Geological Survey, which can be utilized to return a single image for specified extents of Great Britain. For the background mapping, we chose to use the Stamen provider with a layer style called toner that will provide context for the WMS image.

var extent = [-93941, 6650480, 64589, 6766970];

We store an arbitrary extent into a variable, namely extent. This extent (using the EPSG:3857 projection) covers the city of London and surrounding areas.

var map = new ol.Map({
  view: new ol.View({
    zoom: 10,
    center: ol.extent.getCenter(extent)
  })
});

When we create the map instance, the center value of the view is calculated from our custom extent. The ol.extent object provides many helper methods when working with extents, one of which is getCenter. This method expects an ol.Coordinate method (an array of coordinates), which we provide, it and returns the center coordinates for us:

map.addLayer(new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: 'http://ogc.bgs.ac.uk/cgi-bin/' +
         'BGS_Bedrock_and_Superficial_Geology/wms',
    params: {
      LAYERS: 'BGS_EN_Bedrock_and_Superficial_Geology'
    },
    attributions: [
      new ol.Attribution({
        html: 'Contains <a href="http://bgs.ac.uk">' +
              'British Geological Survey</a> ' +
              'materials &copy; NERC 2015'
      })
    ]
  }),
  opacity: 0.7,
  extent: extent
}));

We create the image layer using the ol.layer.Image class. Using this class will request and return a single image, rather than multiple tile images. On the layer, we set the opacity property to 70% and restrict the extent of the layer by passing in our custom extent to the extent property.

The source property is an instance of ol.source.ImageWMS, which is similar to ol.source.TileWMS in its available properties. We provide the necessary details to successfully retrieve an image from this WMS service, such as the URL, the parameters of the request to include the specific layer that we're interested in, and the attribution to cover our usage.

OpenLayers will accompany our LAYERS parameter by sending some other parameters along with the request as default, such as FORMAT, VERSION, TRANSPARENT, and so on.

As we have restricted the extent of this layer, when you zoom to lower resolutions, this restriction becomes apparent, as demonstrated in the following screenshot:

How it works…

When examining the returned image in the browser development tools, it weighed over half a megabyte with dimensions (in pixels) of 1556 × 1143. Suffice to say that the time to download and render this image on the map was not instantaneous.

When compared against tile requests that begin building up the map view incrementally, the user may feel a perceived loss of responsiveness with single image layers. It's up to you how to combat this—perhaps a loading bar or spinner as a visual cue of the current progress. Chapter 4, Working with Events, has a topic on implementing a work-in-progress indicator for map layers.

See also

  • The Adding WMS layer recipe
  • The Buffering the layer data to improve map navigation recipe