Before getting started

Before moving on and customizing the default appearance, we should talk about its rendering process. OpenLayers 3 is a canvas-based web mapping library, which means that it draws everything it can on a single canvas element. This not only makes the rendering process faster, but also prevents direct styling with CSS. However, there are some parts rendered as pure DOM elements. These parts, specifically the controls, overlays, and drag boxes, can be styled directly. For the other parts, like vector data, the capabilities of the canvas element can be used for styling, mostly with inner methods. We will discuss rendering in a later chapter in more detail. For now, keeping this nature of the library in mind should be enough.

Tip

Using the DOM renderer opens up new possibilities in CSS styling. However, it cannot render vector data in SVG format; therefore, you can only style image layers directly. The library also loses performance; thus, using the DOM renderer should be considered as a generally bad practice. Renderers in OpenLayers 3 will be discussed in more detail in Chapter 7, Mastering the Renderers.

Basic considerations

From now on, step by step, we will make a simple WebGIS application with OpenLayers 3. In most of the chapters, we will extend the code created in the previous one. To make it clear, we will consider the current goal at the beginning of every chapter.

In this chapter, after a few warm-up examples, we will make the layout of our application. We will make a highly adaptable full-screen application; therefore, we will use relative units whenever it is possible. We will also make sure that our design does not prevent the usage of the default one. For now, the application will have three parts. The map canvas will display the map, the toolbar will contain the control buttons (the tools), and the notification bar will inform the user about the state of our application in various ways.