Update vector-labels example
Add forms to let the user change the labels as they want. Text 'Wrap' doesn't work properly. '\n' are supposed to allow line to break.
This commit is contained in:
Alexandre Dubé
@@ -8,6 +8,45 @@
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<style type="text/css">
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 15px;
|
||||
};
|
||||
|
||||
.scale-cnt {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.edit-form-ctn {
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
width: 230px;
|
||||
padding: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.edit-form input[type="button"] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.edit-form-elem label {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.edit-form-elem input[type="text"] {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.edit-form-elem select {
|
||||
width: 130px;
|
||||
}
|
||||
</style>
|
||||
<title>Vector labels example</title>
|
||||
</head>
|
||||
<body>
|
||||
@@ -28,6 +67,233 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-form">
|
||||
<input type="button" value="Refresh" onclick="refreshPoints();" />
|
||||
<h2>Points</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="points-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="shorten" selected="selected">Shorten</option>
|
||||
<option value="wrap">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="points-maxreso">
|
||||
<option value="384000">384,000</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16"></option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="points-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="points-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="points-font">
|
||||
<option value="Arial" selected="selected">Arial</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
<option value="Verdana">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="points-weight">
|
||||
<option value="bold">Bold</option>
|
||||
<option value="normal" selected="selected">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="12px" id="points-size" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="#aa3300" id="points-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="points-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="points-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-form">
|
||||
<input type="button" value="Refresh" onclick="refreshLines();" />
|
||||
<h2>Lines</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="lines-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="shorten">Shorten</option>
|
||||
<option value="wrap" selected="selected">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="lines-maxreso">
|
||||
<option value="384000">384,000</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16"></option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="lines-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="lines-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="lines-font">
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Courier New" selected="selected">Courier New</option>
|
||||
<option value="Verdana">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="lines-weight">
|
||||
<option value="bold" selected="selected">Bold</option>
|
||||
<option value="normal">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="12px" id="lines-size" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="green" id="lines-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="lines-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="lines-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-form">
|
||||
<input type="button" value="Refresh" onclick="refreshPolygons();" />
|
||||
<h2>Polygons</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="polygons-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal" selected="selected">Normal</option>
|
||||
<option value="shorten">Shorten</option>
|
||||
<option value="wrap">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="polygons-maxreso">
|
||||
<option value="384000">384,000</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16"></option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="polygons-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="polygons-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="polygons-font">
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
<option value="Verdana" selected="selected">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="polygons-weight">
|
||||
<option value="bold" selected="selected">Bold</option>
|
||||
<option value="normal">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="10px" id="polygons-size" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="blue" id="polygons-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="polygons-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="polygons-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:left;"></div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
@@ -41,6 +307,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
@@ -12,14 +12,88 @@ goog.require('ol.style.Style');
|
||||
goog.require('ol.style.Text');
|
||||
|
||||
|
||||
var myDom = {
|
||||
'points': {
|
||||
'text': document.getElementById('points-text'),
|
||||
'align': document.getElementById('points-align'),
|
||||
'baseline': document.getElementById('points-baseline'),
|
||||
'font': document.getElementById('points-font'),
|
||||
'weight': document.getElementById('points-weight'),
|
||||
'size': document.getElementById('points-size'),
|
||||
'color': document.getElementById('points-color'),
|
||||
'outline': document.getElementById('points-outline'),
|
||||
'outline-width': document.getElementById('points-outline-width'),
|
||||
'maxreso': document.getElementById('points-maxreso')
|
||||
},
|
||||
'lines': {
|
||||
'text': document.getElementById('lines-text'),
|
||||
'align': document.getElementById('lines-align'),
|
||||
'baseline': document.getElementById('lines-baseline'),
|
||||
'font': document.getElementById('lines-font'),
|
||||
'weight': document.getElementById('lines-weight'),
|
||||
'size': document.getElementById('lines-size'),
|
||||
'color': document.getElementById('lines-color'),
|
||||
'outline': document.getElementById('lines-outline'),
|
||||
'outline-width': document.getElementById('lines-outline-width'),
|
||||
'maxreso': document.getElementById('lines-maxreso')
|
||||
},
|
||||
'polygons': {
|
||||
'text': document.getElementById('polygons-text'),
|
||||
'align': document.getElementById('polygons-align'),
|
||||
'baseline': document.getElementById('polygons-baseline'),
|
||||
'font': document.getElementById('polygons-font'),
|
||||
'weight': document.getElementById('polygons-weight'),
|
||||
'size': document.getElementById('polygons-size'),
|
||||
'color': document.getElementById('polygons-color'),
|
||||
'outline': document.getElementById('polygons-outline'),
|
||||
'outline-width': document.getElementById('polygons-outline-width'),
|
||||
'maxreso': document.getElementById('polygons-maxreso')
|
||||
}
|
||||
};
|
||||
|
||||
var getText = function(feature, resolution, dom) {
|
||||
var type = dom['text'].value;
|
||||
var maxResolution = dom['maxreso'].value;
|
||||
var text = feature.getProperties().name;
|
||||
|
||||
if (resolution > maxResolution) {
|
||||
text = '';
|
||||
} else if (type == 'hide') {
|
||||
text = '';
|
||||
} else if (type == 'shorten') {
|
||||
text = text.trunc(12);
|
||||
} else if (type == 'wrap') {
|
||||
text = stringDivider(text, 16, '\n');
|
||||
}
|
||||
|
||||
return text;
|
||||
};
|
||||
|
||||
|
||||
var createTextStyle = function(feature, resolution, dom) {
|
||||
var align = dom['align'].value;
|
||||
var baseline = dom['baseline'].value;
|
||||
var size = dom['size'].value;
|
||||
var weight = dom['weight'].value;
|
||||
var font = weight + ' ' + size + ' ' + dom['font'].value;
|
||||
var fillColor = dom['color'].value;
|
||||
var outlineColor = dom['outline'].value;
|
||||
var outlineWidth = parseInt(dom['outline-width'].value, 10);
|
||||
|
||||
return new ol.style.Text({
|
||||
textAlign: align,
|
||||
textBaseline: baseline,
|
||||
font: font,
|
||||
text: getText(feature, resolution, dom),
|
||||
fill: new ol.style.Fill({color: fillColor}),
|
||||
stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth})
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Polygons
|
||||
var vectorPolygons = new ol.layer.Vector({
|
||||
source: new ol.source.GeoJSON({
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/geojson/polygon-samples.geojson'
|
||||
}),
|
||||
style: function(feature, resolution) {
|
||||
var createPolygonStyleFunction = function() {
|
||||
return function(feature, resolution) {
|
||||
var style = new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'blue',
|
||||
@@ -28,62 +102,65 @@ var vectorPolygons = new ol.layer.Vector({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0, 0, 255, 0.1)'
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
font: '12px Arial',
|
||||
text: feature.getProperties().name,
|
||||
fill: new ol.style.Fill({color: 'blue'}),
|
||||
stroke: new ol.style.Stroke({color: 'white', width: 3})
|
||||
})
|
||||
text: createTextStyle(feature, resolution, myDom.polygons)
|
||||
});
|
||||
return [style];
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// Lines
|
||||
var vectorLines = new ol.layer.Vector({
|
||||
var vectorPolygons = new ol.layer.Vector({
|
||||
source: new ol.source.GeoJSON({
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/geojson/line-samples.geojson'
|
||||
url: 'data/geojson/polygon-samples.geojson'
|
||||
}),
|
||||
style: function(feature, resolution) {
|
||||
style: createPolygonStyleFunction()
|
||||
});
|
||||
|
||||
|
||||
// Lines
|
||||
var createLineStyleFunction = function() {
|
||||
return function(feature, resolution) {
|
||||
var style = new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'green',
|
||||
width: 2
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
font: '12px Arial',
|
||||
text: feature.getProperties().name,
|
||||
fill: new ol.style.Fill({color: 'green'}),
|
||||
stroke: new ol.style.Stroke({color: 'white', width: 3})
|
||||
})
|
||||
text: createTextStyle(feature, resolution, myDom.lines)
|
||||
});
|
||||
return [style];
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// Points
|
||||
var vectorPoints = new ol.layer.Vector({
|
||||
var vectorLines = new ol.layer.Vector({
|
||||
source: new ol.source.GeoJSON({
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/geojson/point-samples.geojson'
|
||||
url: 'data/geojson/line-samples.geojson'
|
||||
}),
|
||||
style: function(feature, resolution) {
|
||||
style: createLineStyleFunction()
|
||||
});
|
||||
|
||||
|
||||
// Points
|
||||
var createPointStyleFunction = function() {
|
||||
return function(feature, resolution) {
|
||||
var style = new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 10,
|
||||
fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
font: '12px Arial',
|
||||
text: feature.getProperties().name,
|
||||
fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 1)'}),
|
||||
stroke: new ol.style.Stroke({color: 'white', width: 3})
|
||||
})
|
||||
text: createTextStyle(feature, resolution, myDom.points)
|
||||
});
|
||||
return [style];
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var vectorPoints = new ol.layer.Vector({
|
||||
source: new ol.source.GeoJSON({
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/geojson/point-samples.geojson'
|
||||
}),
|
||||
style: createPointStyleFunction()
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
@@ -102,3 +179,46 @@ var map = new ol.Map({
|
||||
zoom: 8
|
||||
})
|
||||
});
|
||||
|
||||
var refreshPoints = function() {
|
||||
vectorPoints.setStyle(createPointStyleFunction());
|
||||
};
|
||||
|
||||
var refreshLines = function() {
|
||||
vectorLines.setStyle(createLineStyleFunction());
|
||||
};
|
||||
|
||||
var refreshPolygons = function() {
|
||||
vectorPolygons.setStyle(createPolygonStyleFunction());
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {number} n The max number of characters to keep.
|
||||
* @return {string} Truncated string.
|
||||
*/
|
||||
String.prototype.trunc = String.prototype.trunc ||
|
||||
function(n) {
|
||||
return this.length > n ? this.substr(0, n - 1) + '...' : this.substr(0);
|
||||
};
|
||||
|
||||
|
||||
// http://stackoverflow.com/questions/14484787/wrap-text-in-javascript
|
||||
function stringDivider(str, width, spaceReplacer) {
|
||||
if (str.length > width) {
|
||||
var p = width;
|
||||
for (; p > 0 && (str[p] != ' ' && str[p] != '-'); p--) {
|
||||
}
|
||||
if (p > 0) {
|
||||
var left;
|
||||
if (str.substring(p, p + 1) == '-') {
|
||||
left = str.substring(0, p + 1);
|
||||
} else {
|
||||
left = str.substring(0, p);
|
||||
}
|
||||
var right = str.substring(p + 1);
|
||||
return left + spaceReplacer + stringDivider(right, width, spaceReplacer);
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user