You are previewing OpenLayers 3 : Beginner's Guide.
O'Reilly logo
OpenLayers 3 : Beginner's Guide

Book Description

Get started with OpenLayers 3 and enhance your web pages by creating and displaying dynamic maps

In Detail

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.

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.

What You Will Learn

  • Build a complete, real-world OpenLayers application optimized for production use

  • Work with different raster data sources to create a base map

  • Overlay vector data sources and work with vector features directly

  • Customize the appearance of vector layers

  • Understand the concept of map projections and how to use them

  • Manage and work with interactions such as click and touch

  • Work with controls to enhance the user experience

  • Target mobile platforms and explore challenges presented by mobile development

  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

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