From 50b33f3ccffa8177cb9ab946c543a3ef18f8c881 Mon Sep 17 00:00:00 2001 From: amercader Date: Wed, 3 Aug 2016 10:52:01 +0100 Subject: [PATCH 1/2] 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 | 21 ++++++++++++++++----- test/view.map.test.js | 24 ++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 5 deletions(-) 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..5b9e85d8 100644 --- a/test/view.map.test.js +++ b/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) { From 9e284dc8b75bb75dd1c674d5506400568083657a Mon Sep 17 00:00:00 2001 From: amercader Date: Fri, 12 Aug 2016 11:30:17 +0100 Subject: [PATCH 2/2] Fix test for older ES versions --- test/view.map.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/view.map.test.js b/test/view.map.test.js index 5b9e85d8..aa7f78f9 100644 --- a/test/view.map.test.js +++ b/test/view.map.test.js @@ -265,8 +265,7 @@ test('Custom map options', function () { assertPresent(tiles); - ok(tiles.find('.leaflet-tile')[0].src.startsWith('http://example.com')); - + 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();