Get box related info in OpenLayers

Question

I just started to play a little bit around OpenLayers and I am experiencing some issues while trying to let the user draw a bounding box within a map. For this, I looked at this example and tried to modify the code accordingly without much success: whenever a new box is drawn, I'm getting the following error:

Uncaught TypeError: Object [object Object] has no method 'getBounds'

This is my code (simplified) so far (please, notice it's written in CoffeeScript):

######################################################################
############################## OPEN LAYERS ###########################
######################################################################

    mapOL = null
    boxLayer = null
    heatmapOL = null
    extent = null
    panel = null
    drag = null
    draw = null

    $('body').ready () ->
        fromProjection = new OpenLayers.Projection("EPSG:4326");    # Transform from WGS 1984
        toProjection   = new OpenLayers.Projection("EPSG:900913");  # to Spherical Mercator Projection
        extent = new OpenLayers.Bounds(2.101425, 41.309534, 2.2621, 41.45585).transform(fromProjection, toProjection);

        mapOL = new OpenLayers.Map('openlayers', {
            controls: [
                new OpenLayers.Control.Attribution(),
                new OpenLayers.Control.Navigation()
            ],
            numZoomLevels: 18,
            displayProjection: fromProjection,
            projection: toProjection
        })

        mapnik = new OpenLayers.Layer.OSM.Mapnik('Mapnik', {
            displayOutsideMaxExtent: false,
            wrapDateLine: true
        })

        boxLayer = new OpenLayers.Layer.Vector('Box layer');
        mapOL.addLayers([mapnik, boxLayer])

        mapOL.addControl(new OpenLayers.Control.MousePosition())
        drag = new OpenLayers.Control.DragPan({
            title: 'Drag map'
        })
        draw = new OpenLayers.Control.DrawFeature(boxLayer, OpenLayers.Handler.Box, {
            title: 'Select a bounding box'
        })
        panel = new OpenLayers.Control.Panel({
            defaultControl: drag
        })
        panel.addControls([drag,draw])
        mapOL.addControl(panel)

        mapOL.setBaseLayer(mapnik)
        mapOL.zoomToExtent(extent)

The map and its controls are correctly displayed (I am omitting CSS and HTML code for simplicity). Any clues on what I am missing?

Answer 1

It appears that the baselayer is being set after the Draw Controls are added to the map and you do not specify any extent when the MapNik Layer is created.

Try This:

mapnik = new OpenLayers.Layer.OSM.Mapnik('Mapnik', {
        displayOutsideMaxExtent: false,
        isBaseLayer: true,
        extent: new OpenLayers.Bounds(2.101425, 41.309534, 2.2621, 41.45585).transform(fromProjection, toProjection),
        wrapDateLine: true
})