Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

50 lines (47 sloc) 2.05 kB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<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>
<div id="tags">
vector, feature, stylemap, filter, comparison, light
</div>
<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>
Jump to Line
Something went wrong with that request. Please try again.