diff --git a/src/view.map.js b/src/view.map.js
index 3d858612..be837c2b 100644
--- a/src/view.map.js
+++ b/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 Stamen Design (CC BY 3.0). Data by OpenStreetMap (CC BY SA)';
+ var subdomains = this.options.mapTilesSubdomains || 'abc';
- var mapUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
- var osmAttribution = '©OpenStreetMap 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);
diff --git a/test/view.map.test.js b/test/view.map.test.js
index 26b36ecb..aa7f78f9 100644
--- a/test/view.map.test.js
+++ b/test/view.map.test.js
@@ -249,6 +249,29 @@ 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.indexOf('http://example.com') === 0);
+ 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) {