1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers: Vector Features</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" type="text/javascript"></script>
7 <script type="text/javascript">
11 map = new OpenLayers.Map('map');
12 var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
13 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
19 // we want opaque external graphics and non-opaque internal graphics
20 var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
21 layer_style.fillOpacity = 0.2;
22 layer_style.graphicOpacity = 1;
27 var style_blue = OpenLayers.Util.extend({}, layer_style);
28 style_blue.strokeColor = "blue";
29 style_blue.fillColor = "blue";
30 style_blue.graphicName = "star";
31 style_blue.pointRadius = 10;
32 style_blue.strokeWidth = 3;
33 style_blue.rotation = 45;
34 style_blue.strokeLinecap = "butt";
40 strokeColor: "#00FF00",
42 strokeDashstyle: "dashdot",
44 pointerEvents: "visiblePainted"
50 var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
51 // each of the three lines below means the same, if only one of
52 // them is active: the image will have a size of 24px, and the
53 // aspect ratio will be kept
54 // style_mark.pointRadius = 12;
55 // style_mark.graphicHeight = 24;
56 // style_mark.graphicWidth = 24;
58 // if graphicWidth and graphicHeight are both set, the aspect ratio
59 // of the image will be ignored
60 style_mark.graphicWidth = 24;
61 style_mark.graphicHeight = 20;
62 style_mark.graphicXOffset = -(style_mark.graphicWidth/2); // this is the default value
63 style_mark.graphicYOffset = -style_mark.graphicHeight;
64 style_mark.externalGraphic = "../img/marker.png";
65 // graphicTitle only works in Firefox and Internet Explorer
66 style_mark.graphicTitle = "this is a test tooltip";
68 var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});
70 // create a point feature
71 var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
72 var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
73 var point2 = new OpenLayers.Geometry.Point(-105.04, 49.68);
74 var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);
75 var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68);
76 var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_mark);
78 // create a line feature from a list of points
81 for(var p=0; p<15; ++p) {
82 newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1),
83 newPoint.y + Math.random(1));
84 pointList.push(newPoint);
86 var lineFeature = new OpenLayers.Feature.Vector(
87 new OpenLayers.Geometry.LineString(pointList),null,style_green);
89 // create a polygon feature from a linear ring of points
91 for(var p=0; p<6; ++p) {
92 var a = p * (2 * Math.PI) / 7;
93 var r = Math.random(1) + 1;
94 var newPoint = new OpenLayers.Geometry.Point(point.x + (r * Math.cos(a)),
95 point.y + (r * Math.sin(a)));
96 pointList.push(newPoint);
98 pointList.push(pointList[0]);
100 var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
101 var polygonFeature = new OpenLayers.Feature.Vector(
102 new OpenLayers.Geometry.Polygon([linearRing]));
105 map.addLayer(vectorLayer);
106 map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
107 vectorLayer.addFeatures([pointFeature, pointFeature3, pointFeature2, lineFeature, polygonFeature]);
111 <body onload="init()">
112 <h1 id="title">Drawing Simple Vector Features Example</h1>
117 Shows the use of the shows drawing simple vector features, in different styles.
119 <div style="text-align: right">
120 <div dir="rtl" id="map" class="smallmap"></div>
123 <p>This example shows drawing simple vector features -- point, line, polygon
124 in different styles, created 'manually', by constructing the entire style
125 object, via 'copy', extending the default style object, and by
126 inheriting the default style from the layer.</p>
127 <p>It also shows how to use external graphic files for point features
128 and how to set their size: If either graphicWidth or graphicHeight is set,
129 the aspect ratio of the image will be respected. If both graphicWidth and
130 graphicHeight are set, it will be ignored. Alternatively, if graphicWidth
131 and graphicHeight are omitted, pointRadius will be used to set the size
132 of the image, which will then be twice the value of pointRadius with the
133 original aspect ratio.</p>