[doc/example-quickstart][m]: map example in quickstart plus minor refactoring.
This commit is contained in:
Rufus Pollock
parent
f6991800a3
commit
7527cf6089
@ -7,11 +7,11 @@ recline-deps: true
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Recline Quickstart Guide
|
||||
<br />
|
||||
<small>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.</small>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
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
|
||||
<link rel="stylesheet" href="css/grid.css" />{% endhighlight %}
|
||||
|
||||
3. Include the relevant Javascript files somewhere on the page (preferably before body close tag):
|
||||
{% highlight html %}
|
||||
<!-- 3rd party dependencies -->
|
||||
{% highlight html %}<!-- 3rd party dependencies -->
|
||||
<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>
|
||||
<script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script>
|
||||
<script type="text/javascript" src="vendor/jquery.mustache.js"></script>
|
||||
<script type="text/javascript" src="vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||||
<!-- note that we could include individual components rather than whole of recline e.g.
|
||||
<script type="text/javascript" src="src/model.js"></script>
|
||||
<script type="text/javascript" src="src/backend/base.js"></script>
|
||||
@ -98,7 +98,18 @@ grid.render();
|
||||
|
||||
Let's create a graph view to display a line graph for this dataset.
|
||||
|
||||
First, create a new div for the graph:
|
||||
First, add the additional dependencies for this view. These are the Flot
|
||||
library and the Recline Graph view:
|
||||
|
||||
{% highlight html %}
|
||||
<link rel="stylesheet" href="css/graph.css">
|
||||
|
||||
<!-- javascript -->
|
||||
<script type="text/javascript" src="vendor/jquery.flot/0.7/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="src/view-graph.js"></script>
|
||||
{% endhighlight %}
|
||||
|
||||
Next, create a new div for the graph:
|
||||
|
||||
{% highlight html %}
|
||||
<div id="mygraph"></div>
|
||||
@ -130,8 +141,9 @@ $el.append(graph.el);
|
||||
graph.render();
|
||||
</script>
|
||||
|
||||
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();
|
||||
</script>
|
||||
|
||||
@ -174,3 +184,51 @@ documentation</a> as well as the documentation of individual views such as the
|
||||
<a href="../docs/view-graph.html">Graph View</a>.
|
||||
</div>
|
||||
|
||||
### 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 %}
|
||||
<!-- css -->
|
||||
<link rel="stylesheet" href="vendor/leaflet/0.3.1/leaflet.css">
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="css/map.css">
|
||||
|
||||
<!-- javascript -->
|
||||
<script type="text/javascript" src="vendor/leaflet/0.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="src/view-map.js"></script>
|
||||
{% endhighlight %}
|
||||
|
||||
Now, create a new div for the map:
|
||||
|
||||
{% highlight html %}
|
||||
<div id="mymap"></div>
|
||||
{% 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 %}
|
||||
|
||||
<div id="mymap"> </div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var $el = $('#mymap');
|
||||
var map = new recline.View.Map({
|
||||
model: dataset
|
||||
});
|
||||
$el.append(map.el);
|
||||
</script>
|
||||
|
||||
|
||||
58
recline.js
58
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({
|
||||
</th> \
|
||||
{{/notEmpty}} \
|
||||
{{#fields}} \
|
||||
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px; max-width: {{width}}px;"> \
|
||||
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \
|
||||
<div class="btn-group column-header-menu"> \
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
|
||||
<ul class="dropdown-menu data-table-menu pull-right"> \
|
||||
@ -1211,7 +1218,7 @@ my.Grid = Backbone.View.extend({
|
||||
<span class="column-header-name">{{label}}</span> \
|
||||
</th> \
|
||||
{{/fields}} \
|
||||
<th class="last-header" style="width: {{lastHeaderWidth}}px; padding: 0; margin: 0;"></th> \
|
||||
<th class="last-header" style="width: {{lastHeaderWidth}}px; max-width: {{lastHeaderWidth}}px; min-width: {{lastHeaderWidth}}px; padding: 0; margin: 0;"></th> \
|
||||
</tr> \
|
||||
</thead> \
|
||||
<tbody class="scroll-content"></tbody> \
|
||||
@ -1241,7 +1248,8 @@ my.Grid = Backbone.View.extend({
|
||||
// compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)
|
||||
var fullWidth = self.el.width() - 20 - 10 * numFields - this.scrollbarDimensions.width;
|
||||
var width = parseInt(Math.max(50, fullWidth / numFields));
|
||||
var remainder = fullWidth - numFields * width;
|
||||
// if columns extend outside viewport then remainder is 0
|
||||
var remainder = Math.max(fullWidth - numFields * width,0);
|
||||
_.each(this.fields, function(field, idx) {
|
||||
// add the remainder to the first field width so we make up full col
|
||||
if (idx == 0) {
|
||||
@ -1268,6 +1276,7 @@ my.Grid = Backbone.View.extend({
|
||||
this.el.find('th.last-header').hide();
|
||||
}
|
||||
this.el.find('.recline-grid').toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
|
||||
this.el.find('.recline-grid tbody').scroll(this.onHorizontalScroll);
|
||||
return this;
|
||||
},
|
||||
|
||||
@ -1317,7 +1326,7 @@ my.GridRow = Backbone.View.extend({
|
||||
</div> \
|
||||
</td> \
|
||||
{{#cells}} \
|
||||
<td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px;"> \
|
||||
<td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \
|
||||
<div class="data-table-cell-content"> \
|
||||
<a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell"> </a> \
|
||||
<div class="data-table-cell-value">{{{value}}}</div> \
|
||||
@ -1497,7 +1506,7 @@ my.Map = Backbone.View.extend({
|
||||
</div> \
|
||||
',
|
||||
|
||||
// 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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user