openlayers/examples/styles-unique.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers Styles Unique Value Styles Example</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var map, layer;
   9
  10         function init(){
  11             map = new OpenLayers.Map('map', {maxResolution:'auto'});
  12             var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  13                 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  14             map.addLayer(wms);
  15             map.setCenter(new OpenLayers.LonLat(0, 0), 0);
  16
  17             // create 20 random features with a random type attribute. The
  18             // type attribute is a value between 0 and 2.
  19             var features = new Array(20);
  20             for (var i=0; i<20; i++) {
  21                 features[i] = new OpenLayers.Feature.Vector(
  22                     new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90),
  23                     {type: parseInt(Math.random()*3)}
  24                 );
  25             }
  26
  27             // create a styleMap with a custom default symbolizer
  28             var styleMap = new OpenLayers.StyleMap({
  29                 fillOpacity: 1,
  30                 pointRadius: 10
  31             });
  32
  33             // create a lookup table with different symbolizers for 0, 1 and 2
  34             var lookup = {
  35                 0: {externalGraphic: "../img/marker-blue.png"},
  36                 1: {externalGraphic: "../img/marker-green.png"},
  37                 2: {externalGraphic: "../img/marker-gold.png"}
  38             }
  39
  40             // add rules from the above lookup table, with the keyes mapped to
  41             // the "type" property of the features, for the "default" intent
  42             styleMap.addUniqueValueRules("default", "type", lookup);
  43
  44             layer = new OpenLayers.Layer.Vector('Points', {
  45                 styleMap: styleMap
  46             });
  47
  48             layer.addFeatures(features);
  49             map.addLayer(layer);
  50
  51             // create 20 random features with a random state property.
  52             var features = new Array(20);
  53             var states = [
  54                 OpenLayers.State.UNKNOWN,
  55                 OpenLayers.State.UPDATE,
  56                 OpenLayers.State.DELETE,
  57                 OpenLayers.State.INSERT
  58             ];
  59             for (var i=0; i<20; i++) {
  60                 features[i] = new OpenLayers.Feature.Vector(
  61                     new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90)
  62                 );
  63                 features[i].state = states[parseInt(Math.random()*4)];
  64             }
  65
  66             var context = function(feature) {
  67                 return feature;
  68             }
  69             var styleMap = new OpenLayers.StyleMap();
  70
  71             // create a lookup table with different symbolizers for the different
  72             // state values
  73             var lookup = {};
  74             lookup[OpenLayers.State.UNKNOWN] = {fillColor: "green"};
  75             lookup[OpenLayers.State.UPDATE] = {fillColor: "green"};
  76             lookup[OpenLayers.State.DELETE] = {fillColor: "red"};
  77             lookup[OpenLayers.State.INSERT] = {fillColor: "orange"};
  78
  79             styleMap.addUniqueValueRules("default", "state", lookup, context);
  80             layer = new OpenLayers.Layer.Vector('Points', {
  81                 styleMap: styleMap
  82             });
  83
  84             layer.addFeatures(features);
  85             map.addLayer(layer);
  86         }
  87     </script>
  88   </head>
  89   <body onload="init()">
  90     <h1 id="title">Unique Value Styles Example</h1>
  91
  92     <div id="tags"></div>
  93
  94     <p id="shortdesc">
  95         Shows how to create a style based on unique feature attribute values (markers)
  96         and feature state values (circles).
  97     </p>
  98
  99     <div id="map" class="smallmap"></div>
 100
 101     <div id="docs"></div>
 102   </body>
 103 </html>