jQuery + OpenLayers
HTML
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<html>
<head>
<title>Pestañas de jQuery en OpenLayers</title>
</head>
<body>
<div id="map" style="width:512px; height:512px"></div>
</body>
</html>
JavaScript
var map = new OpenLayers.Map('map', {
controls: []
});
// well known graphics
OpenLayers.Renderer.symbol.sector = [0,4, 10,0, 12,1, 13,4, 12,7, 10,8, 0,4];
OpenLayers.Renderer.symbol.sector_hack = [0,4, 10,0, 12,1, 13,4, 12,7, 10,8, 0,4, -13,4];
// list of azimuths
var azimuths = [0, 120, 240];
var graphics= ['sector', 'sector_hack'];
// Create one feature for each well known graphic.
// Give features a type attribute with the graphic name.
var sites = 2;
var sectors = azimuths.length;
var features = Array(sites * sectors);
var width = map.maxExtent.getWidth();
var height= map.maxExtent.getHeight();
var lon = map.maxExtent.left + width / 2;
var latDelta = height / (sites+1);
var lat = map.maxExtent.top;
for (var i = 0; i < sites; ++i) {
lat = lat - latDelta;
for (var j = 0; j < sectors ; ++j) {
var location= new OpenLayers.Geometry.Point(lon, lat);
features[i*sectors+j] = new OpenLayers.Feature.Vector(location, {
azimuth: azimuths[j],
symbol: graphics[i]
});
}
}
// Create a style map for painting the features.
// The graphicName property of the symbolizer is evaluated using
// the type attribute on each feature (set above).
var styles = new OpenLayers.StyleMap({
"default": {
graphicName: '${symbol}',
pointRadius: 20,
strokeColor: 'fuchsia',
strokeWidth: 2,
strokeOpacity: 0.3,
fillColor: 'lime',
fillOpacity: 0.3,
rotation: '${azimuth}',
graphicYOffset: -10
},
"select": {
pointRadius: 20,
fillOpacity: 1
}
});
// Create a vector layer and give it your style map.
var layer = new OpenLayers.Layer.Vector("Graphics", {
styleMap: styles,
isBaseLayer: true
});
layer.addFeatures(features);
map.addLayer(layer);
// Create a select feature control and add it to the map.
var select = new OpenLayers.Control.SelectFeature(layer, {
hover:...