<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Labeled Features Example</title>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.8/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.8/examples/style.css" type="text/css" />
<script src="http://dev.openlayers.org/releases/OpenLayers-2.8/lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWidth: 3,
fillColor: "#FF5500",
fillOpacity: 0.5,
pointRadius: 6,
pointerEvents: "visiblePainted",
label : "name: ${name}, age: ${age}",
fontColor: "${favColor}",
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelAlign: "${align}"
}}),
renderers: renderer
});
// create a point feature
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point);
pointFeature.attributes = {
name: "toto",
age: 20,
favColor: 'red',
align: "cm"
};
// create a polygon feature from a linear ring of points
var pointList = [];
for(var p=0; p<6; ++p) {
var a = p * (2 * Math.PI) / 7;
var r = Math.random(1) + 1;
var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
point.y + 5 + (r * Math.sin(a)));
pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
polygonFeature.attributes = {
name: "dude",
age: 21,
favColor: 'purple',
align: 'lb'
};
multiFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Collection([
new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(-105,40),
new OpenLayers.Geometry.Point(-95,45)
]),
new OpenLayers.Geometry.Point(-105, 40)
]),
{
name: "ball-and-chain",
age: 30,
favColor: 'black',
align: 'rt'
});
var nullFeature = new OpenLayers.Feature.Vector(null);
nullFeature.attributes = {
name: "toto is some text about the world",
age: 20,
favColor: 'red',
align: "cm"
};
map.addLayer(vectorLayer);
vectorLayer.drawFeature(multiFeature);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 3);
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, nullFeature ]);
}
</script>
</head>
<body>
<table><tr><td>
<h1 id="title">OpenLayers Labeled features example</h1>
<div id="tags"></div>
<p id="shortdesc">
Label vector features with a text symbolizer.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
This example shows drawing simple vector features with a label
</div>
<script type="text/javascript">
init();
</script>
</td></tr></table>
</body>
</html>