Change default tiles for map view, allow customization

After the MapQuest debacle, there was a patch merged that replaced the
MapQuest tiles with the OpenStreetMap ones (#501). IMO these are not a
good default choice because while they might be fine for a small Recline
project, heavy usage of them goes against their Terms of Use:

http://wiki.openstreetmap.org/wiki/Tile_usage_policy

More specifically:

> Heavy use (e.g. distributing an app that uses tiles from openstreetmap.org)
> is forbidden without prior permission from the System Administrators

Popular CKAN instances that use Recline are likely to fall in this
category.

And also:

> Highly Recommended: Do not hardcode any URL at tile.openstreetmap.org
> into an app.

This patch replaces the tiles with the Terrain tileset from Stamen
(http://maps.stamen.com), which have more liberal terms.

But more crucially, as this is something that different people will have
different views on, it allows you to configure the tiles used by passing
custom options to the view constructor, eg:

    view = new recline.View.Map({
        model: dataset,
        mapTilesURL: '//{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/{z}/{x}/{y}.png?access_token=pk.XXXX',
        mapTilesAttribution: '© MapBox etc..',
        mapTilesSubdomains: 'ab'
    })

So everybody (and apps integrating Recline like CKAN) can configure the tiles
as they want.

src/view.map.js

@@ -454,16 +454,27 @@ my.Map = Backbone.View.extend({
 
   // Private: Sets up the Leaflet map control and the features layer.
   //
-  // The map uses a base layer from [OpenStreetMap.org](http://openstreetmap.org) based
-  // on [OpenStreetMap data](http://openstreetmap.org).
+  // The map uses a base layer from [Stamen](http://maps.stamen.com) based
+  // on [OpenStreetMap data](http://openstreetmap.org) by default, but it can
+  // be configured passing the `mapTilesURL` and `mapTilesAttribution` options
+  // (`mapTilesSubdomains` is also supported), eg:
+  //
+  //    view = new recline.View.Map({
+  //        model: dataset,
+  //        mapTilesURL: '//{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/{z}/{x}/{y}.png?access_token=pk.XXXX',
+  //        mapTilesAttribution: '© MapBox etc..',
+  //        mapTilesSubdomains: 'ab'
+  //    })
+  //
   //
   _setupMap: function(){
     var self = this;
     this.map = new L.Map(this.$map.get(0));
+    var mapUrl = this.options.mapTilesURL || 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png';
+    var attribution = this.options.mapTilesAttribution ||'Map tiles by <a href="http://stamen.com">Stamen Design</a> (<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>). Data by <a href="http://openstreetmap.org">OpenStreetMap</a> (<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>)';
+    var subdomains = this.options.mapTilesSubdomains || 'abc';
 
-    var mapUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-    var osmAttribution = '©<a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a> contributors';
-    var bg = new L.TileLayer(mapUrl, {maxZoom: 19, attribution: osmAttribution});
+    var bg = new L.TileLayer(mapUrl, {maxZoom: 19, attribution: attribution, subdomains: subdomains});
     this.map.addLayer(bg);
 
     this.markers = new L.MarkerClusterGroup(this._clusterOptions);

test/view.map.test.js

@@ -249,6 +249,30 @@ test('MapMenu', function () {
   assertPresent('.editor-field-type', controls.el);
 });
 
+
+test('Custom map options', function () {
+  var dataset = GeoJSONFixture.getDataset();
+  var view = new recline.View.Map({
+    model: dataset,
+    mapTilesURL: 'http://example.com/{z}/{y}/{x}.png',
+    mapTilesAttribution: '© MyTiles',
+    mapTilesSubdomains: 'ab'
+  });
+  $('.fixtures').append(view.el);
+  view.render();
+
+  var tiles = view.$el.find('.leaflet-tile-pane');
+
+  assertPresent(tiles);
+
+  ok(tiles.find('.leaflet-tile')[0].src.startsWith('http://example.com'));
+
+  ok(view.$el.find('.leaflet-control-attribution').text().indexOf('MyTiles') !== -1);
+
+  view.remove();
+});
+
+
 var _getFeaturesCount = function(features){
   var cnt = 0;
   _.each(features._layers, function(layer) {