<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAl8Y5-TgKfUHyhVH6Q4DYBRRvT1pIefYSdThU_fgfV0-jVArgXRQfWgeJdiW9jBMffadB10KoFua3Gg'></script>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init()
{
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34),
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
],
numZoomLevels:30
};
map = new OpenLayers.Map( 'map', options);
var google = new OpenLayers.Layer.Google( "Google", {"sphericalMercator": true});
var google_hy = new OpenLayers.Layer.Google( "Google Hybrid" , { type: G_HYBRID_MAP, "sphericalMercator": true});
map.addLayers([google_hy,google]);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.addControl( new OpenLayers.Control.MousePosition() );
map.addControl(new OpenLayers.Control.Permalink() );
map.setCenter((new OpenLayers.LonLat(-90.034, 29.93809)).transform(map.displayProjection, map.projection), 19);
vectors = new OpenLayers.Layer.Vector(
"Vehicle Location",
{
styleMap: new OpenLayers.StyleMap({
"default": {
externalGraphic: "../img/marker.png",
//graphicWidth: 28,
graphicHeight: 50,
graphicYOffset: -25,
rotation: "${angle}",
fillOpacity: "${opacity}"
}
})
});
map.addLayer(vectors);
var features = [];
var x = -90.034; // -111.04;
var y = 29.93809;// 45.68;
polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(x, y).transform(map.displayProjection, map.projection), {angle:10, opacity:0.9}
)
vectors.addFeatures([polygonFeature]);
}
</script>
</head>
</head>
<body onload="init()">
<div >
<div id="tags">
</div>
<div id="controls">
<div id="map" ></div>
</div>
<div id="docs">
</div>
</div>
</body>