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 a heat map

When you consider heat maps, you may literally think of an application that is used to visualize heat distribution across the planet, which is definitely an appropriate use case. You can, however, adapt the heat map effect to convey other properties, such as the relative quantity of any data type within areas. The more intense the 'heat', the more dense the information underneath.

For example, imagine a map that reflects how many users are currently online, playing your favorite game. We can specify locations with a weight attribute, which is indicative of the amount of players online for that geographic location. This is the scenario we'll go with for this recipe and can be seen in the following screenshot:

The source code can be found in ch03/ch03-heat-map.

Creating a heat map

How to do it…

Here's how to build a heat map of some fictional online users:

  1. Create an HTML file and add the OpenLayers dependencies and also a div element to hold the map.
  2. Next, initialize the map, add a raster layer, and set up view:
    var map = new ol.Map({
  view: new ol.View({
    zoom: 3,
    center: [-4187526, 4481044]
  }),
  target: 'js-map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ]
});
  3. Finish off by creating a heat map layer with a source reaching out to a GeoJSON file of geometry points. Add this layer to the map:
    map.addLayer(new ol.layer.Heatmap({
  source: new ol.source.Vector({
    url: 'users-online.json',
    format: new ol.format.GeoJSON({
      defaultDataProjection: 'EPSG:3857'
    })
  })
}));

How it works…

You'll notice that creating a heat map with the default settings in OpenLayers is very straightforward. Let's look over the creation of the heat layer:

map.addLayer(new ol.layer.Heatmap({
  source: new ol.source.Vector({

The heat map layer, ol.layer.Heatmap, extends the ol.layer.Vector class. This extension offers many styling properties for the heat effect that we haven't modified for this example, such as gradient (where you can explicitly choose the color palette used for the heat intensity increments) and the self-explanatory blur and shadow properties. I encourage you to familiarize yourself with the other available properties for the heat layer.

  url: 'users-online.json',
  format: new ol.format.GeoJSON({
    defaultDataProjection: 'EPSG:3857'
  })

The vector source points to an external GeoJSON file (users-online.json) and parses it through the GeoJSON formatter. OpenLayers takes care of the AJAX request for us.

The GeoJSON file contains a series of geometry points. Importantly, every point feature has a weight attribute. For example, here's one of the points taken directly from the GeoJSON file:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-342437, 7435794]
  },
  "properties": {
     "weight": 0.6
  }
}

When OpenLayers reads this feature for heat layers, it looks for a feature property called weight. The weight attribute (which must be between 0 and 1) reflects the intensity at this location. In other words, 1 infers a high amount of users online and 0.1 infers a low amount of users online.

The feature attribute doesn't have to be named weight, though. You can name it something arbitrary and inform OpenLayers what the attribute is called via the weight property of ol.layer.Heatmap.

Within the GeoJSON formatter (ol.format.GeoJSON), we inform OpenLayers (via the defaultDataProjection property) that the coordinates within the file belong to the EPSG:3857 projection so that they render correctly on the map.

This recipe concludes our exploration of vector layers. We've learned how to create layers with appropriate strategies for the data, how to integrate with external geometry sources in a variety of different formats, how to package up layer data for export, how to interact with features on these layers, and also some basic feature manipulation and styling.

See also

  • The Adding a GML layer recipe
  • The Using the cluster strategy recipe
  • The Modifying layer appearance recipe from Chapter 7, Beyond the Basics.