Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add rotation, offsetX and offsetY to vector-labels example #1852

Merged
merged 1 commit into from

2 participants

@adube

This pull request adds the rotation, offsetX and offsetY as form elements in the vector-labels example. The note about the 'text/wrap' property not working is also updated.

@twpayne

Thanks!

@twpayne twpayne merged commit 63f50fc into from
@adube adube deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 56 additions and 2 deletions.
  1. +40 −1 examples/vector-labels.html
  2. +16 −1 examples/vector-labels.js
View
41 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 @@ <h4 id="title">Vector labels example</h4>
<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>
View
17 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
});
};
Something went wrong with that request. Please try again.