Line buffer example

Using OpenLayers and Clipper library to create a line buffer tool over british national grid.

by Dimitrios Sferopoulos

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src="http://jsclipper.sourceforge.net/6.1.0.1/clipper_unminified.js"></script>
<title>Buffer example</title>

</head>
<body>
	<h1 id="title">Clipper with OpenLayers Draw line buffer example</h1>
	
	<div id="map" style="width:600px;height:700px;border:1px solid black;"></div>
	</br></br>
	Buffer width (km): <input type="text" name="delta" id="delta" value="20">
	<p>
		Enter a distance in km in the textfield above and click on the map to add the points that make up your line. Double-click to finish drawing.</br>
		
		Hold down the shift key while drawing to activate freehand mode. While drawing lines in freehand mode, hold the mouse down and a point will be added with every mouse movement.
	</p>
</body>

JavaScript

/**
	 * Function that returns an offsetted (buffer) polygon by making use of the clipper library
	 * @param polys The polygons, in this case a line to be offseted
	 * @param delta The offset delta (buffer width)
	 * @returns {Array} The offseted polygon(s). If there are line intersections the resulting polygon
	 * is an array of arrays containing the outer polygon as well as the holes in it.
	 */
	function OffsetPaths (polys, delta) {
	  
	  var result = new ClipperLib.Paths();
	  
	  var joinType = ClipperLib.JoinType.jtRound;
	  var endType = ClipperLib.EndType.etRound;
	  var miterLimit = 1;  // how round should the rounded parts be? The smallest the limit the more vertices
	  var arcTolerance = 0.25;
	  
      var co = new ClipperLib.ClipperOffset(miterLimit, arcTolerance);
      co.AddPaths(polys, joinType, endType);
      co.Execute(result, delta);
      return result;
	}
	
	/**
	 * Convert an array of coordinaters to an OpenLayers.Geometry.LinearRing object
	 * @param linearRing An Array of Easting-Northing objects
	 * @returns {OpenLayers.Geometry.LinearRing}
	 */
	function convertToLinearRing (linearRing) {
		var i;
		var points = [];
		
		for (i = 0; i < linearRing.length; i++) {
			var coordinate = linearRing[i];
			var lon = coordinate.X;
			var lat = coordinate.Y;
			points.push(new OpenLayers.Geometry.Point(lon, lat));
		}
		return new OpenLayers.Geometry.LinearRing(points);
	}
  
  	/**
	 * Convert an array o polygons to OpenLayers.Geometry.Polygon
	 * @param polygon An array of arrays containing the polygons in the form of easting-northing objects
	 * @returns {OpenLayers.Geometry.Polygon}
	 */
	function convertToPolygon(polygon){
		var rings = [];
		
		// add holes. Holes start at array element [1]
		for (var i = 0; i < polygon.length; i++) {
			var ring = polygon[i];
			rings.push(convertToLinearRing(ring));
		}
		
		return new OpenLayers.Geometry.Polygon(rings);
	}
	
  /******************************
  ********	Create the map ******
 ...