Created
April 30, 2013 14:52
-
-
Save davidrhyswhite/5489236 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<title>OpenLayers Labeled Features Example</title> | |
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"> | |
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css"> | |
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> | |
<script src="http://openlayers.org/dev/OpenLayers.js"></script> | |
<script type="text/javascript"> | |
var map; | |
function init(){ | |
map = new OpenLayers.Map('map'); | |
var layer = new OpenLayers.Layer.Google("Google"); | |
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 with \n linebreaks | |
label : "name: ${name}\n\nage: ${age}", | |
fontColor: "${favColor}", | |
fontSize: "12px", | |
fontFamily: "Courier New, monospace", | |
fontWeight: "bold", | |
labelAlign: "${align}", | |
labelXOffset: "${xOffset}", | |
labelYOffset: "${yOffset}", | |
labelOutlineColor: "white", | |
labelOutlineWidth: 3 | |
}}), | |
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' | |
}); | |
// Create a point feature to show the label offset options | |
var labelOffsetPoint = new OpenLayers.Geometry.Point(-101.04, 35.68); | |
var labelOffsetFeature = new OpenLayers.Feature.Vector(labelOffsetPoint); | |
labelOffsetFeature.attributes = { | |
name: "offset", | |
age: 22, | |
favColor: 'blue', | |
align: "cm", | |
// positive value moves the label to the right | |
xOffset: 50, | |
// negative value moves the label down | |
yOffset: -15 | |
}; | |
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(-109.370078125, 43.39484375), 4); | |
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, labelOffsetFeature, nullFeature ]); | |
} | |
</script> | |
</head> | |
<body onload="init()"> | |
<h1 id="title">OpenLayers Labeled features example</h1> | |
<div id="tags"> | |
vector, feature, labeling, symbolizer, light | |
</div> | |
<p id="shortdesc"> | |
Label vector features with a text symbolizer. | |
</p> | |
<div id="map" class="smallmap"></div> | |
<div id="docs"> | |
<p>This example shows drawing simple vector features with a label.</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment