Ouch! My Bad

JavaScript is powerful and Backbone.js is a nice small utility that makes it even more powerful. I was playing with Backbone and Open layers thrown over a Django system.
However there is something weird that I faced and took a good amount of my time to figure out the problem.
This blog post is kind of self note so that I notice this the first place when I face such problem again.

What was I trying to do : Write a small backbone code to display Open layers(OSM) Map.
How was I trying to do :

(function($) {
var Map = Backbone.Model.extend({});

var MapView = Backbone.View.extend({

initialize: function() {
_.bindAll(this, 'initMap');
this.initMap();
},

initMap: function() {
// Initialize Basic Openlayers;
var center = new OpenLayers.LonLat(8110203.9998955, 2170000.4068373);
map = new OpenLayers.Map(this.el, {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var layers = [];
layers[0] = new OpenLayers.Layer.OSM(); //some more layer will go here
map.addLayers(layers);
map.setCenter(center, 12);

}
});
var map_view = new MapView({ el: $("#mapCol") });
})(jQuery);

The problem faced here was I am trying to access the DOM element even before it is ready.
Result : A webpage which shows the HTML elements, shows some access to Openlayers but no map.

Solution : I modified my code to this

(function($) {
var Map = Backbone.Model.extend({});

var MapView = Backbone.View.extend({
el: '#mapCol',

initialize: function() {
_.bindAll(this, 'initMap');
this.initMap();

},

initMap: function() {
// Initialize Basic Openlayers;
var center = new OpenLayers.LonLat(8110203.9998955, 2170000.4068373);
//alert("you are here");
map = new OpenLayers.Map(this.el, {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});

var layers = [];
layers[0] = new OpenLayers.Layer.OSM(); //some more layer will go here
//$(this.el).html(map);
map.addLayers(layers);
map.setCenter(center, 12);

}
});
$(function() {
var map_view = new MapView();

});
})(jQuery);

Here mapCol is the div element where I want my Openlayers map to be displayed. For more details on Backbone and el, there is a beautiful blog post here.

P.S : There may be certain errors in the codes above. please feel free to correct me anytime.

About these ads

One thought on “Ouch! My Bad

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s