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>
Table of Contents (22 chapters)
OpenLayers 3 Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Connecting to Google, Bing Maps, and other mapping APIs


The Google, Yahoo!, Bing, and ESRI's Mapping APIs allow you to connect with their map server backend. Their APIs also usually provide a client-side interface.

The Google Maps API, for instance, is fairly powerful. You have the ability to add markers, plot routes, and use KML data (things you can also do in OpenLayers)—but the main drawback is that your mapping application relies totally on Google. The map client and map server are provided by a third party. This is not inherently a bad thing, and for many projects, Google Maps and the others like it, are a good fit.

However, there are quite a few drawbacks such as:

  • You're not in control of the backend

  • You can't really customize the map server backend, and it can change any time

  • There may be commercial restrictions, or some costs involved for consuming maps images or other services such as geocoding or routing for car traffic

  • These other APIs also cannot provide you with anything near the amount of flexibility and customization that an open source mapping application framework (that is, OpenLayers) offers

    Note

    Although we mentioned Google Maps API as one of the main maps, its support in OpenLayers is limited. As there are more tiles providers nowadays, it's not worth it to have code maintenance to support Google Maps API, a third party code that can break the main library, as sometimes happened earlier with the OpenLayers 2 API.

Layers in OpenLayers

So, what's with the layers in OpenLayers? Well, OpenLayers allows you to have multiple different backend servers that your map can use. To access a web map server, you declare a layer and add it to your map with OpenLayers.

For instance, if you wanted to have a Bing Maps and an OpenStreetMap service displayed on your map, you would use OpenLayers to create a layer referencing Bing Maps and another one for OpenStreetMap, and then add them to your OpenLayers map. We'll soon see an example with an OpenStreetMap layer, so don't worry if you're a little confused.

Understanding a layer

Like layers of an onion, each layer is above and will cover up the previous one; the order that you add in the layers is important. With OpenLayers, you can arbitrarily set the overall transparency of any layer, so you are easily able to control how many layers cover each other up, and dynamically change the layer order at any time.

Most of the time, you make a distinction between base layers and non-base layers. Base layers are layers below the others and are used as a background on your maps to give general context. When you choose one base layer, the others will not be shown. On the top of base layers, you have non-base layers used to emphasize particular topics. You can also choose to use only overlay layers if you're considering that they are enough to understand the map. As a classical example, you could have a Bing map as your base layer, a layer with satellite imagery that is semi-transparent, and a vector layer, all active on your map at once. A vector layer is a powerful layer that allows for the addition of markers and various geometric objects to our maps—we'll cover it in Chapter 5, Using Vector Layers. Thus, in this example, your map would have three separate layers. We'll study in detail about layers and how to use and combine them in Chapter 4, Interacting with Raster Data Source.

Note

At the code level, the distinction between base and non-base layers can be misleading. It does not exist in OpenLayers 3, whereas it was in OpenLayers 2 series. However, the concept remains interesting to conceive your maps.

The OpenLayers website

The website for OpenLayers 3 is located at http://openlayers.org. Have a look at the following screenshot:

To begin, you need to download a copy of OpenLayers (or we can directly link to the library—but we'll download a local copy). You can download the compressed library as a .zip by clicking on the green button at the bottom of the release page at https://github.com/openlayers/ol3/releases/tag/v3.0.0.

We will cover the website links by following the different areas of the main web page. Let's start with the navigation bar located at the top right area:

  • First link, Learn refers to the documentation for the OpenLayers library.

  • Examples points to the list of the latest examples available for the current development library. At the time of writing, you can see 95 of them. You can filter the list of examples with keywords to find your way.

  • API redirects to the API documentation. It documents the API where you can find the syntax, methods, and properties for all the core library components. Without it, it would be impossible to find your way within the library.

  • Last link, Code is simply the link to the Github library account located at http://github.com/openlayers/ol3, for people who want to contribute or learn more about the core library code.

  • In the central area, the main content is divided from top to bottom in four parts:

  • The first block LATEST speaks for itself. It's the latest news about the project.

  • The FEATURES part is a good reminder and teaser about what you can do with the OpenLayers library.

  • The LEARN MORE part is one of the most important parts of the web page:

    • With Quick Start, you can learn a simple way to make your first map.

    • The Download section is the place to find all release codes hosted at GitHub. You can also find the releases notes — the list of evolution and fixes to the library core code.

    • The Tutorials section is the entry to learn more after the Quick Start. At the time of writing, it's nearly empty. It should grow following the library adoption curve.

    • The API Docs section is one of the keys of OpenLayers. It documents the API where you can find the syntax, methods, and properties for all the core library components. Without it, it would be impossible to find your way within the library.

  • GET INVOLVED, the last block, is also important when you want to find help or make a contribution:

    • Fork the repo sends you to the URL of the official development repository on Github.

    • Open a ticket is the place where you can create a ticket. You can do it to describe an unexpected behavior when using the library, or if you want to ask for a new feature in the library, or if you are an advanced user or a developer and wish to submit code or give your opinion on an existing ticket.

    • The last topic Join the discussion links to the official OpenLayers 3 mailing list.

      Tip

      Be aware that currently both versions of OpenLayers exist