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) {