1 <!DOCTYPE HTML>
2
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6 <meta name="apple-mobile-web-app-capable" content="yes">
7 <title>OpenLayers Labeled Features Example</title>
8 <link rel="stylesheet" href="OpenLayers/theme/default/style.css" type="text/css">
9 <link rel="stylesheet" href="style.css" type="text/css">
10 <script src="OpenLayers/lib/OpenLayers.js"></script>
11 <script type="text/javascript">
12 var map;
13
14 function init(){
15 map = new OpenLayers.Map('map');
16
17 var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
18 "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
19 map.addLayer(layer);
20
21
22 var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
23 renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
24
25 var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
26 styleMap: new OpenLayers.StyleMap({'default':{
27 strokeColor: "#00FF00",
28 strokeOpacity: 1,
29 strokeWidth: 3,
30 fillColor: "#FF5500",
31 fillOpacity: 0.5,
32 pointRadius: 6,
33 pointerEvents: "visiblePainted",
34
35 label : "name: ${name}\n age: ${age}",
36
37 fontColor: "${favColor}",
38 fontSize: "12px",
39 fontFamily: "Courier New, monospace",
40 fontWeight: "bold",
41 labelAlign: "${align}",
42 labelXOffset: "${xOffset}",
43 labelYOffset: "${yOffset}",
44 labelOutlineColor: "white",
45 labelOutlineWidth: 3
46 }}),
47 renderers: renderer
48 });
49
50
51 var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
52 var pointFeature = new OpenLayers.Feature.Vector(point);
53 pointFeature.attributes = {
54 name: "toto",
55 age: 20,
56 favColor: 'red',
57 align: "cm"
58 };
59
60
61 var pointList = [];
62 for(var p=0; p<6; ++p) {
63 var a = p * (2 * Math.PI) / 7;
64 var r = Math.random(1) + 1;
65 var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
66 point.y + 5 + (r * Math.sin(a)));
67 pointList.push(newPoint);
68 }
69 pointList.push(pointList[0]);
70
71 var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
72 var polygonFeature = new OpenLayers.Feature.Vector(
73 new OpenLayers.Geometry.Polygon([linearRing]));
74 polygonFeature.attributes = {
75 name: "dude",
76 age: 21,
77 favColor: 'purple',
78 align: 'lb'
79 };
80
81 multiFeature = new OpenLayers.Feature.Vector(
82 new OpenLayers.Geometry.Collection([
83 new OpenLayers.Geometry.LineString([
84 new OpenLayers.Geometry.Point(-105,40),
85 new OpenLayers.Geometry.Point(-95,45)
86 ]),
87 new OpenLayers.Geometry.Point(-105, 40)
88 ]),
89 {
90 name: "ball-and-chain",
91 age: 30,
92 favColor: 'black',
93 align: 'rt'
94 });
95
96
97 var labelOffsetPoint = new OpenLayers.Geometry.Point(-101.04, 35.68);
98 var labelOffsetFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
99 labelOffsetFeature.attributes = {
100 name: "offset",
101 age: 22,
102 favColor: 'blue',
103 align: "cm",
104
105 xOffset: 50,
106
107 yOffset: -15
108 };
109
110
111 var nullFeature = new OpenLayers.Feature.Vector(null);
112 nullFeature.attributes = {
113 name: "toto is some text about the world",
114 age: 20,
115 favColor: 'red',
116 align: "cm"
117 };
118
119 map.addLayer(vectorLayer);
120 vectorLayer.drawFeature(multiFeature);
121 map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4);
122 vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, labelOffsetFeature, nullFeature ]);
123 }
124 </script>
125 </head>
126 <body onload="init()">
127 <h1 id="title">OpenLayers Labeled features example</h1>
128 <div id="tags">
129 vector, feature, labeling, symbolizer, light
130 </div>
131 <p id="shortdesc">
132 Label vector features with a text symbolizer.
133 </p>
134 <div id="map" class="smallmap"></div>
135 <div id="docs">
136 <p>This example shows drawing simple vector features with a label.</p>
137 </div>
138 </body>
139 </html>
