0

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?

  • 1
    It might be because of the different projections. – neogeomat Nov 20 '13 at 12:25
  • What version of OpenLayers are you using? It's not clear to me why you specify the layer type as OpenLayers.Layer.OSM.Mapnik instead of OpenLayers.Layer.OSM – drunkenwagoner Aug 5 '14 at 4:10
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
})
  • From what I've seen so far through the examples, I think methods order are not that important. Unfortunately, your solution does not do the trick. By having a look at this example (openlayers.org/dev/examples/draw-feature.html), it turns out box handler is not used but regular polygon instead, which actually works in my case. In any case, thanks for your answer. – jaranda Nov 20 '13 at 13:22
  • Ok, you wanted to draw a feature, not a selection box. A Polygon is more appropriate for that application. Actually, I will still check this out further, as the error should not happen anyway. Curious to know why! Cheers – Mark Cupitt Nov 20 '13 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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