The book of OpenLayers 3
The book of OpenLayers 3
Theory & Practice
About the Book
Note, the book is compatible until Openlayers v3.4. Although overall the concepts are the same, sine v3.5 some changes was introduced in the API that are not reflected in the book.
OpenLayers3 is a new rewritten from scratch version of the library with a new design and API to offer an up to date tool, mobile ready out of the box and with improved performance.
Whether you are an experienced user or a new OpenLayers user, this book is a great reference to start learning the new concepts and API of the OpenLayers3.
The book is written as a mix between a beginner's book and a cookbook, so the reader can learn the concepts and see them in action through the extensive set of examples.
Learn how to create maps, add raster and vector layers, load data from different sources with different formats, work with the controls and interactions. After reading The book of OpenLayers3 you will be able to create any kind of map, from simple visualizations to complex map animations.
Note the source code for all the examples can be freely downloaded from GitHub thebookofopenlayers3 repository and also see it in action. You are welcome to contibute to.
Table of Contents
-
About the book
- Who is this book addressed ?
- How is the book organized ?
- Why I wrote this book?
- The book cover
-
Before to start
-
A brief history
- Born of OpenLayers
-
OpenLayers3
- Features
-
Getting ready for programming with OpenLayer3
- Basic code structure
- How to debug an OpenLayers3 application
-
A brief history
-
1. The Map and the View
-
1.1 The Map
- 1.1.1 Map properties and methods
- 1.1.2 What really happens when a map is created
- 1.1.3 Different ways to render the map
-
1.2 The View
- 1.2.1 Controlling the view
- 1.2.2 Resolutions and zoom levels
- 1.2.3 The view properties
- 1.2.4 Other useful methods
-
1.3 Animations
- 1.3.1 The animation functions
- 1.3.2 The tween functions
- 1.3.3 Applying animations
-
1.4 The practice
-
1.4.1 A basic map
- 1.4.1.1 Goal
- 1.4.1.2 How to do it…
- 1.4.1.3 How it works…
-
1.4.2 Moving around
- 1.4.2.1 Goal
- 1.4.2.2 How to do it…
- 1.4.2.3 How it works…
-
1.4.3 Animating the view
- 1.4.3.1 Goal
- 1.4.3.2 How to do it…
- 1.4.3.3 How it works…
-
1.4.4 Fit an extent
- 1.4.4.1 Goal
- 1.4.4.2 How to do it…
- 1.4.4.3 How it works…
-
1.4.1 A basic map
-
1.1 The Map
-
2. Layers
-
2.1 Managing the layers on the map
- 2.1.1 Controlling the layer stack
-
2.2 The base class
- 2.2.1 Additional properties: Where is the layer name?
-
2.3 The layer hierarchy
-
2.3.1 Layer Groups
- 2.3.1.1 Working with layer groups
- 2.3.2 Tiled layers
- 2.3.3 Image layers
-
2.3.4 Vector layers
- 2.3.4.1 Heatmap layer
-
2.3.1 Layer Groups
-
2.4 The practice
-
2.4.1 Adding and removing layers
- 2.4.1.1 Goal
- 2.4.1.2 How to do it…
- 2.4.1.3 How it works…
-
2.4.2 Raise and lower layers in the layer stack
- 2.4.2.1 Goal
- 2.4.2.2 How to do it…
- 2.4.2.3 How it works…
-
2.4.3 Layer groups
- 2.4.3.1 Goal
- 2.4.3.2 How to do it…
- 2.4.3.3 How it works…
-
2.4.4 Image layer
- 2.4.4.1 Goal
- 2.4.4.2 How to do it…
- 2.4.4.3 How it works…
-
2.4.5 Visualizing layers depending on resolution
- 2.4.5.1 Goal
- 2.4.5.2 How to do it…
- 2.4.5.3 How it works…
-
2.4.6 A heatmap with the world’s cities density
- 2.4.6.1 Goal
- 2.4.6.2 How to do it…
- 2.4.6.3 How it works…
-
2.4.1 Adding and removing layers
-
2.1 Managing the layers on the map
-
3. Data sources and formats
- 3.1 The root source class
-
3.2 Raster sources
- 3.2.1 Introducing the raster hierarchy
- 3.2.2 Tile grids
-
3.2.3 Sources to access tile providers
- 3.2.3.1 OpenStreetMap
- 3.2.3.2 MapQuest and Stamen
- 3.2.3.3 Bing Maps
-
3.2.4 Sources to access OGC compliant servers
-
3.2.4.1 Requesting a WMS server
- 3.2.4.1.1 Single image query
- 3.2.4.1.2 Tiled query
- 3.2.4.1.3 Using WMS parameters
- 3.2.4.1.4 Reading WMS server capabilities
- 3.2.4.2 Loading tiles from a WMTS server
-
3.2.4.1 Requesting a WMS server
-
3.2.5 Other raster sources
- 3.2.5.1 Loading an static image
- 3.2.5.2 Using a HTML5 canvas as source
-
3.3 Vector sources and formats
- 3.3.1 Introducing vector source and format hierarchies
-
3.3.2 Understanding the
StaticVector
based classes -
3.3.3 Understanding the
ServerVector
class - 3.3.4 Loading vector tiles
- 3.3.5 Be aware with the Same Domain Policy
- 3.3.6 Rendering vector data as raster
- 3.3.7 Working with format classes
-
3.4 The practice
-
3.4.1 Tile providers
- 3.4.1.1 Goal
- 3.4.1.2 How to do it…
- 3.4.1.3 How it works…
-
3.4.2 Reading WMS capabilities
- 3.4.2.1 Goal
- 3.4.2.2 How to do it…
- 3.4.2.3 How it works…
- 3.4.2.4 See also
-
3.4.3 Loading data from a WMS server
- 3.4.3.1 Goal
- 3.4.3.2 How to do it…
- 3.4.3.3 How it works…
- 3.4.3.4 See also
-
3.4.4 Requesting WMTS server
- 3.4.4.1 Goal
- 3.4.4.2 How to do it…
- 3.4.4.3 How it works…
-
3.4.5 Different ways to load data using a vector source
- 3.4.5.1 Goal
- 3.4.5.2 How to do it…
- 3.4.5.3 How it works…
- 3.4.5.4 There is more…
- 3.4.5.5 See also
-
3.4.6 Working with ImageCanvas
- 3.4.6.1 Goal
- 3.4.6.2 How to do it…
- 3.4.6.3 How it works…
-
3.4.7 Rendering vector data as raster
- 3.4.7.1 Goal
- 3.4.7.2 How to do it…
- 3.4.7.3 How it works…
-
3.4.8 Requesting data from a WFS server with and without JSONP
- 3.4.8.1 Goal
- 3.4.8.2 How to do it…
- 3.4.8.3 How it works…
- 3.4.8.4 See also
-
3.4.9 Working with loading strategies
- 3.4.9.1 Goal
- 3.4.9.2 How to do it…
- 3.4.9.3 How it works…
- 3.4.9.4 See also
-
3.4.10 Reading and writing features through the source class
- 3.4.10.1 Goal
- 3.4.10.2 How to do it…
- 3.4.10.3 How it works…
-
3.4.1 Tile providers
-
4. Vector layers
- 4.1 Introducing features, geometries and styles
- 4.2 Playing with geometries
- 4.3 Creating features by hand
-
4.4 Styling features
- 4.4.1 Using icons to style features
- 4.4.2 Working with text
-
4.4.3 Applying styles to layers and features
- 4.4.3.1 Understanding the style functions
-
4.5 Managing features
- 4.5.1 A word about events
-
4.6 The practice
-
4.6.1 Playing with geometries
- 4.6.1.1 Goal
- 4.6.1.2 How to do it…
- 4.6.1.3 How it works…
- 4.6.1.4 See also
-
4.6.2 Creating features programmatically
- 4.6.2.1 Goal
- 4.6.2.2 How to do it…
- 4.6.2.3 How it works…
- 4.6.2.4 See also
-
4.6.3 Basic styling
- 4.6.3.1 Goal
- 4.6.3.2 How to do it…
- 4.6.3.3 How it works…
- 4.6.3.4 See also
-
4.6.4 Markers: Styling features with icons
- 4.6.4.1 Goal
- 4.6.4.2 How to do it…
- 4.6.4.3 How it works…
- 4.6.4.4 See also
-
4.6.5 Using text to style features
- 4.6.5.1 Goal
- 4.6.5.2 How to do it…
- 4.6.5.3 How it works…
- 4.6.5.4 See also
-
4.6.6 Working with style functions
- 4.6.6.1 Goal
- 4.6.6.2 How to do it…
- 4.6.6.3 How it works…
- 4.6.6.4 See also
-
4.6.7 Managing features
- 4.6.7.1 Goal
- 4.6.7.2 How to do it…
- 4.6.7.3 How it works…
- 4.6.7.4 See also
-
4.6.1 Playing with geometries
-
5. Events, listeners and properties
- 5.1 Introducing event driven paradigm in OpenLayers3
-
5.2 Where the events and listeners comes from?
-
5.2.1 Listening for changes in
ol.Observable
instances
-
5.2.1 Listening for changes in
-
5.3 Working with object properties
-
5.3.1 Events in the
ol.Object
properties - 5.3.2 Binding properties between objects
-
5.3.1 Events in the
-
5.4 OpenLayers3 components events
-
5.4.1 A word about
ol.source.Source
events
-
5.4.1 A word about
-
5.5 The practice
-
5.5.1 Events, listeners and properties
- 5.5.1.1 Goal
- 5.5.1.2 How to do it…
- 5.5.1.3 How it works…
-
5.5.2 Synchronize maps
- 5.5.2.1 Goal
- 5.5.2.2 How to do it…
- 5.5.2.3 How it works…
- 5.5.2.4 See also
-
5.5.3 Showing the mouse location
- 5.5.3.1 Goal
- 5.5.3.2 How to do it…
- 5.5.3.3 How it works…
-
5.5.4 Listening for changes on vector data
- 5.5.4.1 Goal
- 5.5.4.2 How to do it…
- 5.5.4.3 How it works…
-
5.5.5 Styling features under the pointer
- 5.5.5.1 Goal
- 5.5.5.2 How to do it…
- 5.5.5.3 How it works…
- 5.5.5.4 See also
-
5.5.1 Events, listeners and properties
-
6. Overlays
-
6.1 Introducing overlays
- 6.1.1 Adding overlays to the map
-
6.2 The practice
-
6.2.1 A basic overlay
- 6.2.1.1 Goal
- 6.2.1.2 How to do it…
- 6.2.1.3 How it works…
- 6.2.1.4 See also
-
6.2.2 Using overlays as markers
- 6.2.2.1 Goal
- 6.2.2.2 How to do it…
- 6.2.2.3 How it works…
- 6.2.2.4 See also
-
6.2.1 A basic overlay
-
6.1 Introducing overlays
-
7. Controls and Interactions
-
7.1 Controls
-
7.1.1 The base class
ol.control.Control
- 7.1.2 The controls hierarchy
- 7.1.3 Styling controls
-
7.1.4 Managing controls
- 7.1.4.1 Default controls
-
7.1.5 OpenLayers3 controls
-
7.1.5.1
ol.control.Attribution
-
7.1.5.2
ol.control.Rotate
-
7.1.5.3
ol.control.MousePosition
-
7.1.5.4
ol.control.Scaleline
-
7.1.5.5
ol.control.Zoom
-
7.1.5.6
ol.control.ZoomSlider
-
7.1.5.7
ol.control.ZoomToExtent
-
7.1.5.8
ol.control.OverviewMap
-
7.1.5.9
ol.control.FullScreen
-
7.1.5.1
-
7.1.1 The base class
-
7.2 Interactions
-
7.2.1 The base class
ol.interaction.Interaction
- 7.2.2 The interactions hierarchy
-
7.2.3 Managing interactions
- 7.2.3.1 Default interactions
- 7.2.4 Understanding how interactions works
-
7.2.5 Managing feature changes through
ol.FeatureOverlay
class-
7.2.5.1 The
ol.FeatureOverlay
class
-
7.2.5.1 The
-
7.2.6 OpenLayers3 interactions
-
7.2.6.1
ol.interaction.DoubleClickZoom
-
7.2.6.2
ol.interaction.KeyboardPan
-
7.2.6.3
ol.interaction.KeyboardZoom
-
7.2.6.4
ol.interaction.MouseWheelZoom
-
7.2.6.5
ol.interaction.PinchRotate
-
7.2.6.6
ol.interaction.PinchZoom
-
7.2.6.7
ol.interaction.DragPan
-
7.2.6.8
ol.interaction.DragBox
-
7.2.6.9
ol.interaction.DragZoom
-
7.2.6.10
ol.interaction.DragRotate
-
7.2.6.11
ol.interaction.DragRotateAndZoom
-
7.2.6.12
ol.interaction.DragAndDrop
-
7.2.6.13
ol.interaction.Select
-
7.2.6.14
ol.interaction.Draw
-
7.2.6.15
ol.interaction.Modify
-
7.2.6.1
-
7.2.1 The base class
-
7.3 The practice
-
7.3.1 A static map
- 7.3.1.1 Goal
- 7.3.1.2 How to do it…
- 7.3.1.3 How it works…
-
7.3.2 Playing with controls
- 7.3.2.1 Goal
- 7.3.2.2 How to do it…
- 7.3.2.3 How it works…
- 7.3.2.4 See also
-
7.3.3 Creating a custom control
- 7.3.3.1 Goal
- 7.3.3.2 How to do it…
- 7.3.3.3 How it works…
- 7.3.3.4 There is more…
-
7.3.4 Working with feature overlay
- 7.3.4.1 Goal
- 7.3.4.2 How to do it…
- 7.3.4.3 How it works…
-
7.3.5 Managing interactions
- 7.3.5.1 Goal
- 7.3.5.2 How to do it…
- 7.3.5.3 How it works…
-
7.3.6 Selecting features
- 7.3.6.1 Goal
- 7.3.6.2 How to do it…
- 7.3.6.3 How it works…
- 7.3.6.4 See also
-
7.3.7 Editing features
- 7.3.7.1 Goal
- 7.3.7.2 How to do it…
- 7.3.7.3 How it works…
- 7.3.7.4 See also
-
7.3.8 Selecting features within a vector box
- 7.3.8.1 Goal
- 7.3.8.2 How to do it…
- 7.3.8.3 How it works…
-
7.3.1 A static map
-
7.1 Controls
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them