254 lines
8.6 KiB
JavaScript
254 lines
8.6 KiB
JavaScript
var $ = require('jquery');
|
|
var _ = require('underscore');
|
|
var Backbone = require('backbone');
|
|
|
|
var Map = require('../../../../src/geo/map');
|
|
var TileLayer = require('../../../../src/geo/map/tile-layer');
|
|
var CartoDBLayer = require('../../../../src/geo/map/cartodb-layer');
|
|
var PlainLayer = require('../../../../src/geo/map/plain-layer');
|
|
var LayersCollection = require('../../../../src/geo/map/layers');
|
|
var CartoDBLayerGroup = require('../../../../src/geo/cartodb-layer-group');
|
|
var LeafletMapView = require('../../../../src/geo/leaflet/leaflet-map-view');
|
|
var LeafletTiledLayerView = require('../../../../src/geo/leaflet/leaflet-tiled-layer-view');
|
|
var LeafletPlainLayerView = require('../../../../src/geo/leaflet/leaflet-plain-layer-view');
|
|
var createEngine = require('../../fixtures/engine.fixture.js');
|
|
|
|
describe('geo/leaflet/leaflet-map-view', function () {
|
|
var mapView;
|
|
var map;
|
|
var spy;
|
|
var container;
|
|
var layer;
|
|
var engineMock;
|
|
|
|
beforeEach(function () {
|
|
container = $('<div>').css({
|
|
'height': '200px',
|
|
'width': '200px'
|
|
});
|
|
|
|
map = new Map(null, {
|
|
layersFactory: {},
|
|
attribution: [ '© CARTO' ]
|
|
});
|
|
|
|
spyOn(map, 'setMapViewSize').and.callThrough();
|
|
spyOn(map, 'setPixelToLatLngConverter').and.callThrough();
|
|
spyOn(map, 'setLatLngToPixelConverter').and.callThrough();
|
|
|
|
this.layerGroupModel = new CartoDBLayerGroup({}, { layersCollection: new LayersCollection() });
|
|
spyOn(this.layerGroupModel, 'hasTileURLTemplates').and.returnValue(true);
|
|
spyOn(this.layerGroupModel, 'getTileURLTemplate').and.returnValue('http://documentation.cartodb.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/0/{z}/{x}/{y}.png');
|
|
|
|
mapView = new LeafletMapView({
|
|
el: container,
|
|
mapModel: map,
|
|
engine: new Backbone.Model(),
|
|
layerGroupModel: this.layerGroupModel
|
|
});
|
|
|
|
mapView.render();
|
|
|
|
var layerURL = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png';
|
|
layer = new TileLayer({ urlTemplate: layerURL }, { engine: {} });
|
|
|
|
spy = jasmine.createSpyObj('spy', ['zoomChanged', 'centerChanged', 'keyboardChanged', 'changed']);
|
|
map.bind('change:zoom', spy.zoomChanged);
|
|
map.bind('change:keyboard', spy.keyboardChanged);
|
|
map.bind('change:center', spy.centerChanged);
|
|
map.bind('change', spy.changed);
|
|
|
|
engineMock = createEngine();
|
|
});
|
|
|
|
it('should change bounds when center is set', function () {
|
|
var spy = jasmine.createSpy('change:view_bounds_ne');
|
|
spyOn(map, 'getViewBounds');
|
|
map.bind('change:view_bounds_ne', spy);
|
|
map.set('center', [10, 10]);
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(map.getViewBounds).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should allow adding a layer', function () {
|
|
map.addLayer(layer);
|
|
expect(map.layers.length).toEqual(1);
|
|
});
|
|
|
|
it('should add layers on reset', function () {
|
|
map.layers.reset([
|
|
layer
|
|
]);
|
|
expect(map.layers.length).toEqual(1);
|
|
});
|
|
|
|
it('should allow removing a layer', function () {
|
|
map.addLayer(layer);
|
|
map.removeLayer(layer);
|
|
expect(map.layers.length).toEqual(0);
|
|
expect(_.size(mapView._layerViews)).toEqual(0);
|
|
});
|
|
|
|
it('should allow removing a layer by index', function () {
|
|
map.addLayer(layer);
|
|
map.removeLayerAt(0);
|
|
expect(map.layers.length).toEqual(0);
|
|
});
|
|
|
|
it('should allow removing a layer by Cid', function () {
|
|
var cid = map.addLayer(layer);
|
|
map.removeLayerByCid(cid);
|
|
expect(map.layers.length).toEqual(0);
|
|
});
|
|
|
|
it('should create a TiledLayerView when the layer is Tiled', function () {
|
|
var lyr = map.addLayer(layer);
|
|
var layerView = mapView.getLayerViewByLayerCid(lyr);
|
|
expect(LeafletTiledLayerView.prototype.isPrototypeOf(layerView)).isPrototypeOf();
|
|
});
|
|
|
|
it('should create a PlainLayer when the layer is cartodb', function () {
|
|
layer = new PlainLayer(null, { engine: {} });
|
|
var lyr = map.addLayer(layer);
|
|
var layerView = mapView.getLayerViewByLayerCid(lyr);
|
|
expect(layerView.setQuery).not.toEqual(LeafletPlainLayerView);
|
|
});
|
|
|
|
it('should insert layers in specified order', function () {
|
|
var tileLayer = new TileLayer({ urlTemplate: 'http://tilelayer1.com' }, { engine: {} });
|
|
map.addLayer(tileLayer);
|
|
|
|
var tileLayer2 = new TileLayer({ urlTemplate: 'http://tilelayer2.com' }, { engine: {} });
|
|
map.addLayer(tileLayer2, { at: 0 });
|
|
|
|
expect(mapView.getLayerViewByLayerCid(tileLayer.cid).leafletLayer.options.zIndex).toEqual(1);
|
|
expect(mapView.getLayerViewByLayerCid(tileLayer2.cid).leafletLayer.options.zIndex).toEqual(0);
|
|
});
|
|
|
|
it('should remove all layers when map view is cleaned', function () {
|
|
var cartoDBLayer1 = new CartoDBLayer({ meta: { cartocss: '#layer {}' } }, { engine: engineMock });
|
|
var cartoDBLayer2 = new CartoDBLayer({ meta: { cartocss: '#layer {}' } }, { engine: engineMock });
|
|
var tileLayer = new TileLayer({ urlTemplate: 'test' }, { engine: {} });
|
|
|
|
map.addLayer(cartoDBLayer1);
|
|
map.addLayer(cartoDBLayer2);
|
|
map.addLayer(tileLayer);
|
|
|
|
expect(_.size(mapView._layerViews)).toEqual(3);
|
|
|
|
var layerGroupView = mapView.getLayerViewByLayerCid(cartoDBLayer1.cid);
|
|
spyOn(layerGroupView, 'remove');
|
|
|
|
var tileLayerView = mapView.getLayerViewByLayerCid(tileLayer.cid);
|
|
spyOn(tileLayerView, 'remove');
|
|
|
|
mapView.clean();
|
|
|
|
expect(_.size(mapView._layerViews)).toEqual(0);
|
|
expect(layerGroupView.remove).toHaveBeenCalled();
|
|
expect(tileLayerView.remove).toHaveBeenCalled();
|
|
expect(mapView.layerGroupModel).not.toBeDefined();
|
|
});
|
|
|
|
it("should not add a layer view when it can't be created", function () {
|
|
var layer = new TileLayer({type: 'cartojs-test'}, { engine: {} });
|
|
map.addLayer(layer);
|
|
expect(_.size(mapView._layerViews)).toEqual(0);
|
|
});
|
|
|
|
describe('attributions', function () {
|
|
it('should not render Leaflet attributions', function () {
|
|
var attributions = mapView.$el.find('.leaflet-control-attribution');
|
|
expect(attributions.text()).toEqual('');
|
|
});
|
|
});
|
|
|
|
it('should disable leaflet dragging and double click zooming when the map has drag disabled', function () {
|
|
var container = $('<div>').css({
|
|
'height': '200px',
|
|
'width': '200px'
|
|
});
|
|
var map = new Map({
|
|
drag: false
|
|
}, {
|
|
layersFactory: {}
|
|
});
|
|
var mapView = new LeafletMapView({
|
|
el: container,
|
|
mapModel: map,
|
|
engine: new Backbone.Model(),
|
|
layerGroupModel: new Backbone.Model()
|
|
});
|
|
mapView.render();
|
|
|
|
expect(mapView._leafletMap.dragging.enabled()).toBeFalsy();
|
|
expect(mapView._leafletMap.doubleClickZoom.enabled()).toBeFalsy();
|
|
});
|
|
|
|
it('should "forward" a dragend event to the map model', function () {
|
|
var container = $('<div>').css({
|
|
'height': '200px',
|
|
'width': '200px'
|
|
});
|
|
var map = new Map({
|
|
drag: false
|
|
}, {
|
|
layersFactory: {}
|
|
});
|
|
var mapView = new LeafletMapView({
|
|
el: container,
|
|
mapModel: map,
|
|
engine: new Backbone.Model(),
|
|
layerGroupModel: new Backbone.Model()
|
|
});
|
|
mapView.render();
|
|
|
|
spyOn(map, 'trigger');
|
|
|
|
mapView._leafletMap.fire('moveend');
|
|
|
|
expect(map.trigger).toHaveBeenCalledWith('moveend', jasmine.any(Object));
|
|
});
|
|
|
|
it('should update mapView size on resize', function () {
|
|
mapView._leafletMap.fire('resize');
|
|
expect(map.setMapViewSize).toHaveBeenCalled();
|
|
});
|
|
|
|
describe('converters', function () {
|
|
it('should set converters', function () {
|
|
expect(map.setPixelToLatLngConverter).toHaveBeenCalled();
|
|
expect(map.setLatLngToPixelConverter).toHaveBeenCalled();
|
|
expect(map._pixelToLatLngConverter).toBeDefined();
|
|
expect(map._latLngToPixelConverter).toBeDefined();
|
|
});
|
|
|
|
it('should call native methods', function () {
|
|
spyOn(mapView._leafletMap, 'latLngToContainerPoint').and.callThrough();
|
|
spyOn(mapView._leafletMap, 'containerPointToLatLng').and.callThrough();
|
|
|
|
var pixelToLatLng = map.pixelToLatLng();
|
|
pixelToLatLng({x: 0, y: 0});
|
|
expect(mapView._leafletMap.containerPointToLatLng).toHaveBeenCalled();
|
|
|
|
var latLngToPixel = map.latLngToPixel();
|
|
latLngToPixel([0, 0]);
|
|
expect(mapView._leafletMap.latLngToContainerPoint).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('.invalidateSize', function () {
|
|
it('should invalidate size in Leaflet and "re-center"', function () {
|
|
spyOn(mapView._leafletMap, 'invalidateSize');
|
|
spyOn(mapView._leafletMap, 'setView');
|
|
var center = mapView.map.get('center');
|
|
var zoom = mapView.map.get('zoom');
|
|
|
|
mapView.invalidateSize();
|
|
|
|
expect(mapView._leafletMap.setView).toHaveBeenCalledWith(center, zoom, jasmine.any(Object));
|
|
expect(mapView._leafletMap.invalidateSize).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|