Merge pull request #4069 from plotly/mapbox-attributions-inject-css

mapbox: add attributions

Author: antoinerg

src/plots/mapbox/constants.js

@@ -13,6 +13,9 @@ var mapboxgl = require('mapbox-gl');
 var Lib = require('../../lib');
 var getSubplotCalcData = require('../../plots/get_data').getSubplotCalcData;
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
+var d3 = require('d3');
+var Drawing = require('../../components/drawing');
+var svgTextUtils = require('../../lib/svg_text_utils');
 
 var Mapbox = require('./mapbox');
 
@@ -118,7 +121,91 @@ exports.toSVG = function(gd) {
             preserveAspectRatio: 'none'
         });
 
-        mapbox.destroy();
+        var subplotDiv = d3.select(opts._subplot.div);
+
+        // Append logo if visible
+        var hidden = subplotDiv.select('.mapboxgl-ctrl-logo').node().offsetParent === null;
+        if(!hidden) {
+            var logo = fullLayout._glimages.append('g');
+            logo.attr('transform', 'translate(' + (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'
+              });
+
+            logo.append('path')
+              .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');
+
+            logo.append('polygon')
+              .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', '');
+
+        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
+          });
+
+        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)) {
+            var multilineAttributions = attributions.split('|').join('<br>');
+            attributionText
+              .text(multilineAttributions)
+              .attr('data-unformatted', multilineAttributions)
+              .call(svgTextUtils.convertToTspans, gd);
+
+            bBox = Drawing.bBox(attributionText.node());
+        }
+        attributionText.attr('transform', 'translate(-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)'
+          });
+
+        // Scale down if larger than domain
+        var scaleRatio = 1;
+        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', 'translate(' + offset[0] + ',' + offset[1] + ') scale(' + scaleRatio + ')');
     }
 };
 

src/plots/mapbox/index.js

@@ -242,6 +242,8 @@ function convertSourceOpts(opts) {
 
     sourceOpts[field] = source;
 
+    if(opts.sourceattribution) sourceOpts.attribution = opts.sourceattribution;
+
     return sourceOpts;
 }
 

src/plots/mapbox/layers.js

@@ -131,6 +131,14 @@ var attrs = module.exports = overrideAll({
             ].join(' ')
         },
 
+        sourceattribution: {
+            valType: 'string',
+            role: 'info',
+            description: [
+                'Sets the attribution for this source.'
+            ].join(' ')
+        },
+
         type: {
             valType: 'enumerated',
             values: ['circle', 'line', 'fill', 'symbol', 'raster'],

src/plots/mapbox/layout_attributes.js

@@ -54,6 +54,7 @@ function handleLayerDefaults(layerIn, layerOut) {
         var mustBeRasterLayer = sourceType === 'raster' || sourceType === 'image';
 
         coerce('source');
+        coerce('sourceattribution');
 
         if(sourceType === 'vector') {
             coerce('sourcelayer');

src/plots/mapbox/layout_defaults.js

@@ -105,8 +105,14 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         preserveDrawingBuffer: self.isStatic,
 
         doubleClickZoom: false,
-        boxZoom: false
-    });
+        boxZoom: false,
+
+        attributionControl: false
+    })
+    .addControl(new mapboxgl.AttributionControl({
+        compact: true
+    }));
+
 
     // make sure canvas does not inherit left and top css
     map._canvas.style.left = '0px';
@@ -763,8 +769,8 @@ function getStyleObj(val) {
 
         if(constants.styleValuesMapbox.indexOf(val) !== -1) {
             styleObj.style = convertStyleVal(val);
-        } else if(val === constants.styleValueOSM) {
-            styleObj.style = constants.styleOSM;
+        } else if(constants.styles[val]) {
+            styleObj.style = constants.styles[val];
         } else {
             styleObj.style = val;
         }

src/plots/mapbox/mapbox.js

@@ -276,7 +276,7 @@ function registerTraceModule(_module) {
     if(bpmName === 'mapbox') {
         var styleRules = basePlotModule.constants.styleRules;
         for(var k in styleRules) {
-            addStyleRule('.mapboxgl-' + k, styleRules[k]);
+            addStyleRule('.js-plotly-plot .plotly .mapboxgl-' + k, styleRules[k]);
         }
     }