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...