We just created a vector layer that reads features from a remote WFS server as the map is panned and zoomed. A lot just happened, so let's review each step in detail.

In step 1, we set up a new OpenLayers application using the same structure as we've used for all the other examples so far. Nothing new here, except we've chosen a center for the map view somewhere in the north eastern United States and named our base layer tiledRaster to help differentiate it from the vector layers we will be working with.

In step 2, we created a simple vector style object to use with all our vector layers. A vector style consists of several components, in this case, we are defining the style to use for fill (polygons), stroke (lines), and image (points). The color for each is defined using the rgba() syntax, which stands for red, green, blue, and alpha (opacity). In this case, we are using a simple black color and 20 percent opacity. We'll cover styles in much more detail in the next chapter.

Step 4 is really the heart of this example. First, we defined a vectorLoader function. This function is used by ol.source.ServerVector to fetch features from a remote server. The vectorLoader function declares a URL that points to a WFS server. You might think the URL looks a bit complicated, and you are right. For now, just trust that it does the right thing, which is to ask the server for all the vector features contained within the current extent. The jQuery ajax function is used to actually trigger loading the URL. The jsonp data type tells jQuery to request the data by inserting it as a <script> tag, and the callback option in the URL identifies the function that will be executed when the <script> tag is loaded; in this case, the loadFeatures function.

The loadFeatures function takes the features provided by the server, reads them using the vector source (which has a GeoJSON format for parsing the data), and adds them to the layer.

In step 5, we combined all the previous pieces to create the source and layer objects. To define the source, we used ol.source.ServerVector and provided it with a format (GeoJSON in this case), the loader function we defined in the previous step, a loading strategy, and a projection. We'll discuss the loading strategy a bit later. Finally, we created the actual layer object using ol.layer.vector and provide it with our source and style.

After we added this to the map's layers in step 5, we can see it in action. Every time the map is panned or zoomed, the vector layer checks its source for features. The ServerVector source requests data from a remote server using a function that we provide. This gives you a lot of flexibility, but also means that you have to understand how to load data from a remote server. Fortunately, libraries such as jQuery have very good convenience methods for doing just this. The ServerVector source uses its loading strategy to decide how to divide up the requests to the server and passes the appropriate parameters to your loader function. We'll talk a bit more about loading strategies in some time. Once the features are loaded, you can parse them and add them to the source directly. The vector layer then draws the features using the provided style.

To see what happens when features are requested from the server, open Web Inspector, switch to the Network tab, and make sure All is selected, then reload the page.

You can identify the feature requests because they start with wfs?service=WFS. Click on a request to view its response. Notice how some requests have no features, and some have features. Notice how the response is formatted—it looks like a JavaScript function call to loadFeatures() with an object literal as the argument. The loadFeatures() function is the one we specified and that we implemented. This is an example of how jsonp works.

Now that we've seen it in action, let's review the constructor options for a ServerVector source: