openlayers/examples/graphic-name.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers Graphic Names</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         // user custom graphicname
   9
  10         OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0];
  11         OpenLayers.Renderer.symbol.rectangle = [0,0, 10,0, 10,4, 0,4, 0,0];
  12
  13         var map;
  14
  15         function init() {
  16             map = new OpenLayers.Map('map');
  17
  18             // list of well-known graphic names
  19             var graphics = ["star", "cross", "x", "square", "triangle", "circle", "lightning", "rectangle"];
  20
  21             // Create one feature for each well known graphic.
  22             // Give features a type attribute with the graphic name.
  23             var num = graphics.length;
  24             var slot = map.maxExtent.getWidth() / num;
  25             var features = Array(num);
  26             for(var i=0; i<graphics.length; ++i) {
  27                 lon = map.maxExtent.left + (i * slot) + (slot / 2);
  28                 features[i] = new OpenLayers.Feature.Vector(
  29                     new OpenLayers.Geometry.Point(
  30                         map.maxExtent.left + (i * slot) + (slot / 2), 0
  31                     ), {
  32                         type: graphics[i]
  33                     }
  34                 );
  35             }
  36
  37             // Create a style map for painting the features.
  38             // The graphicName property of the symbolizer is evaluated using
  39             // the type attribute on each feature (set above).
  40             var styles = new OpenLayers.StyleMap({
  41                 "default": {
  42                     graphicName: "${type}",
  43                     pointRadius: 10,
  44                     strokeColor: "fuchsia",
  45                     strokeWidth: 2,
  46                     fillColor: "lime",
  47                     fillOpacity: 0.6
  48                 },
  49                 "select": {
  50                     pointRadius: 20,
  51                     fillOpacity: 1
  52                 }
  53             });
  54
  55             // Create a vector layer and give it your style map.
  56             var layer = new OpenLayers.Layer.Vector(
  57                 "Graphics", {styleMap: styles, isBaseLayer: true}
  58             );
  59             layer.addFeatures(features);
  60             map.addLayer(layer);
  61
  62             // Create a select feature control and add it to the map.
  63             var select = new OpenLayers.Control.SelectFeature(layer, {hover: true});
  64             map.addControl(select);
  65             select.activate();
  66
  67             map.setCenter(new OpenLayers.LonLat(0, 0), 0);
  68         }
  69     </script>
  70   </head>
  71   <body onload="init()">
  72     <h1 id="title">Named Graphics Example</h1>
  73
  74     <div id="tags"></div>
  75
  76     <p id="shortdesc">
  77         Shows how to use well-known graphic names.
  78     </p>
  79
  80     <div id="map" class="smallmap"></div>
  81
  82     <div id="docs">
  83         OpenLayers supports well-known names for a few graphics.  You can use
  84         the names "star", "cross", "x", "square", "triangle", and "circle" as
  85         the value for the graphicName property of a symbolizer.
  86     </div>
  87   </body>
  88 </html>