summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/style-rules.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/examples/style-rules.html')
-rw-r--r--misc/openlayers/examples/style-rules.html49
1 files changed, 49 insertions, 0 deletions
diff --git a/misc/openlayers/examples/style-rules.html b/misc/openlayers/examples/style-rules.html
new file mode 100644
index 0000000..27f31f1
--- /dev/null
+++ b/misc/openlayers/examples/style-rules.html
@@ -0,0 +1,49 @@
+<!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>