Having explored raster layers, it's time to explore the other layer type that OpenLayers supports—vector layers. In this chapter, we'll introduce the vector layer and discover how to display and interact with vector data on the fly. We'll see how we can use vector sources to load vector data in a variety of formats. Through several hands-on examples, we'll explore the Format, Feature, and Geometry classes that are the foundation of OpenLayers 3 vector support.
In this chapter, we will cover using the vector layer class, ol.layer.vector, and some related classes to display vector data. Specifically, we'll:
In OpenLayers, the vector layer is used to display vector data on top of a map and allow real-time interaction with the data. What does this mean? Basically, it means we can load raw geographic data from a variety of sources, including geospatial file formats such as KML and GeoJSON, and display that data on a map, styling the data however we see fit. For example, take a look at the map that follows:

It shows a map with a Bing satellite raster layer and a vector layer on top of it. The vector layer loads data using the OSM XML Vector source and draws it in real time with different styles based on the type and attribute of each feature (the individual points, lines, and polygons). In this example, a small subset of the OSM data has been requested and is styled by OpenLayers to highlight roads (white lines), parking lots (gray polygons), buildings (red polygons), green space (in green, of course) and the location of trees (the green dots). We'll cover vector styles in detail in Chapter 6, Styling Vector Layers.
With a raster image, what you see is what you get. If you were to look at some close up satellite imagery on your map and see a bunch of buildings clustered together, you wouldn't necessarily know any additional information about those buildings. You might not even know they are buildings. Since raster layers are made up of images, it is up to the user to interpret what they see. This isn't necessarily a bad thing, but vector layers provide much more.
With a vector layer, you can show the actual geometry of the building and attach additional information to it—such as its address, who owns it, its square footage, and so on. As we'll see later in this chapter, it's easy to put a vector layer on top of your existing raster layers and create features in a specific location. We'll also see how we can get additional information about features just by clicking or hovering our mouse over them.
We can display any type of geometric shape with the vector layer—points, lines, polygons, squares, markers, any shape you can imagine. We can use the vector layer to draw lines or polygons and then calculate the distance between them. We can draw shapes and then export the data using a variety of formats, then import that data in other programs, such as Google Earth. These are just a few basic cases though, and throughout this chapter, you'll see how powerful the vector layer can be.
Another fundamental difference is that the vector layer is a client side layer. This means that interaction with the actual vector data happens on the client side. When you display vector data, for instance, its visual representation is generated by OpenLayers in response to the rules you define in your code. Raster data looks the way it looks and you can't easily change the color of roads or decide not to display buildings. When you navigate your map, vector data is generally already available and can be displayed immediately. With raster layers, each time you zoom in or out, OpenLayers has to request more image tiles from the server and wait for them to arrive unless they are already in the browser cache.
Since, in most cases, the vector data is loaded on the client side, presentation of and interaction with the vector layer usually happens nearly instantaneously. However, there are some practical limitations. Most vector sources make a lot more data available than can be loaded and rendered in the browser. Network bandwidth, memory and processor speed all have limits and, although computers and web browsers are getting faster and more powerful all the time, there are always practical boundaries to what can be done with vector data. The OpenLayers developers have worked hard to push these boundaries and many things that were impossible to consider even two years ago are now practical—we'll highlight some best practices along the way.
In computer graphics, there are essentially two types of data: raster and vector. The majority of image files—.jpeg, .png, .gif, and other bitmap image formats—are raster images. A photograph, for example, is a raster image. A raster image is a rectangular grid—like graph paper—of color information, and each color point in an image is called a pixel. When you look at a raster image on your computer, it interprets the color information in each pixel and maps this to physical pixels on your screen. As you zoom in on a raster image, there is a point at which each pixel in the raster image can be rendered to a single physical pixel on your screen. This is referred to as the resolution of the image, the most information that the image can accurately represent. As you zoom in further, each pixel in the raster image is drawn into more than one physical pixel and the quality of the image starts to degrade—we say it is pixelated. When you zoom out, each pixel in the raster image requires only part of a physical pixel on the screen and so several adjacent raster pixels are combined to compute a color to display in the physical pixel.
A vector, on the other hand, encodes information about how to draw a particular shape. There might be many ways of representing vector shapes—a straight line can be represented as a starting point and an ending point, or a starting point, direction and distance. When you display a vector on a computer screen, it has to be converted from its encoded format into colors for physical pixels—a process called rasterization. However, because the computer has detailed instructions on how to draw the shape, it can choose a resolution that exactly matches the physical pixels of your computer display every single time it draws it, regardless of how much you zoom in or out. In fact, the same vector information can be drawn on any other screen at the appropriate resolution. For this reason, we often call vector data resolution independent.
Here is an example of how a circle appears when drawn as a vector and a raster. The left side is rendered as a vector and the right side is rendered as a raster. When the image is zoomed, the vector remains sharp and clear but the raster becomes blocky.
