Introducing plotly.js + Mapbox GL

package.json

@@ -70,6 +70,7 @@
     "gl-select-box": "^1.0.1",
     "gl-spikes2d": "^1.0.1",
     "gl-surface3d": "^1.2.3",
+    "mapbox-gl": "^0.18.0",
     "mouse-change": "^1.1.1",
     "mouse-wheel": "^1.0.2",
     "ndarray": "^1.0.16",

src/plot_api/plot_config.js

@@ -87,6 +87,9 @@ module.exports = {
     // URL to topojson files used in geo charts
     topojsonURL: 'https://cdn.plot.ly/',
 
+    // Mapbox access token (required to plot mapbox trace types)
+    mapboxAccessToken: null,
+
     // Turn all console logging on or off (errors will be thrown)
     // This should ONLY be set via Plotly.setPlotConfig
     logging: false

src/plots/mapbox/constants.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+
+module.exports = {
+    styleUrlPrefix: 'mapbox://styles/mapbox/',
+    styleUrlSuffix: 'v9',
+
+    noAccessTokenErrorMsg: [
+        'Missing Mapbox access token.',
+        'Mapbox trace type require a Mapbox access token to be registered.',
+        'For example:',
+        '  Plotly.plot(gd, data, layout, { mapboxAccessToken: \'my-access-token\' });',
+        'More info here: https://www.mapbox.com/help/define-access-token/'
+    ].join('\n'),
+
+    mapOnErrorMsg: 'Mapbox error.'
+};

src/plots/mapbox/index.js

@@ -0,0 +1,133 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var mapboxgl = require('mapbox-gl');
+
+var Plots = require('../plots');
+var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
+
+var createMapbox = require('./mapbox');
+var constants = require('./constants');
+
+
+exports.name = 'mapbox';
+
+exports.attr = 'subplot';
+
+exports.idRoot = 'mapbox';
+
+exports.idRegex = /^mapbox([2-9]|[1-9][0-9]+)?$/;
+
+exports.attrRegex = /^mapbox([2-9]|[1-9][0-9]+)?$/;
+
+exports.attributes = {
+    subplot: {
+        valType: 'subplotid',
+        role: 'info',
+        dflt: 'mapbox',
+        description: [
+            'Sets a reference between this trace\'s data coordinates and',
+            'a mapbox subplot.',
+            'If *mapbox* (the default value), the data refer to `layout.mapbox`.',
+            'If *mapbox2*, the data refer to `layout.mapbox2`, and so on.'
+        ].join(' ')
+    }
+};
+
+exports.layoutAttributes = require('./layout_attributes');
+
+exports.supplyLayoutDefaults = require('./layout_defaults');
+
+exports.plot = function plotMapbox(gd) {
+
+    if(!gd._context.mapboxAccessToken) {
+        throw new Error(constants.noAccessTokenErrorMsg);
+    }
+    else {
+        mapboxgl.accessToken = gd._context.mapboxAccessToken;
+    }
+
+    var fullLayout = gd._fullLayout,
+        calcData = gd.calcdata,
+        mapboxIds = Plots.getSubplotIds(fullLayout, 'mapbox');
+
+    for(var i = 0; i < mapboxIds.length; i++) {
+        var id = mapboxIds[i],
+            subplotCalcData = getSubplotCalcData(calcData, id),
+            mapbox = fullLayout[id]._subplot;
+
+        if(!mapbox) {
+            mapbox = createMapbox({
+                gd: gd,
+                container: fullLayout._glcontainer.node(),
+                id: id,
+                fullLayout: fullLayout,
+                staticPlot: gd._context.staticPlot
+            });
+
+            fullLayout[id]._subplot = mapbox;
+        }
+
+        mapbox.plot(subplotCalcData, fullLayout, gd._promises);
+    }
+};
+
+exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
+    var oldMapboxKeys = Plots.getSubplotIds(oldFullLayout, 'mapbox');
+
+    for(var i = 0; i < oldMapboxKeys.length; i++) {
+        var oldMapboxKey = oldMapboxKeys[i];
+
+        if(!newFullLayout[oldMapboxKey] && !!oldFullLayout[oldMapboxKey]._subplot) {
+            oldFullLayout[oldMapboxKey]._subplot.destroy();
+        }
+    }
+};
+
+exports.toSVG = function(gd) {
+    var fullLayout = gd._fullLayout,
+        subplotIds = Plots.getSubplotIds(fullLayout, 'mapbox'),
+        size = fullLayout._size;
+
+    for(var i = 0; i < subplotIds.length; i++) {
+        var opts = fullLayout[subplotIds[i]],
+            domain = opts.domain,
+            mapbox = opts._subplot;
+
+        var imageData = mapbox.toImage('png');
+        var image = fullLayout._glimages.append('svg:image');
+
+        image.attr({
+            xmlns: xmlnsNamespaces.svg,
+            'xlink:href': imageData,
+            x: size.l + size.w * domain.x[0],
+            y: size.t + size.h * (1 - domain.y[1]),
+            width: size.w * (domain.x[1] - domain.x[0]),
+            height: size.h * (domain.y[1] - domain.y[0]),
+            preserveAspectRatio: 'none'
+        });
+
+        mapbox.destroy();
+    }
+};
+
+function getSubplotCalcData(calcData, id) {
+    var subplotCalcData = [];
+
+    for(var i = 0; i < calcData.length; i++) {
+        var calcTrace = calcData[i],
+            trace = calcTrace[0].trace;
+
+        if(trace.subplot === id) subplotCalcData.push(calcTrace);
+    }
+
+    return subplotCalcData;
+}

src/plots/mapbox/layers.js

@@ -0,0 +1,173 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var Lib = require('../../lib');
+
+
+function MapboxLayer(mapbox, index, opts) {
+    this.mapbox = mapbox;
+    this.map = mapbox.map;
+
+    this.uid = mapbox.uid + '-' + 'layer' + index;
+
+    this.idSource = this.uid + '-source';
+    this.idLayer = this.uid + '-layer';
+
+    // some state variable to check if a remove/add step is needed
+    this.sourceType = null;
+    this.source = null;
+    this.layerType = null;
+    this.below = null;
+
+    // IMPORTANT: must create source before layer to not cause errors
+    this.updateSource(opts);
+    this.updateLayer(opts);
+}
+
+var proto = MapboxLayer.prototype;
+
+proto.update = function update(opts) {
+    if(this.needsNewSource(opts)) {
+
+        // IMPORTANT: must delete layer before source to not cause errors
+        this.updateLayer(opts);
+        this.updateSource(opts);
+    }
+    else if(this.needsNewLayer(opts)) {
+        this.updateLayer(opts);
+    }
+
+    var paintOpts = convertPaintOpts(opts);
+
+    if(isVisible(opts)) {
+        this.mapbox.setOptions(this.idLayer, 'setPaintProperty', paintOpts);
+    }
+};
+
+proto.needsNewSource = function(opts) {
+    return (
+        this.sourceType !== opts.sourcetype ||
+        this.source !== opts.source
+    );
+};
+
+proto.needsNewLayer = function(opts) {
+    return (
+        this.layerType !== opts.type ||
+        this.below !== opts.below
+    );
+};
+
+proto.updateSource = function(opts) {
+    var map = this.map;
+
+    if(map.getSource(this.idSource)) map.removeSource(this.idSource);
+
+    this.sourceType = opts.sourcetype;
+    this.source = opts.source;
+
+    if(!isVisible(opts)) return;
+
+    var sourceOpts = convertSourceOpts(opts);
+
+    map.addSource(this.idSource, sourceOpts);
+};
+
+proto.updateLayer = function(opts) {
+    var map = this.map;
+
+    if(map.getLayer(this.idLayer)) map.removeLayer(this.idLayer);
+
+    this.layerType = opts.type;
+
+    if(!isVisible(opts)) return;
+
+    map.addLayer({
+        id: this.idLayer,
+        source: this.idSource,
+        'source-layer': opts.sourcelayer || '',
+        type: opts.type
+    }, opts.below);
+
+    // the only way to make a layer invisible is to remove it
+    var layoutOpts = { visibility: 'visible' };
+    this.mapbox.setOptions(this.idLayer, 'setLayoutProperty', layoutOpts);
+};
+
+proto.dispose = function dispose() {
+    var map = this.map;
+
+    map.removeLayer(this.idLayer);
+    map.removeSource(this.idSource);
+};
+
+function isVisible(opts) {
+    var source = opts.source;
+
+    // For some weird reason Lib.isPlainObject fails
+    // to detect `source` as a plain object in nw.js 0.12.
+
+    return (
+        typeof source === 'object' ||
+        (typeof source === 'string' && source.length > 0)
+    );
+}
+
+function convertPaintOpts(opts) {
+    var paintOpts = {};
+
+    switch(opts.type) {
+
+        case 'line':
+            Lib.extendFlat(paintOpts, {
+                'line-width': opts.line.width,
+                'line-color': opts.line.color,
+                'line-opacity': opts.opacity
+            });
+            break;
+
+        case 'fill':
+            Lib.extendFlat(paintOpts, {
+                'fill-color': opts.fillcolor,
+                'fill-outline-color': opts.line.color,
+                'fill-opacity': opts.opacity
+
+                // no way to pass line.width at the moment
+            });
+            break;
+    }
+
+    return paintOpts;
+}
+
+function convertSourceOpts(opts) {
+    var sourceType = opts.sourcetype,
+        source = opts.source,
+        sourceOpts = { type: sourceType },
+        isSourceAString = (typeof source === 'string'),
+        field;
+
+    if(sourceType === 'geojson') field = 'data';
+    else if(sourceType === 'vector') {
+        field = isSourceAString ? 'url' : 'tiles';
+    }
+
+    sourceOpts[field] = source;
+
+    return sourceOpts;
+}
+
+module.exports = function createMapboxLayer(mapbox, index, opts) {
+    var mapboxLayer = new MapboxLayer(mapbox, index, opts);
+    mapboxLayer.update(opts);
+
+    return mapboxLayer;
+};