From 7527cf6089d782ab8f16ac829f7bebb48c010257 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Sun, 20 May 2012 18:08:08 +0100 Subject: [PATCH] [doc/example-quickstart][m]: map example in quickstart plus minor refactoring. --- example-quickstart.markdown | 78 ++++++++++++++++++++++++++++++++----- recline.js | 58 ++++++++++++++------------- 2 files changed, 98 insertions(+), 38 deletions(-) diff --git a/example-quickstart.markdown b/example-quickstart.markdown index 266d8e6c..35110e96 100644 --- a/example-quickstart.markdown +++ b/example-quickstart.markdown @@ -7,11 +7,11 @@ recline-deps: true

Recline Quickstart Guide +
+ This step-by-step guide will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph and map to display it.

-This step-by-step guide will quickly get you started with Recline basics, including creating a dataset from local data and setting up a data grid to display this data. - ### Preparing your page Before writing any code with Recline, you need to do the following preparation steps on your page: @@ -25,12 +25,12 @@ Before writing any code with Recline, you need to do the following preparation s {% endhighlight %} 3. Include the relevant Javascript files somewhere on the page (preferably before body close tag): - {% highlight html %} - + {% highlight html %} + + + +{% endhighlight %} + +Next, create a new div for the graph: {% highlight html %}
@@ -130,8 +141,9 @@ $el.append(graph.el); graph.render(); -But I wanted to create a graph not a graph editor. Can we do that? Yes you can! -All you need to do is set the 'state' of the graph view: +But suppose you wanted to create a graph not a graph editor. This is +straightforward to do -- all we need to do is set the 'state' of the graph +view: {% highlight javascript %} var $el = $('#mygraph'); @@ -142,8 +154,7 @@ var graph = new recline.View.Graph({ series: ["x", "z"] } }); -$el.append(grid.el); -graph.render(); +$el.append(graph.el); graph.redraw(); {% endhighlight %} @@ -162,7 +173,6 @@ var graph = new recline.View.Graph({ } }); $el.append(graph.el); -graph.render(); graph.redraw(); @@ -174,3 +184,51 @@ documentation as well as the documentation of individual views such as the Graph View. +### Creating a Map + +Now, let's create a map of this dataset using the lon/lat information which is +present on these data points. + +First, add the additional dependencies for the map view. These are the Leaflet +library and the Recline Map view: + +{% highlight html %} + + + + + + + + +{% endhighlight %} + +Now, create a new div for the map: + +{% highlight html %} +
+{% endhighlight %} + +Now let's create the map, we will use the existing dataset object created +previously: + +{% highlight javascript %} +var $el = $('#mymap'); +var map = new recline.View.Map({ + model: dataset +}); +$el.append(map.el); +{% endhighlight %} + +
 
+ + + diff --git a/recline.js b/recline.js index ec052c98..5672ee47 100644 --- a/recline.js +++ b/recline.js @@ -1063,7 +1063,7 @@ my.Grid = Backbone.View.extend({ initialize: function(modelEtc) { var self = this; this.el = $(this.el); - _.bindAll(this, 'render'); + _.bindAll(this, 'render', 'onHorizontalScroll'); this.model.currentDocuments.bind('add', this.render); this.model.currentDocuments.bind('reset', this.render); this.model.currentDocuments.bind('remove', this.render); @@ -1079,7 +1079,9 @@ my.Grid = Backbone.View.extend({ 'click .column-header-menu .data-table-menu li a': 'onColumnHeaderClick', 'click .row-header-menu': 'onRowHeaderClick', 'click .root-header-menu': 'onRootHeaderClick', - 'click .data-table-menu li a': 'onMenuClick' + 'click .data-table-menu li a': 'onMenuClick', + // does not work here so done at end of render function + // 'scroll .recline-grid tbody': 'onHorizontalScroll' }, // ====================================================== @@ -1174,6 +1176,11 @@ my.Grid = Backbone.View.extend({ this.render(); }, + onHorizontalScroll: function(e) { + var currentScroll = $(e.target).scrollLeft(); + this.el.find('.recline-grid thead tr').scrollLeft(currentScroll); + }, + // ====================================================== // #### Templating template: ' \ @@ -1192,7 +1199,7 @@ my.Grid = Backbone.View.extend({ \ {{/notEmpty}} \ {{#fields}} \ - \ + \
\ \
\ \ {{#cells}} \ - \ + \
\   \
{{{value}}}
\ @@ -1497,7 +1506,7 @@ my.Map = Backbone.View.extend({
\ ', - // These are the default field names that will be used if found. + // These are the default (case-insensitive) names of field that are used if found. // If not found, the user will need to define the fields via the editor. latitudeFieldNames: ['lat','latitude'], longitudeFieldNames: ['lon','longitude'], @@ -1563,7 +1572,7 @@ my.Map = Backbone.View.extend({ this.render(); }, - // Public: Adds the necessary elements to the page. + // ### Public: Adds the necessary elements to the page. // // Also sets up the editor fields and the map if necessary. render: function() { @@ -1585,22 +1594,11 @@ my.Map = Backbone.View.extend({ $('#editor-field-type-latlon').attr('checked','checked').change(); } } - - this.model.bind('query:done', function() { - if (!self.geomReady){ - self._setupGeometryField(); - } - - if (!self.mapReady){ - self._setupMap(); - } - self.redraw(); - }); - + this.redraw(); return this; }, - // Public: Redraws the features on the map according to the action provided + // ### Public: Redraws the features on the map according to the action provided // // Actions can be: // @@ -1608,23 +1606,27 @@ my.Map = Backbone.View.extend({ // * add: Add one or n features (documents) // * remove: Remove one or n features (documents) // * refresh: Clear existing features and add all current documents - // - redraw: function(action,doc){ + redraw: function(action, doc){ var self = this; action = action || 'refresh'; + // try to set things up if not already + if (!self.geomReady){ + self._setupGeometryField(); + } + if (!self.mapReady){ + self._setupMap(); + } if (this.geomReady && this.mapReady){ - if (action == 'reset'){ + if (action == 'reset' || action == 'refresh'){ this.features.clearLayers(); + this._add(this.model.currentDocuments.models); } else if (action == 'add' && doc){ this._add(doc); } else if (action == 'remove' && doc){ this._remove(doc); - } else if (action == 'refresh'){ - this.features.clearLayers(); - this._add(this.model.currentDocuments.models); } - if (action != 'reset' && this.autoZoom){ + if (this.autoZoom){ if (this.visible){ this._zoomToFeatures(); } else {