Merge pull request #1852 from adube/example-vector-labels

Add rotation, offsetX and offsetY to vector-labels example

examples/vector-labels.html

@@ -115,6 +115,13 @@
             <option value="top">Top</option>
           </select>
           <br />
+          <label>Rotation: </label>
+          <select id="points-rotation">
+            <option value="0">0°</option>
+            <option value="0.785398164">45°</option>
+            <option value="1.570796327">90°</option>
+          </select>
+          <br />
           <label>Font: </label>
           <select id="points-font">
             <option value="Arial" selected="selected">Arial</option>
@@ -132,6 +139,12 @@
           <label>Size: </label>
           <input type="text" value="12px" id="points-size" />
           <br />
+          <label>Offset X:</label>
+          <input type="text" value="0" id="points-offset-x" />
+          <br />
+          <label>Offset Y:</label>
+          <input type="text" value="0" id="points-offset-y" />
+          <br />
           <label>Color :</label>
           <input type="text" value="#aa3300" id="points-color" />
           <br />
@@ -191,6 +204,13 @@
             <option value="top">Top</option>
           </select>
           <br />
+          <label>Rotation: </label>
+          <select id="lines-rotation">
+            <option value="0">0°</option>
+            <option value="0.785398164">45°</option>
+            <option value="1.570796327">90°</option>
+          </select>
+          <br />
           <label>Font: </label>
           <select id="lines-font">
             <option value="Arial">Arial</option>
@@ -208,6 +228,12 @@
           <label>Size: </label>
           <input type="text" value="12px" id="lines-size" />
           <br />
+          <label>Offset X:</label>
+          <input type="text" value="0" id="lines-offset-x" />
+          <br />
+          <label>Offset Y:</label>
+          <input type="text" value="0" id="lines-offset-y" />
+          <br />
           <label>Color :</label>
           <input type="text" value="green" id="lines-color" />
           <br />
@@ -267,6 +293,13 @@
             <option value="top">Top</option>
           </select>
           <br />
+          <label>Rotation: </label>
+          <select id="polygons-rotation">
+            <option value="0">0°</option>
+            <option value="0.785398164">45°</option>
+            <option value="1.570796327">90°</option>
+          </select>
+          <br />
           <label>Font: </label>
           <select id="polygons-font">
             <option value="Arial">Arial</option>
@@ -284,6 +317,12 @@
           <label>Size: </label>
           <input type="text" value="10px" id="polygons-size" />
           <br />
+          <label>Offset X:</label>
+          <input type="text" value="0" id="polygons-offset-x" />
+          <br />
+          <label>Offset Y:</label>
+          <input type="text" value="0" id="polygons-offset-y" />
+          <br />
           <label>Color :</label>
           <input type="text" value="blue" id="polygons-color" />
           <br />
@@ -304,7 +343,7 @@
           <p id="shortdesc">Example of GeoJSON features with labels.</p>
           <div id="docs">
             <p>See the <a href="vector-labels.js" target="_blank">vector-labels.js source</a> to see how this is done.</p>
-            <p><strong>Note:</strong> The 'Text/Wrap' option is currently not working properly.  It's supposed to add '\n' to allow multiline labels, but spaces are currently shown instead.</p>
+            <p><strong>Note:</strong> The 'Text/Wrap' option is currently not working properly.  This is because ol3 uses Canvas's strokeText and fillText functions that do not support text wrapping.</p>
           </div>
           <div id="tags">geojson, vector, openstreetmap, label</div>
         </div>

examples/vector-labels.js

@@ -17,9 +17,12 @@ var myDom = {
     'text': document.getElementById('points-text'),
     'align': document.getElementById('points-align'),
     'baseline': document.getElementById('points-baseline'),
+    'rotation': document.getElementById('points-rotation'),
     'font': document.getElementById('points-font'),
     'weight': document.getElementById('points-weight'),
     'size': document.getElementById('points-size'),
+    'offset-x': document.getElementById('points-offset-x'),
+    'offset-y': document.getElementById('points-offset-y'),
     'color': document.getElementById('points-color'),
     'outline': document.getElementById('points-outline'),
     'outline-width': document.getElementById('points-outline-width'),
@@ -29,9 +32,12 @@ var myDom = {
     'text': document.getElementById('lines-text'),
     'align': document.getElementById('lines-align'),
     'baseline': document.getElementById('lines-baseline'),
+    'rotation': document.getElementById('lines-rotation'),
     'font': document.getElementById('lines-font'),
     'weight': document.getElementById('lines-weight'),
     'size': document.getElementById('lines-size'),
+    'offset-x': document.getElementById('lines-offset-x'),
+    'offset-y': document.getElementById('lines-offset-y'),
     'color': document.getElementById('lines-color'),
     'outline': document.getElementById('lines-outline'),
     'outline-width': document.getElementById('lines-outline-width'),
@@ -41,9 +47,12 @@ var myDom = {
     'text': document.getElementById('polygons-text'),
     'align': document.getElementById('polygons-align'),
     'baseline': document.getElementById('polygons-baseline'),
+    'rotation': document.getElementById('polygons-rotation'),
     'font': document.getElementById('polygons-font'),
     'weight': document.getElementById('polygons-weight'),
     'size': document.getElementById('polygons-size'),
+    'offset-x': document.getElementById('polygons-offset-x'),
+    'offset-y': document.getElementById('polygons-offset-y'),
     'color': document.getElementById('polygons-color'),
     'outline': document.getElementById('polygons-outline'),
     'outline-width': document.getElementById('polygons-outline-width'),
@@ -74,7 +83,10 @@ var createTextStyle = function(feature, resolution, dom) {
   var align = dom['align'].value;
   var baseline = dom['baseline'].value;
   var size = dom['size'].value;
+  var offsetX = parseInt(dom['offset-x'].value, 10);
+  var offsetY = parseInt(dom['offset-y'].value, 10);
   var weight = dom['weight'].value;
+  var rotation = parseFloat(dom['rotation'].value);
   var font = weight + ' ' + size + ' ' + dom['font'].value;
   var fillColor = dom['color'].value;
   var outlineColor = dom['outline'].value;
@@ -86,7 +98,10 @@ var createTextStyle = function(feature, resolution, dom) {
     font: font,
     text: getText(feature, resolution, dom),
     fill: new ol.style.Fill({color: fillColor}),
-    stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth})
+    stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
+    offsetX: offsetX,
+    offsetY: offsetY,
+    rotation: rotation
   });
 };