Sign up ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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', '', {
            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());

        map.addLayers([ol_wms, boxes]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        var sf = new OpenLayers.Control.SelectFeature(boxes);


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',
                    '', {layers: 'basic'} );

            // 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)));

            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.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},


They are different enough that it's difficult to compare, but the formatting is pretty much the same:

This is a GML layer is a vector layer subclass from what I've gathered:

share|improve this question
have you gone through the openlayer box example –  vinayan Apr 11 '12 at 4:47
Do you get any javascript errors? Also, make sure you have exactly one base layer, and to mark all others as overlays. –  relet Apr 11 '12 at 9:01
vinayan - I'm working from that and splitting it up into pieces in jsFiddle so that it is easier to see/manipulate. I've done this now with several of the dev examples from OpenLayers. @relet - I'm working from and there are no errors. I think I've got the base layer properly defined. –  Mike Gifford Apr 11 '12 at 13:55

1 Answer 1

up vote 2 down vote accepted

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

share|improve this answer
It could well be that the problem is that I am doing this within jsFiddle. I added your code (essentially) to here for comparison. I got essentially the same result. Note, I'm not sure why StackExchange just pulled out the javascript pane from the jsFiddle I and pasted into the window. I'd wanted to point to a real example. –  Mike Gifford Apr 11 '12 at 13:47
This works, but you still have a projection problem. –  CaptDragon Apr 11 '12 at 14:06
I fixed your projection problem by commenting out defined projection options. Check my latest update in my original answer. –  CaptDragon Apr 11 '12 at 14:10
Nice! Thanks @CaptDragon for your feedback. Posted the diff here to see what you changed to make it work - –  Mike Gifford Apr 11 '12 at 16:58

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.