1 files changed, 100 insertions, 0 deletions
diff --git a/misc/openlayers/examples/stylemap.html b/misc/openlayers/examples/stylemap.html
new file mode 100644
index 0000000..b80961d
--- /dev/null
+++ b/misc/openlayers/examples/stylemap.html
@@ -0,0 +1,100 @@
+<!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 StyleMap</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 type="text/javascript">
+        var map;
+
+        function init() {
+            map = new OpenLayers.Map('map');
+            var wms = new OpenLayers.Layer.WMS(
+                "OpenLayers WMS",
+                "http://vmap0.tiles.osgeo.org/wms/vmap0",
+                {layers: 'basic'}
+            );
+            
+            // Create 50 random features, and give them a "type" attribute that
+            // will be used to style them by size.
+            var features = new Array(50);
+            for (var i=0; i<features.length; i++) {
+                features[i] = new OpenLayers.Feature.Vector(
+                    new OpenLayers.Geometry.Point(
+                        (360 * Math.random()) - 180, (180 * Math.random()) - 90
+                    ), {
+                        type: 5 + parseInt(5 * Math.random())
+                    }
+                );
+            }
+            
+            // Create a styleMap to style your features for two different
+            // render intents.  The style for the 'default' render intent will
+            // be applied when the feature is first drawn.  The style for the
+            // 'select' render intent will be applied when the feature is
+            // selected.
+            var myStyles = new OpenLayers.StyleMap({
+                "default": new OpenLayers.Style({
+                    pointRadius: "${type}", // sized according to type attribute
+                    fillColor: "#ffcc66",
+                    strokeColor: "#ff9933",
+                    strokeWidth: 2,
+                    graphicZIndex: 1
+                }),
+                "select": new OpenLayers.Style({
+                    fillColor: "#66ccff",
+                    strokeColor: "#3399ff",
+                    graphicZIndex: 2
+                })
+            });
+            
+            // Create a vector layer and give it your style map.
+            var points = new OpenLayers.Layer.Vector("Points", {
+                styleMap: myStyles,
+                rendererOptions: {zIndexing: true}
+            });
+            points.addFeatures(features);
+            map.addLayers([wms, points]);
+            
+            // Create a select feature control and add it to the map.
+            var select = new OpenLayers.Control.SelectFeature(points, {hover: true});
+            map.addControl(select);
+            select.activate();
+            
+            map.setCenter(new OpenLayers.LonLat(0, 0), 1);
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">StyleMap Example</h1>
+
+    <div id="tags">
+        vector, feature, stylemap, light
+    </div>
+
+    <p id="shortdesc">
+        Shows how to use a StyleMap to style features with rule based styling.
+        A style map references one or more OpenLayers.Style objects.  These
+        OpenLayers.Style objects are collections of OpenLayers.Rule objects
+        that determine how features are styled.  An OpenLayers.Rule object
+        combines an OpenLayers.Filter object with a symbolizer.  A filter is used
+        to determine whether a rule applies for a given feature, and a symbolizer
+        is used to draw the feature if the rule applies.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        <p>A style map is used with vector layers to define styles for various
+        rendering intents.  The style map used here has styles defined for the
+        "default" and "select" rendering intents.  This map also has an active
+        select feature control.  When you hover over features, they are selected
+        and drawn with the style corresponding the the "select" render intent.
+        </p>
+    </div>
+  </body>
+</html>