ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding an example of rule based style.

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@10143 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2010-03-24 18:27:57 +00:00
parent 3de62b703a
commit e7d3e64908
2 changed files with 142 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/style-rules.html
+43
View File
@@ -0,0 +1,43 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Rule Based Style</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script src="style-rules.js"></script>
</head>
<body onload="init()">
<h1 id="title">Rule Based Style</h1>
<p id="shortdesc">
Use rule based styling to use different symbolizers for different
feature groups.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
This example uses four rules to render features. Rules are
based on a feature attribute and determine which symbolizer
is applied when rendering a feature. The rules in this example
change which marker is used by providing an externalGraphic
property in the symbolizer.
</p>
The features are labeled with the same attribute that determines
the symbolizer used. You should be able to confirm that the
graphic color corresponds to the range of numbers given below.
</p>
<ul>
<li>0 &lt;= blue &lt; 25
<li>25 &lt;= green &lt; 50
<li>50 &lt;= gold &lt;= 75
<li>75 &lt; red &lt;= 100
</ul>
<p>
See the <a href="style-rules.js" target="_blank">
style-rules.js source</a> to see how this is done.
</p>
</div>
</body>
</html>