Add link to migration guide to deprecation warning

ndrezn · ndrezn · commit 4cbe129032c2 · 2024-08-29T10:12:44.000-04:00
diff --git a/src/plots/mapbox/index.js b/src/plots/mapbox/index.js
@@ -27,7 +27,8 @@ exports.idRegex = exports.attrRegex = Lib.counterRegex(MAPBOX);
 
 var deprecationWarning = [
     'mapbox subplots and traces are deprecated!',
-    'Please consider switching to `map` subplots and traces.'
+    'Please consider switching to `map` subplots and traces.',
+    'Learn more at: https://plotly.com/javascript/maplibre-migration/'
 ].join(' ');
 
 exports.attributes = {
@@ -52,7 +53,7 @@ exports.supplyLayoutDefaults = require('./layout_defaults');
 var firstPlot = true;
 
 exports.plot = function plot(gd) {
-    if(firstPlot) {
+    if (firstPlot) {
         firstPlot = false;
         Lib.warn(deprecationWarning);
     }
@@ -61,25 +62,25 @@ exports.plot = function plot(gd) {
     var calcData = gd.calcdata;
     var mapboxIds = fullLayout._subplots[MAPBOX];
 
-    if(mapboxgl.version !== constants.requiredVersion) {
+    if (mapboxgl.version !== constants.requiredVersion) {
         throw new Error(constants.wrongVersionErrorMsg);
     }
 
     var accessToken = findAccessToken(gd, mapboxIds);
     mapboxgl.accessToken = accessToken;
 
-    for(var i = 0; i < mapboxIds.length; i++) {
+    for (var i = 0; i < mapboxIds.length; i++) {
         var id = mapboxIds[i];
         var subplotCalcData = getSubplotCalcData(calcData, MAPBOX, id);
         var opts = fullLayout[id];
         var mapbox = opts._subplot;
 
-        if(!mapbox) {
+        if (!mapbox) {
             mapbox = new Mapbox(gd, id);
             fullLayout[id]._subplot = mapbox;
         }
 
-        if(!mapbox.viewInitial) {
+        if (!mapbox.viewInitial) {
             mapbox.viewInitial = {
                 center: Lib.extendFlat({}, opts.center),
                 zoom: opts.zoom,
@@ -92,24 +93,24 @@ exports.plot = function plot(gd) {
     }
 };
 
-exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
+exports.clean = function (newFullData, newFullLayout, oldFullData, oldFullLayout) {
     var oldMapboxKeys = oldFullLayout._subplots[MAPBOX] || [];
 
-    for(var i = 0; i < oldMapboxKeys.length; i++) {
+    for (var i = 0; i < oldMapboxKeys.length; i++) {
         var oldMapboxKey = oldMapboxKeys[i];
 
-        if(!newFullLayout[oldMapboxKey] && !!oldFullLayout[oldMapboxKey]._subplot) {
+        if (!newFullLayout[oldMapboxKey] && !!oldFullLayout[oldMapboxKey]._subplot) {
             oldFullLayout[oldMapboxKey]._subplot.destroy();
         }
     }
 };
 
-exports.toSVG = function(gd) {
+exports.toSVG = function (gd) {
     var fullLayout = gd._fullLayout;
     var subplotIds = fullLayout._subplots[MAPBOX];
     var size = fullLayout._size;
 
-    for(var i = 0; i < subplotIds.length; i++) {
+    for (var i = 0; i < subplotIds.length; i++) {
         var opts = fullLayout[subplotIds[i]];
         var domain = opts.domain;
         var mapbox = opts._subplot;
@@ -131,84 +132,84 @@ exports.toSVG = function(gd) {
 
         // Append logo if visible
         var hidden = subplotDiv.select('.mapboxgl-ctrl-logo').node().offsetParent === null;
-        if(!hidden) {
+        if (!hidden) {
             var logo = fullLayout._glimages.append('g');
             logo.attr('transform', strTranslate(size.l + size.w * domain.x[0] + 10, size.t + size.h * (1 - domain.y[0]) - 31));
             logo.append('path')
-              .attr('d', constants.mapboxLogo.path0)
-              .style({
-                  opacity: 0.9,
-                  fill: '#ffffff',
-                  'enable-background': 'new'
-              });
+                .attr('d', constants.mapboxLogo.path0)
+                .style({
+                    opacity: 0.9,
+                    fill: '#ffffff',
+                    'enable-background': 'new'
+                });
 
             logo.append('path')
-              .attr('d', constants.mapboxLogo.path1)
-              .style('opacity', 0.35)
-              .style('enable-background', 'new');
+                .attr('d', constants.mapboxLogo.path1)
+                .style('opacity', 0.35)
+                .style('enable-background', 'new');
 
             logo.append('path')
-              .attr('d', constants.mapboxLogo.path2)
-              .style('opacity', 0.35)
-              .style('enable-background', 'new');
+                .attr('d', constants.mapboxLogo.path2)
+                .style('opacity', 0.35)
+                .style('enable-background', 'new');
 
             logo.append('polygon')
-              .attr('points', constants.mapboxLogo.polygon)
-              .style({
-                  opacity: 0.9,
-                  fill: '#ffffff',
-                  'enable-background': 'new'
-              });
+                .attr('points', constants.mapboxLogo.polygon)
+                .style({
+                    opacity: 0.9,
+                    fill: '#ffffff',
+                    'enable-background': 'new'
+                });
         }
 
         // Add attributions
         var attributions = subplotDiv
-                              .select('.mapboxgl-ctrl-attrib').text()
-                              .replace('Improve this map', '');
+            .select('.mapboxgl-ctrl-attrib').text()
+            .replace('Improve this map', '');
 
         var attributionGroup = fullLayout._glimages.append('g');
 
         var attributionText = attributionGroup.append('text');
         attributionText
-          .text(attributions)
-          .classed('static-attribution', true)
-          .attr({
-              'font-size': 12,
-              'font-family': 'Arial',
-              color: 'rgba(0, 0, 0, 0.75)',
-              'text-anchor': 'end',
-              'data-unformatted': attributions
-          });
+            .text(attributions)
+            .classed('static-attribution', true)
+            .attr({
+                'font-size': 12,
+                'font-family': 'Arial',
+                color: 'rgba(0, 0, 0, 0.75)',
+                'text-anchor': 'end',
+                'data-unformatted': attributions
+            });
 
         var bBox = Drawing.bBox(attributionText.node());
 
         // Break into multiple lines twice larger than domain
         var maxWidth = size.w * (domain.x[1] - domain.x[0]);
-        if((bBox.width > maxWidth / 2)) {
+        if ((bBox.width > maxWidth / 2)) {
             var multilineAttributions = attributions.split('|').join('<br>');
             attributionText
-              .text(multilineAttributions)
-              .attr('data-unformatted', multilineAttributions)
-              .call(svgTextUtils.convertToTspans, gd);
+                .text(multilineAttributions)
+                .attr('data-unformatted', multilineAttributions)
+                .call(svgTextUtils.convertToTspans, gd);
 
             bBox = Drawing.bBox(attributionText.node());
         }
         attributionText.attr('transform', strTranslate(-3, -bBox.height + 8));
 
         // Draw white rectangle behind text
         attributionGroup
-          .insert('rect', '.static-attribution')
-          .attr({
-              x: -bBox.width - 6,
-              y: -bBox.height - 3,
-              width: bBox.width + 6,
-              height: bBox.height + 3,
-              fill: 'rgba(255, 255, 255, 0.75)'
-          });
+            .insert('rect', '.static-attribution')
+            .attr({
+                x: -bBox.width - 6,
+                y: -bBox.height - 3,
+                width: bBox.width + 6,
+                height: bBox.height + 3,
+                fill: 'rgba(255, 255, 255, 0.75)'
+            });
 
         // Scale down if larger than domain
         var scaleRatio = 1;
-        if((bBox.width + 6) > maxWidth) scaleRatio = maxWidth / (bBox.width + 6);
+        if ((bBox.width + 6) > maxWidth) scaleRatio = maxWidth / (bBox.width + 6);
 
         var offset = [(size.l + size.w * domain.x[1]), (size.t + size.h * (1 - domain.y[0]))];
         attributionGroup.attr('transform', strTranslate(offset[0], offset[1]) + strScale(scaleRatio));
@@ -222,7 +223,7 @@ function findAccessToken(gd, mapboxIds) {
     var context = gd._context;
 
     // special case for Mapbox Atlas users
-    if(context.mapboxAccessToken === '') return '';
+    if (context.mapboxAccessToken === '') return '';
 
     var tokensUseful = [];
     var tokensListed = [];
@@ -231,42 +232,42 @@ function findAccessToken(gd, mapboxIds) {
 
     // Take the first token we find in a mapbox subplot.
     // These default to the context value but may be overridden.
-    for(var i = 0; i < mapboxIds.length; i++) {
+    for (var i = 0; i < mapboxIds.length; i++) {
         var opts = fullLayout[mapboxIds[i]];
         var token = opts.accesstoken;
 
-        if(isStyleRequireAccessToken(opts.style)) {
-            if(token) {
+        if (isStyleRequireAccessToken(opts.style)) {
+            if (token) {
                 Lib.pushUnique(tokensUseful, token);
             } else {
-                if(isStyleRequireAccessToken(opts._input.style)) {
+                if (isStyleRequireAccessToken(opts._input.style)) {
                     Lib.error('Uses Mapbox map style, but did not set an access token.');
                     hasOneSetMapboxStyle = true;
                 }
                 wontWork = true;
             }
         }
 
-        if(token) {
+        if (token) {
             Lib.pushUnique(tokensListed, token);
         }
     }
 
-    if(wontWork) {
+    if (wontWork) {
         var msg = hasOneSetMapboxStyle ?
             constants.noAccessTokenErrorMsg :
             constants.missingStyleErrorMsg;
         Lib.error(msg);
         throw new Error(msg);
     }
 
-    if(tokensUseful.length) {
-        if(tokensUseful.length > 1) {
+    if (tokensUseful.length) {
+        if (tokensUseful.length > 1) {
             Lib.warn(constants.multipleTokensErrorMsg);
         }
         return tokensUseful[0];
     } else {
-        if(tokensListed.length) {
+        if (tokensListed.length) {
             Lib.log([
                 'Listed mapbox access token(s)', tokensListed.join(','),
                 'but did not use a Mapbox map style, ignoring token(s).'
@@ -284,11 +285,11 @@ function isStyleRequireAccessToken(s) {
     );
 }
 
-exports.updateFx = function(gd) {
+exports.updateFx = function (gd) {
     var fullLayout = gd._fullLayout;
     var subplotIds = fullLayout._subplots[MAPBOX];
 
-    for(var i = 0; i < subplotIds.length; i++) {
+    for (var i = 0; i < subplotIds.length; i++) {
         var subplotObj = fullLayout[subplotIds[i]]._subplot;
         subplotObj.updateFx(fullLayout);
     }
diff --git a/src/traces/choroplethmapbox/index.js b/src/traces/choroplethmapbox/index.js
@@ -2,7 +2,8 @@
 
 var deprecationWarning = [
     '*choroplethmapbox* trace is deprecated!',
-    'Please consider switching to the *choroplethmap* trace type and `map` subplots.'
+    'Please consider switching to the *choroplethmap* trace type and `map` subplots.',
+    'Learn more at: https://plotly.com/javascript/maplibre-migration/'
 ].join(' ');
 
 module.exports = {
@@ -15,28 +16,28 @@ module.exports = {
     eventData: require('../choropleth/event_data'),
     selectPoints: require('../choropleth/select'),
 
-    styleOnSelect: function(_, cd) {
-        if(cd) {
+    styleOnSelect: function (_, cd) {
+        if (cd) {
             var trace = cd[0].trace;
             trace._glTrace.updateOnSelect(cd);
         }
     },
 
-    getBelow: function(trace, subplot) {
+    getBelow: function (trace, subplot) {
         var mapLayers = subplot.getMapLayers();
 
         // find layer just above top-most "water" layer
         // that is not a plotly layer
-        for(var i = mapLayers.length - 2; i >= 0; i--) {
+        for (var i = mapLayers.length - 2; i >= 0; i--) {
             var layerId = mapLayers[i].id;
 
-            if(typeof layerId === 'string' &&
+            if (typeof layerId === 'string' &&
                 layerId.indexOf('water') === 0
-             ) {
-                for(var j = i + 1; j < mapLayers.length; j++) {
+            ) {
+                for (var j = i + 1; j < mapLayers.length; j++) {
                     layerId = mapLayers[j].id;
 
-                    if(typeof layerId === 'string' &&
+                    if (typeof layerId === 'string' &&
                         layerId.indexOf('plotly-') === -1
                     ) {
                         return layerId;
diff --git a/src/traces/densitymapbox/index.js b/src/traces/densitymapbox/index.js
@@ -2,7 +2,8 @@
 
 var deprecationWarning = [
     '*densitymapbox* trace is deprecated!',
-    'Please consider switching to the *densitymap* trace type and `map` subplots.'
+    'Please consider switching to the *densitymap* trace type and `map` subplots.',
+    'Learn more at: https://plotly.com/javascript/maplibre-migration/'
 ].join(' ');
 
 module.exports = {
@@ -15,15 +16,15 @@ module.exports = {
     hoverPoints: require('./hover'),
     eventData: require('./event_data'),
 
-    getBelow: function(trace, subplot) {
+    getBelow: function (trace, subplot) {
         var mapLayers = subplot.getMapLayers();
 
         // find first layer with `type: 'symbol'`,
         // that is not a plotly layer
-        for(var i = 0; i < mapLayers.length; i++) {
+        for (var i = 0; i < mapLayers.length; i++) {
             var layer = mapLayers[i];
             var layerId = layer.id;
-            if(layer.type === 'symbol' &&
+            if (layer.type === 'symbol' &&
                 typeof layerId === 'string' && layerId.indexOf('plotly-') === -1
             ) {
                 return layerId;
diff --git a/src/traces/scattermapbox/index.js b/src/traces/scattermapbox/index.js
@@ -2,7 +2,8 @@
 
 var deprecationWarning = [
     '*scattermapbox* trace is deprecated!',
-    'Please consider switching to the *scattermap* trace type and `map` subplots.'
+    'Please consider switching to the *scattermap* trace type and `map` subplots.',
+    'Learn more at: https://plotly.com/javascript/maplibre-migration/'
 ].join(' ');
 
 module.exports = {
@@ -16,8 +17,8 @@ module.exports = {
     eventData: require('./event_data'),
     selectPoints: require('./select'),
 
-    styleOnSelect: function(_, cd) {
-        if(cd) {
+    styleOnSelect: function (_, cd) {
+        if (cd) {
             var trace = cd[0].trace;
             trace._glTrace.update(cd);
         }
