[#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

@@ -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();
+

_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 = '<h3>' + record.get('country') + ' &ndash; ' + record.get('date') + '</h3>';
+  html += 'id: ' + record.get('id');
+  return html;
+}
+view.render();
+