Time For Action – using the SelectFeature control

Let's put together a few things we've learned so far. We'll create some points and a polygon, place it on the map, and use the SelectFeature control to allow the user to select them. We'll register the featureselected and featureunselected events so that we can fire an event when the user interacts with a feature. When those events are fired, we'll access the feature's attributes object and display information from it. Let's do it.

1. We'll be adding a vector layer, some features, and a SelectFeature control. The file will be referred to as chapter9_selectFeature.html.

2. First, let's make vector_layer a global variable like we did earlier in this chapter. Place this outside the init function, right after var map;.

   var vector_layer;

3. Next, we'll add a <div> element that we'll output feature info to when the user clicks on a feature. Add this div after the map div:

   <div id='map_feature_log'></div>

4. Now, back to the init function code...