<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<title>OpenLayers</title>
</head>
<script type="text/javascript">
function drawPoint(lat, lon)
{
var point = new OpenLayers.Geometry.Point(lon, lat);
vectorLayer.addFeatures([
new OpenLayers.Feature.Vector(point) //, {})
]);
}
function drawFeatures()
{
var baseLon = -36.4356779;
var baseLat = -62.0521971;
for (var i = 0; i < 10000; i++)
{
var offsetLon = Math.random() / 60;
var offsetLat = Math.random() / 60;
drawPoint(baseLon + offsetLon, baseLat + offsetLat);
}
}
function init()
{
/* Initialize map */
map = new OpenLayers.Map('map');
/* Initialize vector layer with stylemap */
styleMap = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: 2,
fillColor: "#8AE234",
strokeColor: "#ff0000",
strokeWidth: 0
})
});
vectorLayer = new OpenLayers.Layer.Vector('Vector Layer', { styleMap: styleMap, isBaseLayer: true });
/* Add layer and bounds*/
map.addLayers([vectorLayer]);
//map.zoomToMaxExtent();
var bounds = new OpenLayers.Bounds(
-62.0521971, -36.4356779,
-62.0331301, -36.4205236
);
map.zoomToExtent(bounds, true);
/* Initialize measures control */
var measureControl = new OpenLayers.Control.Measure(
OpenLayers.Handler.Polygon, { persist: true }
);
map.addControl(measureControl);
measureControl.activate();
/* Draw all the features */
drawFeatures();
}
</script>
<body onload="init()">
<div
id="map"
style="width: 800px; height: 600px; background-color: #204A87">
</div>
</body>
</html>