Adding an example of StyleMap use.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7447 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2008-06-24 19:13:47 +00:00
parent 2ce26c4251
commit 2fdee6eabd
1 changed files with 85 additions and 0 deletions
--- a/examples/stylemap.html
+++ b/examples/stylemap.html
@@ -0,0 +1,85 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <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://labs.metacarta.com/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",
+                    strokeRadius: 2
+                }),
+                "select": new OpenLayers.Style({
+                    fillColor: "#66ccff",
+                    strokeColor: "#3399ff"
+                })
+            });
+            
+            // Create a vector layer and give it your style map.
+            var points = new OpenLayers.Layer.Vector(
+                'Points', {styleMap: myStyles}
+            );
+            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"></div>
+
+    <p id="shortdesc">
+        Shows how to use a StyleMap.
+    </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>