Creating Polyline Buffer in OpenLayers 2?

I was wondering if there was a way to create a buffer around a polyline feature in OpenLayers 2. I have created a tool that allows the user to draw a circle buffer zone of whatever size and style they want around a single point (using this handy walkthough ), but was just wondering if I could do the same with Polylines. The user would define the size of their buffer zone and then draw their polyline on to the map. Once finished drawing the buffer would be added to the map, like the example I made in MapInfo below.

Answer

There are 2 ways you could approach this; server side or client side. The approach you take will depend on whether you want the processing overhead on the client or on the server (or even if you have access to a backend server like GeoServer).

Method 1: Client Side

There is a pure JavaScript port of the Java Topology Suite called JSTS which contains (amongst many other things) a buffer operation. There is an example of doing a buffer operation with OpenLayers which you could adapt to your own needs.

Method 2: Server Side

If you have access to GeoServer then you can achieve what you need through the WPS extension of GeoServer (Web Processing Service).

The default installation of GeoServer's WPS extension contains a number of different processes that can be run including several for buffering:

• JTS:buffer


• gs:PointBuffers


• gt:BufferFeatureCollection


• gt:FeatureBuffer


• gt:buffer

In my opinion the JTS:buffer process is most like what you have mocked up using MapInfo. The JTS:buffer process takes the following parameters:

• Input Geometry: In a range of formats such as WKT, GML


• Distance: Specified in the same units as the geometry


• Quadrant Segments: Effectively the quality of the generated buffer

The output from the process is the generated buffer geometry and that can be requested in a number of formats, all of which can be read by OpenLayers. So, the process I would follow is:

1. Capture polyline from user input (as WKT or GML)


2. Capture buffer distance from user input


3. Generate WPS request XML


4. POST request XML to GeoServer



5. Read response from GeoServer


6. Add feature to map and do any other processing

An example XML request could be:

  JTS:buffer
  
    
      geom

      
        
      
    
    
      distance
      
        50
      
    

    
      quadrantSegments
      
        50
      
    
    
      capStyle
      
        flat

      
    
  
  
    
      result
    
  

The result from this request would be a WKT encoding of a polygon that is the 50m buffer of the input polyline.

Note that this approach will work with any backend map server that supports the OGC WPS specification.