[#153,#212,view/map][m]: fixes #153 bug re map rendering (see issue for more) and in process did refactoring of map view in line with #212.

* multiview: refactored to call render on all views as that is new setup for #212 (and also needed for #153)
* tutorial-views: call render now which fixes bug (this was specific issue reported in #153)

docs/tutorial-views.markdown

@@ -224,6 +224,6 @@ var map = new recline.View.Map({
   model: dataset
 });
 $el.append(map.el);
-map.redraw();
+map.render();
 </script>
 

src/view.map.js

@@ -24,11 +24,10 @@ this.recline.View = this.recline.View || {};
 //   }
 // </pre>
 my.Map = Backbone.View.extend({
-  tagName:  'div',
-  className: 'recline-map',
-
   template: ' \
-    <div class="panel map"></div> \
+    <div class="recline-map"> \
+      <div class="panel map"></div> \
+    </div> \
 ',
 
   // These are the default (case-insensitive) names of field that are used if found.
@@ -40,6 +39,18 @@ my.Map = Backbone.View.extend({
   initialize: function(options) {
     var self = this;
     this.el = $(this.el);
+    this.visible = true;
+    this.mapReady = false;
+
+    var stateData = _.extend({
+        geomField: null,
+        lonField: null,
+        latField: null,
+        autoZoom: true
+      },
+      options.state
+    );
+    this.state = new recline.Model.ObjectState(stateData);
 
     // Listen to changes in the fields
     this.model.fields.bind('change', function() {
@@ -56,15 +67,6 @@ my.Map = Backbone.View.extend({
     this.model.records.bind('remove', function(doc){self.redraw('remove',doc)});
     this.model.records.bind('reset', function(){self.redraw('reset')});
 
-    var stateData = _.extend({
-        geomField: null,
-        lonField: null,
-        latField: null,
-        autoZoom: true
-      },
-      options.state
-    );
-    this.state = new recline.Model.ObjectState(stateData);
     this.menu = new my.MapMenu({
       model: this.model,
       state: this.state.toJSON()
@@ -74,10 +76,6 @@ my.Map = Backbone.View.extend({
       self.redraw();
     });
     this.elSidebar = this.menu.el;
-
-    this.mapReady = false;
-    this.render();
-    this.redraw();
   },
 
   // ### Public: Adds the necessary elements to the page.
@@ -89,6 +87,7 @@ my.Map = Backbone.View.extend({
     htmls = Mustache.render(this.template, this.model.toTemplateJSON());
     $(this.el).html(htmls);
     this.$map = this.el.find('.panel.map');
+    this.redraw();
     return this;
   },
 

src/view.multiview.js

@@ -255,6 +255,7 @@ my.MultiView = Backbone.View.extend({
 
     // the main views
     _.each(this.pageViews, function(view, pageName) {
+      view.view.render();
       $dataViewContainer.append(view.view.el);
       if (view.view.elSidebar) {
         $dataSidebar.append(view.view.elSidebar);

test/index.html

@@ -6,7 +6,9 @@
   <link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen" />
   <!-- need this stylesheet because flot will complain if canvas does not have a height -->
   <link rel="stylesheet" href="../css/graph.css" type="text/css" media="screen" />
-  <link rel="stylesheet" href="../vendor/timeline/20120520/js/timeline.js" type="text/css" media="screen" />
+  <link rel="stylesheet" href="../vendor/timeline/20120520/css/timeline.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.css">
+  <link rel="stylesheet" href="../css/map.css">
 
   <script type="text/javascript" src="../vendor/jquery/1.7.1/jquery.js"></script>
   <script type="text/javascript" src="../vendor/underscore/1.1.6/underscore.js"></script>