I am trying to figure out why the addLayer here isn't displaying the boxes that are present in the example shown below:
function($) {
var box_extents = [
[-10, 50, 5, 60],
[-75, 41, -71, 44],
[-122.6, 37.6, -122.3, 37.9],
[10, 10, 20, 20]
];
var map;
map = new OpenLayers.Map({
div: 'map',
projection: new OpenLayers.Projection('EPSG:900913'),
'displayProjection': new OpenLayers.Projection('EPSG:4326')
});
function init() {
var ol_wms = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0?', {
layers: 'basic'
});
var boxes = new OpenLayers.Layer.Vector('Boxes');
var i;
for (i = 0; i < box_extents.length; i++) {
ext = box_extents[i];
bounds = OpenLayers.Bounds.fromArray(ext);
box = new OpenLayers.Feature.Vector(bounds.toGeometry());
boxes.addFeatures(box);
}
map.addLayers([ol_wms, boxes]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var sf = new OpenLayers.Control.SelectFeature(boxes);
map.addControl(sf);
sf.activate();
map.zoomToMaxExtent();
}
init();
})(jQuery);
It works fine with addLayers in another example as displayed here:
(function($) {
var map;
function init() {
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( 'OpenLayers WMS',
'http://vmap0.tiles.osgeo.org/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': new OpenLayers.Style(null, {
rules: [
new OpenLayers.Rule({
symbolizer: {
graphic: false,
label: 'Label for invisible point',
labelSelect: true,
fontStyle: 'italic'
},
filter: new OpenLayers.Filter.Comparison({
type: '==',
property: 'topic',
value: 'point_invisible'
})
}),
new OpenLayers.Rule({
symbolizer: {
stroke: true,
fill: true,
label: 'Polygon with stroke and fill defaults'
},
filter: new OpenLayers.Filter.Comparison({
type: '==',
property: 'topic',
value: 'polygon_defaults'
})
}),
new OpenLayers.Rule({
symbolizer: {
stroke: true,
fill: false,
label: 'Point without fill',
labelAlign: 'rb',
fontColor: '#ff0000',
fontOpacity: 0.4
},
filter: new OpenLayers.Filter.Comparison({
type: '==',
property: 'topic',
value: 'point_nofill'
})
})
]
})
}),
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 = {
topic: 'point_invisible'
};
// 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 = {
topic: 'polygon_defaults'
};
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)
]),
{
topic: 'point_nofill'
});
map.addLayer(vectorLayer);
vectorLayer.drawFeature(multiFeature);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4);
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature]);
var select = new OpenLayers.Control.SelectFeature(vectorLayer, {
selectStyle: OpenLayers.Util.extend(
{fill: true, stroke: true},
OpenLayers.Feature.Vector.style['select'])
});
map.addControl(select);
select.activate();
}
init();
})(jQuery);
They are different enough that it's difficult to compare, but the formatting is pretty much the same:
http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.addLayer
This is a GML layer is a vector layer subclass from what I've gathered:
http://docs.openlayers.org/library/layers.html
Best Answer
I think you're having a problem of the function executing before the DOM objects are ready. I moved calling init in your first example to
<body onload="init()">and it started working fine. I also modified it a bit so it would play nice as a jQuery plugin using$.fn.extend({.Update Per Comment:
This seems to be what you're looking for http://jsfiddle.net/rzwQr/9/