misc/openlayers/examples/style-rules.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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>