Skip to content

Commit 239a837

Browse files
jonmmeasejonmmease
authored
Merge pull request #4418 from plotly/mapbox_react_updates
Change 1: Don't update map position while panning/zooming. Change 2: Use `updateImage` to update image, rather than delete and recreate layer.
2 parents fe8fca4 + 4158916 commit 239a837

File tree

3 files changed

+143
-11
lines changed

3 files changed

+143
-11
lines changed

‎src/plots/mapbox/layers.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ proto.update = function update(opts) {
3838
// IMPORTANT: must create source before layer to not cause errors
3939
this.updateSource(opts);
4040
this.updateLayer(opts);
41+
} else if(this.needsNewImage(opts)) {
42+
this.updateImage(opts);
4143
} else if(this.needsNewSource(opts)) {
4244
// IMPORTANT: must delete layer before source to not cause errors
4345
this.removeLayer();
@@ -52,6 +54,18 @@ proto.update = function update(opts) {
5254
this.visible = isVisible(opts);
5355
};
5456

57+
proto.needsNewImage = function(opts) {
58+
var map = this.subplot.map;
59+
return (
60+
map.getSource(this.idSource) &&
61+
this.sourceType === 'image' &&
62+
opts.sourcetype === 'image' &&
63+
(this.source !== opts.source ||
64+
JSON.stringify(this.coordinates) !==
65+
JSON.stringify(opts.coordinates))
66+
);
67+
};
68+
5569
proto.needsNewSource = function(opts) {
5670
// for some reason changing layer to 'fill' or 'symbol'
5771
// w/o changing the source throws an exception in mapbox-gl 0.18 ;
@@ -70,6 +84,13 @@ proto.needsNewLayer = function(opts) {
7084
);
7185
};
7286

87+
proto.updateImage = function(opts) {
88+
var map = this.subplot.map;
89+
map.getSource(this.idSource).updateImage({
90+
url: opts.source, coordinates: opts.coordinates
91+
});
92+
};
93+
7394
proto.updateSource = function(opts) {
7495
var map = this.subplot.map;
7596

@@ -223,6 +244,11 @@ function convertOpts(opts) {
223244
'text-opacity': opts.opacity
224245
});
225246
break;
247+
case 'raster':
248+
Lib.extendFlat(paint, {
249+
'raster-fade-duration': 0
250+
});
251+
break;
226252
}
227253

228254
return {

‎src/plots/mapbox/mapbox.js‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ function Mapbox(gd, id) {
4949
this.traceHash = {};
5050
this.layerList = [];
5151
this.belowLookup = {};
52+
this.dragging = false;
53+
this.wheeling = false;
5254
}
5355

5456
var proto = Mapbox.prototype;
@@ -350,10 +352,12 @@ proto.updateLayout = function(fullLayout) {
350352
var map = this.map;
351353
var opts = fullLayout[this.id];
352354

353-
map.setCenter(convertCenter(opts.center));
354-
map.setZoom(opts.zoom);
355-
map.setBearing(opts.bearing);
356-
map.setPitch(opts.pitch);
355+
if(!this.dragging && !this.wheeling) {
356+
map.setCenter(convertCenter(opts.center));
357+
map.setZoom(opts.zoom);
358+
map.setBearing(opts.bearing);
359+
map.setPitch(opts.pitch);
360+
}
357361

358362
this.updateLayers(fullLayout);
359363
this.updateFramework(fullLayout);
@@ -430,8 +434,6 @@ proto.initFx = function(calcData, fullLayout) {
430434
var gd = self.gd;
431435
var map = self.map;
432436

433-
var wheeling = false;
434-
435437
// keep track of pan / zoom in user layout and emit relayout event
436438
map.on('moveend', function(evt) {
437439
if(!self.map) return;
@@ -446,7 +448,7 @@ proto.initFx = function(calcData, fullLayout) {
446448
// mouse target (filtering out API calls) to not
447449
// duplicate 'plotly_relayout' events.
448450

449-
if(evt.originalEvent || wheeling) {
451+
if(evt.originalEvent || self.wheeling) {
450452
var optsNow = fullLayoutNow[self.id];
451453
Registry.call('_storeDirectGUIEdit', gd.layout, fullLayoutNow._preGUI, self.getViewEdits(optsNow));
452454

@@ -455,18 +457,21 @@ proto.initFx = function(calcData, fullLayout) {
455457
optsNow._input.zoom = optsNow.zoom = viewNow.zoom;
456458
optsNow._input.bearing = optsNow.bearing = viewNow.bearing;
457459
optsNow._input.pitch = optsNow.pitch = viewNow.pitch;
458-
459460
gd.emit('plotly_relayout', self.getViewEditsWithDerived(viewNow));
460461
}
461-
wheeling = false;
462+
if(evt.originalEvent && evt.originalEvent.type === 'mouseup') {
463+
self.dragging = false;
464+
} else if(self.wheeling) {
465+
self.wheeling = false;
466+
}
462467

463468
if(fullLayoutNow._rehover) {
464469
fullLayoutNow._rehover();
465470
}
466471
});
467472

468473
map.on('wheel', function() {
469-
wheeling = true;
474+
self.wheeling = true;
470475
});
471476

472477
map.on('mousemove', function(evt) {
@@ -495,7 +500,10 @@ proto.initFx = function(calcData, fullLayout) {
495500
Fx.loneUnhover(fullLayout._hoverlayer);
496501
}
497502

498-
map.on('dragstart', unhover);
503+
map.on('dragstart', function() {
504+
self.dragging = true;
505+
unhover();
506+
});
499507
map.on('zoomstart', unhover);
500508

501509
map.on('mouseout', function() {

‎test/jasmine/tests/mapbox_test.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -584,6 +584,53 @@ describe('@noCI, mapbox plots', function() {
584584
.then(done);
585585
}, LONG_TIMEOUT_INTERVAL);
586586

587+
it('@gl should not update center while dragging', function(done) {
588+
var map = gd._fullLayout.mapbox._subplot.map;
589+
spyOn(map, 'setCenter').and.callThrough();
590+
591+
var p1 = [pointPos[0] + 50, pointPos[1] - 20];
592+
593+
_mouseEvent('mousemove', pointPos, noop).then(function() {
594+
return Plotly.relayout(gd, {'mapbox.center': {lon: 13.5, lat: -19.5}});
595+
}).then(function() {
596+
// First relayout on mapbox.center results in setCenter call
597+
expect(map.setCenter).toHaveBeenCalledWith([13.5, -19.5]);
598+
expect(map.setCenter).toHaveBeenCalledTimes(1);
599+
}).then(function() {
600+
return _mouseEvent('mousedown', pointPos, noop);
601+
}).then(function() {
602+
return _mouseEvent('mousemove', p1, noop);
603+
}).then(function() {
604+
return Plotly.relayout(gd, {'mapbox.center': {lat: 0, lon: 0}});
605+
}).then(function() {
606+
return _mouseEvent('mouseup', p1, noop);
607+
}).then(function() {
608+
// Second relayout on mapbox.center does not result in a setCenter
609+
// call since map drag is underway
610+
expect(map.setCenter).toHaveBeenCalledTimes(1);
611+
}).then(done);
612+
}, LONG_TIMEOUT_INTERVAL);
613+
614+
it('@gl should not update zoom while scroll wheeling', function(done) {
615+
var map = gd._fullLayout.mapbox._subplot.map;
616+
spyOn(map, 'setZoom').and.callThrough();
617+
618+
_mouseEvent('mousemove', pointPos, noop).then(function() {
619+
return Plotly.relayout(gd, {'mapbox.zoom': 5});
620+
}).then(function() {
621+
// First relayout on mapbox.zoom results in setZoom call
622+
expect(map.setZoom).toHaveBeenCalledWith(5);
623+
expect(map.setZoom).toHaveBeenCalledTimes(1);
624+
}).then(function() {
625+
mouseEvent('scroll', pointPos[0], pointPos[1], {deltaY: -400});
626+
return Plotly.relayout(gd, {'mapbox.zoom': 2}).then(function() {
627+
// Second relayout on mapbox.zoom does not result in setZoom
628+
// call since a scroll wheel zoom is underway
629+
expect(map.setZoom).toHaveBeenCalledTimes(1);
630+
});
631+
}).then(done);
632+
}, LONG_TIMEOUT_INTERVAL);
633+
587634
it('@gl should be able to restyle', function(done) {
588635
var restyleCnt = 0;
589636
var relayoutCnt = 0;
@@ -888,6 +935,57 @@ describe('@noCI, mapbox plots', function() {
888935
.then(done);
889936
}, LONG_TIMEOUT_INTERVAL);
890937

938+
it('@gl should be able to update layer image', function(done) {
939+
var coords = [
940+
[-80.425, 46.437],
941+
[-71.516, 46.437],
942+
[-71.516, 37.936],
943+
[-80.425, 37.936]
944+
];
945+
function makeFigure(source) {
946+
return {
947+
data: [{type: 'scattermapbox'}],
948+
layout: {
949+
mapbox: {
950+
layers: [{
951+
'sourcetype': 'image',
952+
'coordinates': coords,
953+
'source': source
954+
}]
955+
}
956+
}
957+
};
958+
}
959+
960+
var map = null;
961+
var layerSource = null;
962+
963+
// Single pixel PNGs generated with http://png-pixel.com/
964+
var prefix = 'data:image/png;base64,';
965+
var redImage = prefix + 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42m' +
966+
'P8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==';
967+
var greenImage = prefix + 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42m' +
968+
'Nk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==';
969+
970+
Plotly.react(gd, makeFigure(redImage)).then(function() {
971+
var mapbox = gd._fullLayout.mapbox._subplot;
972+
map = mapbox.map;
973+
layerSource = map.getSource(mapbox.layerList[0].idSource);
974+
975+
spyOn(layerSource, 'updateImage').and.callThrough();
976+
spyOn(map, 'removeSource').and.callThrough();
977+
return Plotly.react(gd, makeFigure(greenImage));
978+
})
979+
.then(function() {
980+
expect(layerSource.updateImage).toHaveBeenCalledWith(
981+
{url: greenImage, coordinates: coords}
982+
);
983+
expect(map.removeSource).not.toHaveBeenCalled();
984+
})
985+
.catch(failTest)
986+
.then(done);
987+
}, LONG_TIMEOUT_INTERVAL);
988+
891989
it('@gl should be able to react to layer changes', function(done) {
892990
function makeFigure(color) {
893991
return {

0 commit comments

Comments
 (0)