OpenLayers: Overview of Vector Layer

OpenLayers 2.10 Beginner’s Guide

Create, optimize, and deploy stunning cross-browser web maps with the OpenLayers JavaScript web mapping library

What is the Vector Layer?

OpenLayers’ Vector Class is generally used to display data on top of a map and allow real time interaction with the data. What does this mean? Basically, it means we can load in data from geospatial files, such as KML or GeoJSON files, and display the contents on a map, styling the data however we see fit. For example, take a look at this map:

This shows a map with a Google layer as underlying base layer and a vector layer on top of it. The data (all the circles with numbers in them) are loaded in from a GeoJSON file, an open file format that many other applications support. In the vector layer, there are a bunch of data points throughout the map. Each dot on the map is an object in the vector layer, and these objects are referred to as Features.

In this case, each feature is actually a cluster of data points—the numbers in each circle represent how many points belong to that cluster. This clustering behavior is something we can use out of the box with OpenLayers via the Strategy class. Before we get to that point, let’s talk about one of the main things that separate a vector layer from other layers.

What makes the Vector Layer special?

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 the value of it, who owns it, its square footage, etc. It’s easy to put a vector layer on top of your existing raster layers and create features in a specific location.

The Vector Layer is client side

Another fundamental difference is that the vector layer is, generally, used as a client side layer. This means that, usually, interaction with the actual vector data happens only on the client side. When you navigate around the map, for instance, the vector layer does not send a request to a server to get more information about the layer. Once you get the initial data, it’s in your browser and you do not have to request the same data again.

Since, in most cases, the vector data is loaded on the client side, interaction with the vector layer usually happens nearly instantaneously. However, there are some limitations. The vector layer is dependent on the user’s browser and computer. While most browsers other than Internet Explorer have been progressing exceptionally well and are becoming more powerful each day, limitations do exist.

Due to browser limitations, too many features in a vector layer will start to slow things down. There is no hard number on the amount of features, but generally anything over a couple hundred of features will start to slow things down on most computers. However, there are many ways around this, such as deleting features when you don’t need them, and we’ll talk about performance issues in more depth later.

Other uses

With the vector layer, we can display any type of geometrical object we’d like—points, lines, polygons, squares, makers…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.

What is a ‘Vector’?

In terms of graphics, there are essentially two types of images: raster and vector. Most images you see are raster images—meaning, basically, they are comprised of a grid of pixels and their quality degrades as you zoom in on them. A photograph, for example, would be a raster image. If you enlarge it, it tends to get blurry or stretched out. The majority of image files—.jpegs, .png, .gifs, any bitmap image—are raster images.

A vector, on the other hand, uses geometrical shapes based on math equations to form an image. Meaning that when you zoom in, the quality is preserved. If you were to zoom in on a vector image of a circle, the lines would always appear curved—with raster image, the lines would appear straight, as raster images are made up of a grid of colors. Vector graphics are not constrained to a grid, so they preserve shape at all scales.

Time for Action – creating a Vector Layer

Let’s begin by creating a basic vector layer. In this example, after you add some points and other feature types to your vector layer, try to zoom in. You’ll notice that the points you added don’t lose quality as you zoom in. We’ll go over how it works afterwards.

1. We’ll start off by using a basic WMS layer:

   var wms_layer = new OpenLayers.Layer.WMS(
   ‘OpenLayers WMS’,
   ‘http://vmap0.tiles.osgeo.org/wms/vmap0’,
   {layers: ‘basic’},
   {}
   );

2. Now, let’s create the vector layer itself. We’ll use the default projection and default values for the vector layer, so to create the layer all we need to do is create it:

   var vector_layer = new OpenLayers.Layer.Vector(‘Basic Vector
   Layer’)

3. Add the layers to the map now:

   map.addLayers([wms_layer, vector_layer]);

4. If we looked at the map now, we would just see a simple map—our vector layer does not have any data loaded into it, nor do we have any controls to let us add vector data.
5. Let’s add the EditingToolbar control to the map, which allows us to add points and draw polygons on a vector layer. To do so, we just need to instantiate an object from OpenLayers.Control.EditingToolbar and pass in a vector layer. We’ll pass in the vector_layer object we previously created:

   map.addControl(new OpenLayers.Control.EditingToolbar(vector_
   layer));

6. Take a look at the map now. You should see the EditingToolbar control (which is basically a panel control with control buttons). Selecting different controls will allow you to place vector objects (called features) on the vector layer. Play around with the EditingToolbar control and place a few different points / polygons on the map:

   

7. Now, one more step. You’ve placed some features (points / polygons / lines / etc.) on the map, but if you were to refresh the page they would disappear. We can, however, get the information about those features and then export it to a geospatial file. We’ll work with files later, but for now let’s grab the information about the features we’ve created. To access the information about the vector layer’s features, all we need to do is access its features array. In Firebug, type and run the following:

   map.layers[1].features

8. You should see a bunch of objects listed, each object is a feature you placed on the map:

   [Object { layer=Object, more…}, Object { layer=Object,
   more…},
   Object { layer=Object, more…}, …]

9. Now, if you expand one of those objects, you’ll get the information about a feature. The geometry property is an anonymous object each feature has which contains geometry information. You can also see the methods of the feature objects—try playing around with different functions. You can access the individual features by using map.layers[1].features[x], where x is the index of the feature in the features array. For instance, to destroy the first feature which we added to the map we could use:

   map.layers[1].features[0].destroy();

What Just Happened?

We just demonstrated how to create a basic vector layer and added features to it using the EditingToolbar control. Using the features array of the vector layer, we also destroyed some features. As you’ve just seen, it’s not terribly difficult to start using the vector layer— pretty easy, in fact.