Book Image

OpenLayers 3: Beginner's Guide

By : Thomas Gratier, Paul Spencer, Erik Hazzard
Book Image

OpenLayers 3: Beginner's Guide

By: Thomas Gratier, Paul Spencer, Erik Hazzard

Overview of this book

<p>This book is a practical, hands-on guide that provides you with all the information you need to get started with mapping using the OpenLayers 3 library.</p> <p>The book starts off by showing you how to create a simple map. Through the course of the book, we will review each component needed to make a map in OpenLayers 3, and you will end up with a full-fledged web map application. You will learn the key role of each OpenLayers 3 component in making a map, and important mapping principles such as projections and layers. You will create your own data files and connect to backend servers for mapping. A key part of this book will also be dedicated to building a mapping application for mobile devices and its specific components.</p>

Related Content you might be interested in

Current Title:

Small book image
OpenLayers 3: Beginner's Guide
Thomas Gratier | Paul Spencer | Erik Hazzard
Jan, 2015 | 512 pages
No titles found
Table of Contents (22 chapters)
OpenLayers 3 Beginner's Guide
OpenLayers 3 Beginner's Guide
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with OpenLayers
Getting Started with OpenLayers
Introducing OpenLayers
Advantages of using OpenLayers
What, technically, is OpenLayers?
Anatomy of a web mapping application
Connecting to Google, Bing Maps, and other mapping APIs
Time for action – downloading OpenLayers
Time for action – creating your first map
Where to go for help
OpenLayers issues
OpenLayers source code repository
Getting live news from RSS and social networks
Summary
2
Key Concepts in OpenLayers
Key Concepts in OpenLayers
OpenLayers' key components
Time for action – creating a map
Time for action – using the JavaScript console
Time for action – overlaying information
OpenLayers' super classes
Key-Value Observing with the Object class
Time for action – using bindTo
Working with collections
Summary
3
Charting the Map Class
Charting the Map Class
Understanding the Map class
Time for action – creating a map
Map renderers
Time for action – rendering a masterpiece
Map properties
Time for action – target practice
Map methods
Time for action – creating animated maps
Events
Views
Time for action – linking two views
Summary
4
Interacting with Raster Data Source
Interacting with Raster Data Source
Introducing layers
Layers in OpenLayers 3
Common operations on layers
Time for action – changing layer properties
Tiled versus untiled layers
Types of raster sources
Tiled images' layers and their sources
Time for action – creating a Stamen layer
Time for action – creating a Bing Maps layer
Time for action – creating tiles and adding Zoomify layer
Image layers and their sources
Using Spherical Mercator raster data with other layers
Time For action – playing with various sources and layers together
Time For action – applying Zoomify sample knowledge to a single raw image
Summary
5
Using Vector Layers
Using Vector Layers
Understanding the vector layer
Time for action – creating a vector layer
How the vector layer works
The vector layer class
Vector sources
Time for action – using the cluster source
Time for action – creating a loader function
Time for action – working with the TileVector source
Time for action – a drag and drop viewer for vector files
Features and geometries
Time for action – geometries in action
Time for action – interacting with features
Summary
6
Styling Vector Layers
Styling Vector Layers
What are vector styles?
Time for action – basic styling
The style class
Time for action – using the icon style
Have a go hero – using the circle style
Multiple styles
Time for action – using multiple styles
Style functions
Time for action – using properties to style features
Interactive styles
Time for action – creating interactive styles
Summary
7
Wrapping Our Heads Around Projections
Wrapping Our Heads Around Projections
Map projections
Time for action – using different projection codes
Time for action – determining coordinates
OpenLayers projection class
Transforming coordinates
Time for action – coordinate transforms
Time for action – setting up Proj4js.org
Time for action – reprojecting extent
Time for action – using custom projection with WMS sources
Time for action – reprojecting geometries in vector layers
Summary
8
Interacting with Your Map
Interacting with Your Map
Selecting features with OpenLayers 3
Time for action – converting your local or national authorities data into web mapping formats
Time for action – testing the use cases for ol.interaction.Select
Time for action – more options with ol.interaction.Select
Introducing methods to get information from your map
Time for action – understanding the forEachFeatureAtPixel method
Time for action – understanding the getGetFeatureInfoUrl method
Adding a pop-up on your map
Time for action – introducing ol.Overlay with a static example
Time for action – using ol.Overlay dynamically with layers information
Time for action – using ol.interaction.Draw to share new information on the Web
Time for action – using ol.interaction.Modify to update drawing
Understanding interactions and their architecture
Time for action – configuring default interactions
Discovering the other interactions
Time for action – using ol.interaction.DragRotateAndZoom
Time for action – making rectangle export to GeoJSON with ol.interaction.DragBox
Summary
9
Taking Control of Controls
Taking Control of Controls
Introducing controls
Adding controls to your map
Time for action – starting with the default controls
Controls overview
Time for action – changing the default attribution styles
Time for action – finding your mouse position
Time for action – configuring ZoomToExtent and manipulate controls
Creating a custom control
Time for action – extending ol.control.Control to make your own control
Summary
10
OpenLayers Goes Mobile
OpenLayers Goes Mobile
Touch support in OpenLayers
Using a web server
Time for action – go mobile!
The Geolocation class
Time for action – location, location, location
The DeviceOrientation class
Time for action – a sense of direction
Debugging mobile web applications
Debugging on iOS
Debugging on Android
Going offline
Time for action – MANIFEST destiny
Going native with web applications
Time for action – track me
Summary
11
Creating Web Map Apps
Creating Web Map Apps
Development strategies
Using geospatial data from Flickr
Time for action – getting Flickr data
A simple application
Time for Action – adding data to your map
Styling the features
Time for action – creating a style function
Creating a thumbnail style
Time for action – switching to JSON data
Time for action – creating a thumbnail style
Turning our example into an application
Time for action – adding the select interaction
Time for action – handling selection events
Time for action – displaying photo information
Using real time data
Time for action – getting dynamic data
Wrapping up the application
Time for action – adding dynamic tags to your map
Deploying an application
Creating custom builds
Creating a combined build
Time for action – creating a combined build
Creating a separate build
Time for action – creating a separate build
Summary
Object-oriented Programming – Introduction and Concepts
Object-oriented Programming – Introduction and Concepts
What is object-oriented programming?
Going further
More details on Closure Tools and Code Optimization Techniques
More details on Closure Tools and Code Optimization Techniques
The Closure Tools philosophy
Introducing Closure Library, yet another JavaScript library
Time for action – first steps with Closure Library
Making custom build for optimizing performance
Time for action – playing with Closure Compiler
Applying your knowledge to the OpenLayers case
Time for action - running official examples with the internal OpenLayers toolkit
Time for action - building your custom OpenLayers library
Syntax and styles
Time for action – using Closure Linter to fix JavaScript
Summary
Squashing Bugs with Web Debuggers
Squashing Bugs with Web Debuggers
Introducing Chrome Developer Tools
Time for action – opening Chrome Developer Tools
Explaining Chrome Developer debugging controls
Time for action – using DOM manipulation with OpenStreetMap map images
Time for action – using breakpoints to explore your code
Time for action – playing with zoom button and map copyrights
Using the Console panel
Time for action – executing code in the Console
Time for action – creating object literals
Time for action – interacting with a map
Improving Chrome and Developer Tools with extensions
Debugging in other browsers
Summary
Pop Quiz Answers
Pop Quiz Answers
Chapter 3, Charting the Map Class
Chapter 5, Using Vector Layers
Chapter 7, Wrapping Our Heads Around Projections
Chapter 8, Interacting with Your Map
Chapter 9, Taking Control of Controls
Chapter 10, OpenLayers Goes Mobile
Appendix B, More details on Closure Tools and Code Optimization Techniques
Appendix C, Squashing Bugs with Web Debuggers
Index
Index

Time for action – finding your mouse position

Follow these steps to get started with the mouse position behavior:

  1. Reuse the usual HTML for the chapter by copying it in a new file.

  2. Now, edit the file to be sure that you create an HTML element with an ID myposition such as <div id="myposition"></div>.

  3. Declare a JavaScript variable that references the control:

    var mousePosition = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(2),
  projection: 'EPSG:4326',
  target: document.getElementById('myposition'),
  undefinedHTML: '&nbsp;'
});

  4. Add the control to the map without forgetting that this operation is only available after you create the map:

    map.addControl(mousePosition);

  5. See the result in your browser and hover with your mouse the map.

  6. Go back in your HTML code and add the following code in your CSS file, assets/css/samples.css:

    #myposition > .ol-mouse-position {
  position: relative;
  margin-left: 20px;
  font-size: 30px;
}

  7. Reload your page and you...

Previous Section
End of Section 7
Next Section