Creating features programmatically

Loading data from an external source is not the only way to work with vector layers.

Imagine a web mapping application where the user can create new features on the fly: cities, rivers, areas of interest, and so on, and add them to a vector layer with some style. This scenario requires the ability to create and add the features programmatically.

In this recipe we will see some ways to create and manage features programmatically.

How to do it...

1. Start by creating a new HTML file with the required OpenLayers dependencies. Add the div element to hold the map:

   <!-- Map DOM element -->
   <div id="ch3_features_programmatically" style="width: 100%; height: 100%;"></div>

2. Next, initialize the map instance and add a base layer:

   <!-- The magic comes here -->
   <script type="text/javascript">
   
       // Create the map using the specified DOM element
       var map = new OpenLayers.Map("ch3_features_programmatically");    
       
       // Add a WMS layer
   ...