Dataset Views and Widgets
diff --git a/docs/models.markdown b/docs/models.markdown index 593979ba..0b5702b4 100644 --- a/docs/models.markdown +++ b/docs/models.markdown @@ -118,20 +118,43 @@ The type list is as follows (brackets indicate possible aliases for specific types - these types will be recognized and normalized to the default type name for that type): -* string (text) - a string -* number (double, float, numeric) - a number including floating point numbers. -* integer (int) - an integer. -* date - a date. The preferred format is YYYY-MM-DD. -* time - a time without a date -* date-time (datetime, timestamp) a date-time. It is recommended this be in ISO 8601 +* **string (text)**: a string +* **number (double, float, numeric)**: a number including floating point numbers. +* **integer (int)**: an integer. +* **date**: a date. The preferred format is YYYY-MM-DD. +* **time**: a time without a date +* **date-time (datetime, timestamp)**: a date-time. It is recommended this be in ISO 8601 format of YYYY-MM- DDThh:mm:ssZ in UTC time. -* boolean (bool) -* binary - base64 representation of binary data. -* geo_point -* geojson -* array -* object (json) -* any - value of field may be any type +* **boolean (bool)** +* **binary**: base64 representation of binary data. +* **geo_point**: as per +NB: types are not validated so you can set the type to
whatever value you like (it does not have to be in the above list). However,
diff --git a/docs/tutorial-backends.markdown b/docs/tutorial-backends.markdown
index fad3b026..2f8c3594 100644
--- a/docs/tutorial-backends.markdown
+++ b/docs/tutorial-backends.markdown
@@ -1,6 +1,6 @@
---
layout: container
-title: Tutorial - Backends - Loading data from different sources using Backends
+title: Loading data from different sources using Backends - Tutorial
recline-deps: true
root: ../
---
@@ -53,23 +53,18 @@ var dataset = recline.Model.Dataset({
{% endhighlight %}
+
+
+
+### Customizing the marker
+
+We're going to show how to replace the default marker with a circular marker.
+Even more exciting, we'll show how to have the marker size vary with an
+attribute of our data. We do the customization by via over-riding the
+pointToLayer function:
+
+{% highlight javascript %}
+{% include tutorial-maps-customize.js %}
+{% endhighlight %}
+
+
+
+
+
+### Customing features (which aren't points)
+
+Leaflet treats points and features differently. To customize features that
+aren't point we will need to bind to the feature layers featureparse event. As
+the feature layer can get re-rendered you don't do this directly but rather set
+the featureparse function on the recline view. For example, for classic popup
+behaviour:
+
+{% highlight javascript %}
+view.featureparse = function (e) {
+ if (e.properties && e.properties.popupContent) {
+ e.layer.bindPopup(e.properties.popupContent);
+ }
+};
+{% endhighlight %}
+
diff --git a/docs/tutorials.html b/docs/tutorials.html
index 476a6f8a..cdd8f846 100644
--- a/docs/tutorials.html
+++ b/docs/tutorials.html
@@ -10,6 +10,8 @@ root: ../
+
-Backend identifiers
+
-### Included Backends
-
-* [gdocs: Google Docs (Spreadsheet)](src/backend.gdocs.html)
-* [csv: CSV files](src/backend.csv.html)
-* [elasticsearch: ElasticSearch](src/backend.elasticsearch.html) - this also covers the DataHub as it has an ElasticSearch compatible API
-* [dataproxy: DataProxy (CSV and XLS on the Web)](src/backend.dataproxy.html)
-* [couchdb: CouchDB](src/backend.couchdb.html)
-
-Backend not on this list that you would like to see? It's very easy to write a
-new backend -- see below for more details.
## Preparing your app
@@ -82,7 +77,7 @@ much more limited if you are just using a Backend. Specifically:
-
+
@@ -98,7 +93,7 @@ For Recline to be able to access a Google Spreadsheet it **must** have been
Backend identifiers How do you know the backend identifier for a given Backend? It's just the name of the 'class' in recline.Backend module (but case-insensitive). E.g. recline.Backend.ElasticSearch can be identified as 'ElasticSearch' or -'elasticsearch'. +'elasticsearch'.
+What Backends are available from Recline? +{% include backend-list.html %} +
+Backend you'd like to see not available? It's easy to write your own – see the Backend reference docs for details of the required API. +
Want a real world example? This Open Data Census micro-app loads
+href="http://dashboard.opengovernmentdata.org/census/">Open Data Census micro-app loads
data from Google Docs and then displays it on a specialist interface combining
a bespoke chooser and a Kartograph (svg-only) map.
@@ -137,7 +132,7 @@ Recline supports ElasticSearch as a full read/write/query backend. It also means
For loading data from CSV files there are 3 cases:
-1. CSV is online but on same domain -- we can then load using AJAX (as no problems with same origin policy)
+1. CSV is online but on same domain or supporting CORS (S3 and Google Storage support CORS!) -- we can then load using AJAX (as no problems with same origin policy)
2. CSV is on local disk -- if your browser supports HTML5 File API we can load the CSV file off disk
3. CSV is online but not on same domain -- use DataProxy (see below)
@@ -211,9 +206,3 @@ You can customize the length of this timeout by setting the following constant:
recline.Backend.DataProxy.timeout = 10000;
{% endhighlight %}
-
-## Writing your own backend
-
-Writing your own backend is easy to do. Details of the required API are in the
-[Backend documentation](backends.html).
-
diff --git a/docs/tutorial-maps.markdown b/docs/tutorial-maps.markdown
new file mode 100644
index 00000000..6d67f62d
--- /dev/null
+++ b/docs/tutorial-maps.markdown
@@ -0,0 +1,106 @@
+---
+layout: container
+title: Maps - Customizing Maps in Recline - Tutorial
+recline-deps: true
+root: ../
+---
+
+
+
+ Doing More with the Map View
+
+
+
+### Preparing your page
+
+See the instructions in the [basic views tutorial](tutorial-views.html).
+
+### Creating a Dataset
+
+Again like the views tutorial:
+
+Here's some example data We are going to work with:
+
+{% highlight javascript %}
+{% include data.js %}
+var dataset = new recline.Model.Dataset({
+ records: data
+});
+{% endhighlight %}
+
+
+
+### General Pointers
+
+Check out the Map reference
+(source) docs. In particular this has details of the various state options.
+
+In addition, remember that Recline's map view is just a relatively lightweight
+wrapper around Leaflet. This means that pretty much anything you can do with
+Leaflet you can do with Recline's map. Specifically a `recline.View.Map`
+instance has the following attributes exposed:
+
+ map: the Leaflet map (L.Map)
+ features: Leaflet GeoJSON layer (L.GeoJSON) containing all the features
+
+(Recline converts all records in a dataset that yield geospatial info to a
+GeoJSON feature and adds it to the features layer).
+
+### Customizing the infobox
+
+The default infobox just shows all of the dataset attributes. Usually you'll
+want something a bit nicer. All you need to do is override the infobox
+function. For example, in our case let's make a nicer title and only show some
+data.
+
+{% highlight javascript %}
+{% include tutorial-maps-infobox.js %}
+{% endhighlight %}
+
+
+ Doing More with the Map View
+
+ This tutorial goes beyond the basic
+ views tutorial and shows you how to do more with maps
+
+Basics – Using the Dataset and its Friends
+
@@ -30,17 +32,32 @@ root: ../
+
+ + +
+ + diff --git a/index.html b/index.html index ed709413..63db771d 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,13 @@ title: Home
Backends – Loading and Storing Data from Remote Sources
++ + +
Views – Grids, Maps, Graphs and More!
++ + diff --git a/index.html b/index.html index ed709413..63db771d 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,13 @@ title: Home
- A simple but powerful library for building data applications in
- pure Javascript and HTML.
+
A simple but powerful library for building data applications in + pure Javascript and HTML.
++ Documentation » + Tutorials » + Demos » +