]> dev.renevier.net Git - syp.git/blob - openlayers/examples/graphic-name.html
reset openlayers directory to its original state at the end of build.sh
[syp.git] / 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>