Make the vector-labels example even uglier

This example is a candidate for removal and replacement with rendering
tests.

examples/vector-labels.html

@@ -80,6 +80,25 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="normal" selected="selected">Normal</option>
     </select>
     <br />
+    <label>Placement: </label>
+    <select disabled id="points-placement">
+      <option value="line">Line</option>
+      <option value="point" selected="selected">Point</option>
+    </select>
+    <br />
+    <label>Max Angle: </label>
+    <select disabled id="points-maxangle">
+      <option value="0.7853981633974483" selected="selected">45°</option>
+      <option value="2.0943951023931953">120°</option>
+      <option value="6.283185307179586">360°</option>
+    </select>
+    <br />
+    <label>Exceed Len: </label>
+    <select disabled id="points-exceedlength">
+      <option value="true">True</option>
+      <option value="false" selected="selected">False</option>
+    </select>
+    <br />
     <label>Size: </label>
     <input type="text" value="12px" id="points-size" />
     <br />
@@ -131,7 +150,8 @@ tags: "geojson, vector, openstreetmap, label"
     <br />
     <label>Align: </label>
     <select id="lines-align">
-      <option value="center" selected="selected">Center</option>
+      <option value="" selected="selected"></option>
+      <option value="center">Center</option>
       <option value="end">End</option>
       <option value="left">Left</option>
       <option value="right">Right</option>
@@ -169,6 +189,25 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="normal">Normal</option>
     </select>
     <br />
+    <label>Placement: </label>
+    <select id="lines-placement">
+      <option value="line">Line</option>
+      <option value="point" selected="selected">Point</option>
+    </select>
+    <br />
+    <label>Max Angle: </label>
+    <select id="lines-maxangle">
+      <option value="0.7853981633974483" selected="selected">45°</option>
+      <option value="2.0943951023931953">120°</option>
+      <option value="6.283185307179586">360°</option>
+    </select>
+    <br />
+    <label>Exceed Len: </label>
+    <select id="lines-exceedlength">
+      <option value="true">True</option>
+      <option value="false" selected="selected">False</option>
+    </select>
+    <br />
     <label>Size: </label>
     <input type="text" value="12px" id="lines-size" />
     <br />
@@ -220,7 +259,8 @@ tags: "geojson, vector, openstreetmap, label"
     <br />
     <label>Align: </label>
     <select id="polygons-align">
-      <option value="center" selected="selected">Center</option>
+      <option value="" selected="selected"></option>
+      <option value="center">Center</option>
       <option value="end">End</option>
       <option value="left">Left</option>
       <option value="right">Right</option>
@@ -258,6 +298,25 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="normal">Normal</option>
     </select>
     <br />
+    <label>Placement: </label>
+    <select id="polygons-placement">
+      <option value="line">Line</option>
+      <option value="point" selected="selected">Point</option>
+    </select>
+    <br />
+    <label>Max Angle: </label>
+    <select id="polygons-maxangle">
+      <option value="0.7853981633974483" selected="selected">45°</option>
+      <option value="2.0943951023931953">120°</option>
+      <option value="6.283185307179586">360°</option>
+    </select>
+    <br />
+    <label>Exceed Len: </label>
+    <select id="polygons-exceedlength">
+      <option value="true">True</option>
+      <option value="false" selected="selected">False</option>
+    </select>
+    <br />
     <label>Size: </label>
     <input type="text" value="10px" id="polygons-size" />
     <br />

examples/vector-labels.js

@@ -35,6 +35,9 @@ var myDom = {
     rotation: document.getElementById('lines-rotation'),
     font: document.getElementById('lines-font'),
     weight: document.getElementById('lines-weight'),
+    placement: document.getElementById('lines-placement'),
+    maxangle: document.getElementById('lines-maxangle'),
+    exceedlength: document.getElementById('lines-exceedlength'),
     size: document.getElementById('lines-size'),
     offsetX: document.getElementById('lines-offset-x'),
     offsetY: document.getElementById('lines-offset-y'),
@@ -50,6 +53,9 @@ var myDom = {
     rotation: document.getElementById('polygons-rotation'),
     font: document.getElementById('polygons-font'),
     weight: document.getElementById('polygons-weight'),
+    placement: document.getElementById('polygons-placement'),
+    maxangle: document.getElementById('polygons-maxangle'),
+    exceedlength: document.getElementById('polygons-exceedlength'),
     size: document.getElementById('polygons-size'),
     offsetX: document.getElementById('polygons-offset-x'),
     offsetY: document.getElementById('polygons-offset-y'),
@@ -86,6 +92,9 @@ var createTextStyle = function(feature, resolution, dom) {
   var offsetX = parseInt(dom.offsetX.value, 10);
   var offsetY = parseInt(dom.offsetY.value, 10);
   var weight = dom.weight.value;
+  var placement = dom.placement ? dom.placement.value : undefined;
+  var maxAngle = dom.maxangle ? parseFloat(dom.maxangle.value) : undefined;
+  var exceedLength = dom.exceedlength ? (dom.exceedlength.value == 'true') : undefined;
   var rotation = parseFloat(dom.rotation.value);
   var font = weight + ' ' + size + ' ' + dom.font.value;
   var fillColor = dom.color.value;
@@ -93,7 +102,7 @@ var createTextStyle = function(feature, resolution, dom) {
   var outlineWidth = parseInt(dom.outlineWidth.value, 10);
 
   return new ol.style.Text({
-    textAlign: align,
+    textAlign: align == '' ? undefined : align,
     textBaseline: baseline,
     font: font,
     text: getText(feature, resolution, dom),
@@ -101,6 +110,9 @@ var createTextStyle = function(feature, resolution, dom) {
     stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
     offsetX: offsetX,
     offsetY: offsetY,
+    placement: placement,
+    maxAngle: maxAngle,
+    exceedLength: exceedLength,
     rotation: rotation
   });
 };