diff --git a/draftlogs/6567_fix.md b/draftlogs/6567_fix.md new file mode 100644 index 00000000000..4c005d6b20c --- /dev/null +++ b/draftlogs/6567_fix.md @@ -0,0 +1 @@ + - Fix scattermapbox visibility restyle [[#6567](https://github.com/plotly/plotly.js/pull/6567)] diff --git a/src/traces/scattermapbox/plot.js b/src/traces/scattermapbox/plot.js index 03db06144fd..f53f32b99b7 100644 --- a/src/traces/scattermapbox/plot.js +++ b/src/traces/scattermapbox/plot.js @@ -56,8 +56,12 @@ proto.addSource = function(k, opts, cluster) { clusterMaxZoom: cluster.maxzoom, }); } - - this.subplot.map.addSource(this.sourceIds[k], sourceOpts); + var isSourceExists = this.subplot.map.getSource(this.sourceIds[k]); + if(isSourceExists) { + isSourceExists.setData(opts.geojson); + } else { + this.subplot.map.addSource(this.sourceIds[k], sourceOpts); + } }; proto.setSourceData = function(k, opts) { @@ -77,7 +81,24 @@ proto.addLayer = function(k, opts, below) { if(opts.filter) { source.filter = opts.filter; } - this.subplot.addLayer(source, below); + var currentLayerId = this.layerIds[k]; + var layerExist; + var layers = this.subplot.getMapLayers(); + for(var i = 0; i < layers.length; i++) { + if(layers[i].id === currentLayerId) { + layerExist = true; + break; + } + } + + if(layerExist) { + this.subplot.setOptions(currentLayerId, 'setLayoutProperty', source.layout); + if(source.layout.visibility === 'visible') { + this.subplot.setOptions(currentLayerId, 'setPaintProperty', source.paint); + } + } else { + this.subplot.addLayer(source, below); + } }; proto.update = function update(calcTrace) { diff --git a/test/jasmine/tests/scattermapbox_test.js b/test/jasmine/tests/scattermapbox_test.js index 68c2e267a84..aa07efcd5c8 100644 --- a/test/jasmine/tests/scattermapbox_test.js +++ b/test/jasmine/tests/scattermapbox_test.js @@ -1253,3 +1253,47 @@ describe('Test plotly events on a scattermapbox plot when css transform is prese }); }); }); + +describe('scattermapbox restyle', function() { + var gd; + + beforeAll(function() { + Plotly.setPlotConfig({ + mapboxAccessToken: require('../../../build/credentials.json').MAPBOX_ACCESS_TOKEN + }); + + gd = createGraphDiv(); + }); + + afterAll(function() { + Plotly.purge(gd); + destroyGraphDiv(); + }); + + it('@gl should be able to update legendonly to visible', function(done) { + Plotly.newPlot(gd, { + data: [{ + lat: [0, 2], lon: [0, 2], + type: 'scattermapbox', + mode: 'lines', + visible: 'legendonly' + }, + { + lat: [0, 2], lon: [2, 0], + type: 'scattermapbox', + mode: 'lines', + visible: true + } + ], layout: { + mapbox: { + style: 'open-street-map', + zoom: 6, + center: { lat: 1, lon: 1 } + }, + showlegend: true + } + }).then(function() { + return Plotly.restyle(gd, 'visible', true); + }).then(done, done.fail); + }); +});