knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #502 from okfn/new-tiles-custom-options

Browse Source 
Change default tiles for map view, allow customization
This commit is contained in:
Adrià Mercader 2016-08-12 12:12:54 +01:00 committed by GitHub
commit 88cbe06e10
2 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/view.map.js
View File

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

23
test/view.map.test.js
View File

@ -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: '&copy; 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) {