1e1020e90d
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.
319 lines
12 KiB
HTML
319 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
<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>
|
|
|
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div id="map" class="map"></div>
|
|
</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">
|
|
<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>
|
|
</div>
|
|
<div id="tags">geojson, vector, openstreetmap, label</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<script src="jquery.min.js" type="text/javascript"></script>
|
|
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
<script src="loader.js?id=vector-labels" type="text/javascript"></script>
|
|
|
|
</body>
|
|
</html>
|