From 2684bfed0eb657ee93c32c2169418cfa130bc55f Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Tue, 23 Oct 2012 00:27:25 +0100 Subject: [PATCH] [#223,tutorial/maps][m]: start of a in-depth map tutorial with instructions on customizing infoboxes and markers. * Also add to tutorials.html (and refactor that page a bit) --- _includes/tutorial-maps-customize.js | 17 +++++ _includes/tutorial-maps-infobox.js | 14 ++++ docs/tutorial-maps.markdown | 106 +++++++++++++++++++++++++++ docs/tutorials.html | 19 ++++- 4 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 _includes/tutorial-maps-customize.js create mode 100644 _includes/tutorial-maps-infobox.js create mode 100644 docs/tutorial-maps.markdown diff --git a/_includes/tutorial-maps-customize.js b/_includes/tutorial-maps-customize.js new file mode 100644 index 00000000..3433e3a7 --- /dev/null +++ b/_includes/tutorial-maps-customize.js @@ -0,0 +1,17 @@ +var $el = $('#map-customize'); +var view = new recline.View.Map({ + el: $el, + model: dataset +}); + +view.geoJsonLayerOptions.pointToLayer = function(feature, latlng) { + // Look up Record so we can use it to customize size of marker + // note that 'this' is specially bound for us to parent view + that feature + // stores record cid + var record = this.model.records.getByCid(feature.properties.cid); + var marker = new L.CircleMarker(latlng, { radius: record.get('x') * 3 }); + marker.bindPopup(feature.properties.popupContent); + return marker; +} +view.render(); + diff --git a/_includes/tutorial-maps-infobox.js b/_includes/tutorial-maps-infobox.js new file mode 100644 index 00000000..1baf7729 --- /dev/null +++ b/_includes/tutorial-maps-infobox.js @@ -0,0 +1,14 @@ +// this element will need to exist! +var $el = $('#map-infobox'); +var view = new recline.View.Map({ + el: $el, + model: dataset +}); +// record is the recline.Model.Record object +view.infobox = function(record) { + var html = '

' + record.get('country') + ' – ' + record.get('date') + '

'; + html += 'id: ' + record.get('id'); + return html; +} +view.render(); + 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 +
+ This tutorial goes beyond the basic + views tutorial and shows you how to do more with maps +

+
+ +### 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 %} + +
 
+ + + +### 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: ../ +

Basics – Using the Dataset and its Friends

+
@@ -30,17 +32,32 @@ root: ../
-
+

Backends – Loading and Storing Data from Remote Sources

+
+

Backends: loading data from Google Docs, Local CSV, DataHub & more ...

+
+
+ +

Views – Grids, Maps, Graphs and More!

+
+ +
+

Views Quickstart - Grids, Graphs and Maps

+
+
+

Doing more with maps

+
+