Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from Mar 12, 2014
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
41 changes: 40 additions & 1 deletion examples/vector-labels.html
View file
Open in desktop
Expand Up @@ -115,6 +115,13 @@ <h2>Points</h2>
<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>
Expand All @@ -132,6 +139,12 @@ <h2>Points</h2>
<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 />
Expand Down Expand Up @@ -191,6 +204,13 @@ <h2>Lines</h2>
<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>
Expand All @@ -208,6 +228,12 @@ <h2>Lines</h2>
<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 />
Expand Down Expand Up @@ -267,6 +293,13 @@ <h2>Polygons</h2>
<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>
Expand All @@ -284,6 +317,12 @@ <h2>Polygons</h2>
<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 />
Expand All @@ -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>
Expand Down
17 changes: 16 additions & 1 deletion examples/vector-labels.js
View file
Open in desktop
Expand Up @@ -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'),
Expand All @@ -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'),
Expand All @@ -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'),
Expand Down Expand Up @@ -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;
Expand All @@ -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
});
};

Expand Down