OpenLayers comes with a great set of format classes, which are used to read/write from/to different file data formats. GeoJSON, GML, or GPX are some of the many formats we can find.
If you have read the Adding a GML layer recipe in this chapter, you will know that a vector class can read the features stored in a file, specify the format of the data source, and place the contained features in the map.
This recipe wants to show us exactly that. We will see the magic step responsible to read data from a file using a format class, and transform it to the corresponding feature ready to be placed in the layer.
Note
For simplicity, we will only see how to read features from the WKT text. You can learn more about WKT (Well-Known Text) format from http://en.wikipedia.org/wiki/Well-known_text.
As can be seen in the previous screenshot, we are going to create a map on the left side, and on the right we will place a couple of text area components to add and get features in the WKT format.
- Create a new HTML file with OpenLayers dependencies. Then, add the following HTML code or the map, text area, and buttons:
<!-- Map DOM element --> <table style="width: 100%; height: 95%;"> <tr> <td> <div id="ch3_reading_wkt" style="width: 100%; height: 100%;"></div> </td> <td style="width: 30%; vertical-align: top;"> <p>Write the WKT describing features:</p> <textarea id="wktText" dojoType="dijit.form.SimpleTextarea" rows="10" style="width: 100%;">MULTIPOLYGON (((40 40, 20 45, 45 30, 40 40)),((20 35, 45 20, 30 5, 10 10, 10 30, 20 35),(30 20, 20 25, 20 15, 30 20)))</textarea> <button dojoType="dijit.form.Button" onClick="addFeature">Add Feature</button> <button dojoType="dijit.form.Button" onClick="clearLayer">Clear Layer</button> </td> </tr> </table>Note
Remember, we are using Dojo toolkit framework (http://dojotoolkit.org) to improve our components, so some elements will have attributes like
dojoType="dijit.form.Button". - Now, we will initialize the map component and place 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_reading_wkt"); // Add a WMS layer var wms = new OpenLayers.Layer.WMS("Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }); map.addLayer(wms); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.setCenter(new OpenLayers.LonLat(0,0), 2); - Let's go on to create a vector layer to hold the features we will read from the WKT:
// Create some empty vector layers var wktLayer = new OpenLayers.Layer.Vector("wktLayer"); // Add layers to the map map.addLayer(wktLayer); - We need a couple of functions to handle the button events. The first function is responsible to clean the vector layer:
function clearLayer() { wktLayer.removeAllFeatures(); } - The second function reads the data from the WKT string and places the features on the vector layer:
function addFeature() { // Read features and add to the vector layer var text = dijit.byId('wktText').get('value'), var wkt = new OpenLayers.Format.WKT(); var features = wkt.read(text); wktLayer.addFeatures(features); // Dump the vector layer features to WKt format var currentWkt = wkt.write(wktLayer.features); dijit.byId('wktFeatures').set('value', currentWkt); } </script>
All the format classes are inherited from the OpenLayers.Format base class, which defines the basic behavior of the format classes, that is, have a read and a write method.
The read() method is supposed to read data in some format (a JSON string, a WKT string, and so on) and return an array of features as instances of the OpenLayers.Feature.Vector class.
The write() method, on the other hand, receives an array of features and returns a string that represents the desired format.
To read the features from a WKT string, we only need to instantiate the desired format class and call its read method by passing a valid string as the argument:
var wkt = new OpenLayers.Format.WKT();
var features = wkt.read(text);
wktLayer.addFeatures(features);Then, we get the current features of the vector layer and convert them to a WKT representation by passing them to the write method:
// Dump the vector layer features to WKt format
var currentWkt = wkt.write(wktLayer.features);
dijit.byId('wktFeatures').set('value', currentWkt);