3

I've tried to overlay a radar image on my map so that I can show the current radar for the United states. However, whenever I load the map, I can't seem to get the projection to look correct. Here's the image at one of the higher zoom levels: high zoom level, and here's the image when I zoom in (notice it takes up the same amount of space horizontally no matter the map zoom):

zoom in image.

Here's the code I'm using to set up the OpenLayers map. I've poked at this for quite some time, and can't quite figure out what's going on here.

I'm relatively new to OpenLayers.

loadExtendedFieldMap: function() {
this.removePageSource();

$('#map-container').height($(window).height() - 350); // 350 = magic number to get an appropriate map height. It's the number of pixels from the bottom of the window.
$map = $('#map-container', this.element);

if (!$map.length) { return; }

proj4326   = new OpenLayers.Projection("EPSG:4326");
proj900913 = new OpenLayers.Projection("EPSG:900913");

bounds = new OpenLayers.Bounds();
bounds.extend(new OpenLayers.LonLat(-127.620375523875420, 21.652538062803));
bounds.extend(new OpenLayers.LonLat(-66.517937876818, 50.406626367301044));
bounds.transform(proj4326, proj900913);

$map.MapController({
  layers: {
    bingAerial: new OpenLayers.Layer.BingAerial({
      wrapDateLine: true,
      isBaseLayer: true
    }),
    bingRoads: new OpenLayers.Layer.BingRoads({
      wrapDateLine: true,
      isBaseLayer: true
    }),
    boundary: new OpenLayers.Layer.Boundary({name: 'Field Boundary'}),
    radar: new OpenLayers.Layer.Image('radar', 'http://radar.weather.gov/ridge/Conus/RadarImg/latest_radaronly.gif', bounds, new OpenLayers.Size(3400, 1600), {
      'isBaseLayer': false,
      'alwaysInRange': true
    })
  },
  mapOptions: {
    eventListeners: {
      changelayer: $.proxy(this.layerChanged, this)
    }
  }
}).MapController('addControls', {
  // Core
  layerSwitcher: new OpenLayers.Control.LayerSwitcher({
    alwaysOn: true
  })
});

this.getFieldInformation();
},

1 Answer 1

3

It turns out that this is not an issue with projection or map size or anything to do with OpenLayers.

It appears that bootstrap was adding an attribute to the image causing it to never exceed a certain width on the screen.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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