Table of Contents for
OpenLayers 3 : Beginner's Guide
Close
Version ebook
/
Retour
OpenLayers 3 : Beginner's Guide
by Erik Hazzard
Published by Packt Publishing, 2015
Cover
Table of Contents
OpenLayers 3 Beginner's Guide
OpenLayers 3 Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
What you need for this book
Who this book is for
Sections
Time for action – heading
Conventions
Reader feedback
Customer support
1. Getting Started with 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
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
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
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
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
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
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
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
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
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
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
A. Object-oriented Programming – Introduction and Concepts
Going further
B. More details on Closure Tools and Code Optimization Techniques
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
C. Squashing Bugs with Web Debuggers
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
D. Pop Quiz Answers
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
Prev
Previous Chapter
Cover
Next
Next Chapter
OpenLayers 3 Beginner's Guide
Table of Contents
OpenLayers 3 Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Sections
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
1. Getting Started with OpenLayers
Introducing OpenLayers
Advantages of using OpenLayers
What, technically, is OpenLayers?
Client side
Library
Anatomy of a web mapping application
Web map client
Web map server
Connecting to Google, Bing Maps, and other mapping APIs
Layers in OpenLayers
Understanding a layer
The OpenLayers website
Time for action – downloading OpenLayers
What just happened?
Making our first map
Time for action – creating your first map
What just happened?
Where to go for help
API docs
This book's website
Mailing lists
Other online resources
OpenLayers issues
IRC
OpenLayers source code repository
Getting live news from RSS and social networks
Summary
2. Key Concepts in OpenLayers
OpenLayers' key components
It's all about the map
Time for action – creating a map
What just happened?
Time for action – using the JavaScript console
What just happened?
Have a go hero
Controlling the map's view
Displaying map content
Time for action – overlaying information
What just happened?
Interacting with the map
Using interactions
Controls
OpenLayers' super classes
Event management with the Observable class
Working with events
Key-Value Observing with the Object class
Time for action – using bindTo
What just happened?
Transforming values with bindTo
More about KVO properties
Working with collections
Creating a collection
Collection properties
Collection events
Collection methods
Summary
3. Charting the Map Class
Understanding the Map class
Time for action – creating a map
What just happened?
Map renderers
The Canvas renderer
The WebGL renderer
The DOM renderer
Time for action – rendering a masterpiece
What just happened?
Map properties
Time for action – target practice
What just happened?
Have a go hero – hiding the map
Map methods
Control methods
Interaction methods
Layer methods
Overlay methods
Map rendering methods
Animation functions
Time for action – creating animated maps
What just happened?
Have a go hero – exploring animation properties
Conversion methods
Other methods
Events
Browser events
Map events
Render events
Views
The view Class
View options
Understanding resolution
View KVO properties
View methods
Time for action – linking two views
What just happened?
Have a go hero – an overview map
Pop quiz
Summary
4. Interacting with Raster Data Source
Introducing layers
Layers in OpenLayers 3
The base layer
Overlay layers
Types of layers
Common operations on layers
Time for action – changing layer properties
What just happened?
Tiled versus untiled layers
Types of raster sources
Defining a source
A quick look at the history of API and tiles providers
Map mashups
OpenLayers and third-party APIs
Tiled images' layers and their sources
The OpenStreetMap layer
Accessing your own OSM tiles
Understanding OSM tiling
OpenStreetMap source class properties
The MapQuest layer
MapQuest source class properties
Have a go hero – using OSM layer and MapQuest layers to create a map
Stamen layers
Time for action – creating a Stamen layer
What just happened?
Stamen source class properties
The Bing Maps layer
Time for action – creating a Bing Maps layer
What just happened?
Bing Maps source class properties
The TileJSON layer
TileJSON source class properties
WMTS layers
WMTS source class properties
The DebugTileSource source
TileDebugTile source class properties
OpenLayers tiled WMS
Tiled WMS source class properties
OpenLayers Zoomify
Time for action – creating tiles and adding Zoomify layer
What just happened?
Image layers and their sources
OpenLayers' image WMS layer
Using Spherical Mercator raster data with other layers
Time For action – playing with various sources and layers together
What just happened?
OpenLayers image for MapGuide
Inserting raw images using ImageStatic class
Time For action – applying Zoomify sample knowledge to a single raw image
What just happened?
ImageStatic source class properties
ImageCanvas source class properties
Summary
5. Using Vector Layers
Understanding the vector layer
Features of the vector layer
The vector layer is client side
Performance considerations
The difference between raster and vector
Time for action – creating a vector layer
What just happened?
Pop quiz – why use a vector layer?
How the vector layer works
How the vector layer is rendered
The vector layer class
Creating a vector layer
Vector layer methods
Vector sources
The vector source class
The cluster source
Time for action – using the cluster source
What just happened?
The format sources
What are formats?
The JSON formats
The XML formats
The text formats
The StaticVector source
The JSON formats
ol.source.GPX
ol.source.IGC
ol.source.KML
ol.source.OSMXML
Have a go hero
The ServerVector source
Time for action – creating a loader function
What just happened?
The TileVector source
Time for action – working with the TileVector source
What just happened?
Time for action – a drag and drop viewer for vector files
What just happened?
Features and geometries
The Geometry class
Coordinates
Geometry methods
Geometry subclasses
The SimpleGeometry class and subclasses
Point, MultiPoint, and Circle classes
LineString and MultiLineString classes
Polygon, MultiPolygon, and LinearRing classes
Time for action – geometries in action
What just happened?
Have a go hero
The GeometryCollection class
The GeometryCollection methods
The Feature class
Creating a feature
The Feature class properties
Feature methods
Time for action – interacting with features
What just happened?
Summary
6. Styling Vector Layers
What are vector styles?
What is a style function?
Time for action – basic styling
What just happened?
The style class
Fill styles
Stroke styles
Have a Go Hero – fill and stroke styles
Image styles
The icon style
Time for action – using the icon style
What just happened?
The circle style
Have a go hero – using the circle style
Text styles
Multiple styles
Time for action – using multiple styles
What just happened?
Have a go hero – understanding zIndex
Style functions
Time for action – using properties to style features
What just happened?
Interactive styles
The feature overlays
Time for action – creating interactive styles
What just happened?
Summary
7. Wrapping Our Heads Around Projections
Map projections
Why on earth are projections used?
Projection characteristics
Area
Scale
Shape
Other characteristics
Have a go hero – projections' effects on scale
Types of projections
EPSG codes
Time for action – using different projection codes
What just happened?
Specifying a different projection
Latitude/longitude
Latitude
Longitude
Time for action – determining coordinates
What just happened?
OpenLayers projection class
Creating a projection object
Functions
Transforming coordinates
Time for action – coordinate transforms
What just happened?
The Proj4js library
Time for action – setting up Proj4js.org
What just happened?
Proj4js custom projections
Adding custom projections
OpenLayers 3 custom projections use cases
Time for action – reprojecting extent
What just happened ?
Using raster layers with projections
Time for action – using custom projection with WMS sources
What just happened?
Have a go hero – applying a raster projection on your own
Time for action – reprojecting geometries in vector layers
What just happened?
Pop Quiz – projections
Summary
8. Interacting with Your Map
Selecting features with OpenLayers 3
Using, creating, and converting your own data
Time for action – converting your local or national authorities data into web mapping formats
What just happened?
Have a go hero – find out more about GIS files
Diving into the OpenLayers 3 select component
Time for action – testing the use cases for ol.interaction.Select
What just happened?
Time for action – more options with ol.interaction.Select
What just happened?
Have a go hero – try to make your own example
Introducing methods to get information from your map
Getting features information from your map vector layers
Time for action – understanding the forEachFeatureAtPixel method
What just happened?
The getGetFeatureInfoUrl method – an alternative way of getting information from a map
Basics of the WMS standard
Using the getGetFeatureInfoUrl method to get information from your map
Time for action – understanding the getGetFeatureInfoUrl method
What just happened?
Adding a pop-up on your map
The ol.Overlay reference
Time for action – introducing ol.Overlay with a static example
What just happened?
Combining ol.Overlay with ol.Map features methods
Time for action – using ol.Overlay dynamically with layers information
What just happened?
Have a go hero – customizing your pop-up
Creating or updating content on your map
Drawing features on map
Time for action – using ol.interaction.Draw to share new information on the Web
What just happened?
Modifying features on the map
Time for action – using ol.interaction.Modify to update drawing
What just happened?
Understanding interactions and their architecture
The short story of interactions
Inspecting the ol.interaction.defaults function
Time for action – configuring default interactions
What just happened?
A functional view for the nine default interactions
Discovering the other interactions
ol.interaction.DragRotateAndZoom
Time for action – using ol.interaction.DragRotateAndZoom
What just happened?
ol.interaction.DragAndDrop
ol.interaction.DragBox
Time for action – making rectangle export to GeoJSON with ol.interaction.DragBox
What just happened?
Pop quiz
Summary
9. Taking Control of Controls
Introducing controls
Using controls in OpenLayers
Adding controls to your map
Time for action – starting with the default controls
What's just happened?
Controls overview
The ol.control.Control class
Control options
The ol.control.Attribution control
Attribution options
Time for action – changing the default attribution styles
What just happened?
The ol.control.Zoom control
Zoom options
The ol.control.Rotate control
Rotate options
The ol.control.FullScreen control
FullScreen options
The ol.control.MousePosition control
MousePosition options
Time for action – finding your mouse position
What just happened?
The ol.control.ScaleLine control
ScaleLine options
Have a go hero – discovering ol.control.ScaleLine specific parameters
The ol.control.ZoomSlider control
ZoomSlider options
The ol.control.ZoomToExtent control
Time for action – configuring ZoomToExtent and manipulate controls
What just happened?
ZoomToExtent options
Creating a custom control
Time for action – extending ol.control.Control to make your own control
What just happened?
Pop quiz
Summary
10. OpenLayers Goes Mobile
Touch support in OpenLayers
Using a web server
Finding your IP address on Windows
Finding your IP address on OSX
Finding your IP address on Linux
Testing your IP address
Time for action – go mobile!
What just happened?
The Geolocation class
Limitations of the Geolocation class
Using the Geolocation class
Time for action – location, location, location
What just happened?
More about iconic fonts
The Geolocation class in detail
Geolocation constructor options
Geolocation KVO properties
The DeviceOrientation class
Time for action – a sense of direction
What just happened?
DeviceOrientation constructor options
DeviceOrientation KVO property methods
Debugging mobile web applications
Debugging on iOS
What just happened?
Debugging on Android
What just happened?
Debug anywhere – WEb INspector REmote (WEINRE)
Getting started with WEINRE
Going offline
The HTML 5 ApplicationCache interface
Creating an ApplicationCache MANIFEST file
Referencing a MANIFEST file in a web page
Time for action – MANIFEST destiny
What just happened?
Going native with web applications
Time for action – track me
What just happened?
Pop quiz – who does what?
Summary
11. Creating Web Map Apps
Development strategies
Using geospatial data from Flickr
Note on APIs
Accessing the Flickr public data feeds
Specifying data
How we'll do it
Time for action – getting Flickr data
What just happened?
Have a Go Hero – accessing the Flickr API
A simple application
Time for Action – adding data to your map
What just happened?
Styling the features
Time for action – creating a style function
What just happened?
Creating a thumbnail style
Switch to JSON
Time for action – switching to JSON data
What just happened?
Time for action – creating a thumbnail style
What just happened?
Turning our example into an application
Adding interactivity
Time for action – adding the select interaction
What just happened?
Have a go hero
Time for action – handling selection events
What just happened?
Displaying photo information
Time for action – displaying photo information
What just happened?
Using real time data
Time for action – getting dynamic data
What just happened?
Wrapping up the application
The plan
Changing the URL
Time for action – adding dynamic tags to your map
What just happened?
Deploying an application
Creating custom builds
Benefits of serving small files
Two approaches to optimization
What does the compiler do?
Rewriting code
Removing unused code
Renaming objects, functions, and properties
Creating a combined build
Time for action – creating a combined build
What just happened?
Creating a separate build
Time for action – creating a separate build
What just happened?
Summary
A. Object-oriented Programming – Introduction and Concepts
What is object-oriented programming?
What is an object?
What is a class?
What is a constructor?
What is inheritance?
What is an abstract class?
What is a namespace?
What are getters and setters?
Going further
B. More details on Closure Tools and Code Optimization Techniques
The Closure Tools philosophy
Ensuring optimum performance
Introducing Closure Library, yet another JavaScript library
The basics
Time for action – first steps with Closure Library
What just happened?
Custom components
Inheritance, dependencies, and annotations
Have a go hero – analyze a real OpenLayers case
Making custom build for optimizing performance
Time for action – playing with Closure Compiler
What just happened?
Applying your knowledge to the OpenLayers case
Installing the OpenLayers development environment
Microsoft Windows (as administrator)
Linux
Installing Node.js
Microsoft Windows
Linux
Mac OSX
Installing Java
Microsoft Windows
Linux
Mac OSX
Installing Git
Microsoft Windows
Linux
Local OpenLayers development reloaded
Time for action - running official examples with the internal OpenLayers toolkit
What just happened?
OpenLayers 3 default build tool advantages
Removing the unused code feature
Making your custom build
Time for action - building your custom OpenLayers library
What just happened?
Have a go hero – applying code optimization to other OpenLayers samples
Using externs
Pop quiz– advanced mode
Syntax and styles
Time for action – using Closure Linter to fix JavaScript
Coding styles alternatives and tools
Summary
C. Squashing Bugs with Web Debuggers
Introducing Chrome Developer Tools
Getting started with Chrome Developer Tools
Time for action – opening Chrome Developer Tools
What just happened?
Explaining Chrome Developer debugging controls
Panels
The Elements panel
How it works
Time for action – using DOM manipulation with OpenStreetMap map images
What just happened?
The Network panel
The request list
Parameters
The Sources panel
Time for action – using breakpoints to explore your code
What just happened?
Time for action – playing with zoom button and map copyrights
What just happened?
The Console panel
The Resources panel
Timeline, Profiles, and the Audits panel
Panel conclusion
Using the Console panel
Time for action – executing code in the Console
What just happened?
Time for action – creating object literals
What just happened?
Object literals
Time for action – interacting with a map
What just happened?
Have a go hero – experimenting with functions
The API documentation
Improving Chrome and Developer Tools with extensions
JSONView
Dealing with color with ColorZilla
Debugging in other browsers
Debugging in Microsoft Internet Explorer
Debugging in Mozilla Firefox
Have a go hero – repeat after me
Pop quiz
Summary
D. Pop Quiz Answers
Chapter 3, Charting the Map Class
Pop quiz
Chapter 5, Using Vector Layers
Pop quiz
Chapter 7, Wrapping Our Heads Around Projections
Pop quiz
Chapter 8, Interacting with Your Map
Pop quiz
Chapter 9, Taking Control of Controls
Pop quiz
Chapter 10, OpenLayers Goes Mobile
Pop quiz
Appendix B, More details on Closure Tools and Code Optimization Techniques
Pop quiz
Appendix C, Squashing Bugs with Web Debuggers
Pop quiz
Index
Prev
Previous Chapter
Cover
Next
Next Chapter
OpenLayers 3 Beginner's Guide