diff --git a/superset/assets/src/explore/controls.jsx b/superset/assets/src/explore/controls.jsx
index 779bdd8ff75fa..abc56996663b7 100644
--- a/superset/assets/src/explore/controls.jsx
+++ b/superset/assets/src/explore/controls.jsx
@@ -1800,6 +1800,7 @@ export const controls = {
viewport_zoom: {
type: 'TextControl',
label: t('Zoom'),
+ renderTrigger: true,
isFloat: true,
default: 11,
description: t('Zoom level of the map'),
@@ -1809,6 +1810,7 @@ export const controls = {
viewport_latitude: {
type: 'TextControl',
label: t('Default latitude'),
+ renderTrigger: true,
default: 37.772123,
isFloat: true,
description: t('Latitude of default viewport'),
@@ -1818,6 +1820,7 @@ export const controls = {
viewport_longitude: {
type: 'TextControl',
label: t('Default longitude'),
+ renderTrigger: true,
default: -122.405293,
isFloat: true,
description: t('Longitude of default viewport'),
diff --git a/superset/assets/src/visualizations/MapBox/MapBox.css b/superset/assets/src/visualizations/MapBox/MapBox.css
new file mode 100644
index 0000000000000..3ec640dac6e99
--- /dev/null
+++ b/superset/assets/src/visualizations/MapBox/MapBox.css
@@ -0,0 +1,3 @@
+.mapbox .slice_container div {
+ padding-top: 0px;
+}
diff --git a/superset/assets/src/visualizations/MapBox/MapBox.jsx b/superset/assets/src/visualizations/MapBox/MapBox.jsx
new file mode 100644
index 0000000000000..81f41f074b1d2
--- /dev/null
+++ b/superset/assets/src/visualizations/MapBox/MapBox.jsx
@@ -0,0 +1,225 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import MapGL from 'react-map-gl';
+import Immutable from 'immutable';
+import supercluster from 'supercluster';
+import ViewportMercator from 'viewport-mercator-project';
+import ScatterPlotGlowOverlay from './ScatterPlotGlowOverlay';
+
+import {
+ DEFAULT_LONGITUDE,
+ DEFAULT_LATITUDE,
+ DEFAULT_ZOOM,
+} from '../../utils/common';
+import './MapBox.css';
+
+const NOOP = () => {};
+const DEFAULT_POINT_RADIUS = 60;
+const DEFAULT_MAX_ZOOM = 16;
+
+const propTypes = {
+ width: PropTypes.number,
+ height: PropTypes.number,
+ aggregatorName: PropTypes.string,
+ clusterer: PropTypes.object,
+ globalOpacity: PropTypes.number,
+ mapStyle: PropTypes.string,
+ mapboxApiKey: PropTypes.string,
+ onViewportChange: PropTypes.func,
+ pointRadius: PropTypes.number,
+ pointRadiusUnit: PropTypes.string,
+ renderWhileDragging: PropTypes.bool,
+ rgb: PropTypes.array,
+ viewportLatitude: PropTypes.number,
+ viewportLongitude: PropTypes.number,
+ viewportZoom: PropTypes.number,
+};
+
+const defaultProps = {
+ globalOpacity: 1,
+ onViewportChange: NOOP,
+ pointRadius: DEFAULT_POINT_RADIUS,
+ pointRadiusUnit: 'Pixels',
+ viewportLatitude: DEFAULT_LATITUDE,
+ viewportLongitude: DEFAULT_LONGITUDE,
+ viewportZoom: DEFAULT_ZOOM,
+};
+
+class MapBox extends React.Component {
+ constructor(props) {
+ super(props);
+
+ const {
+ viewportLatitude: latitude,
+ viewportLongitude: longitude,
+ viewportZoom: zoom,
+ } = this.props;
+
+ this.state = {
+ viewport: {
+ longitude,
+ latitude,
+ zoom,
+ startDragLngLat: [longitude, latitude],
+ },
+ };
+ this.onViewportChange = this.onViewportChange.bind(this);
+ }
+
+ onViewportChange(viewport) {
+ this.setState({ viewport });
+ this.props.onViewportChange(viewport);
+ }
+
+ render() {
+ const {
+ width,
+ height,
+ aggregatorName,
+ globalOpacity,
+ mapStyle,
+ mapboxApiKey,
+ pointRadius,
+ pointRadiusUnit,
+ renderWhileDragging,
+ rgb,
+ } = this.props;
+ const { viewport } = this.state;
+ const { latitude, longitude, zoom } = viewport;
+ const mercator = new ViewportMercator({
+ width,
+ height,
+ longitude,
+ latitude,
+ zoom,
+ });
+ const topLeft = mercator.unproject([0, 0]);
+ const bottomRight = mercator.unproject([width, height]);
+ const bbox = [topLeft[0], bottomRight[1], bottomRight[0], topLeft[1]];
+ const clusters = this.props.clusterer.getClusters(bbox, Math.round(zoom));
+ const isDragging = viewport.isDragging === undefined ? false :
+ viewport.isDragging;
+ return (
+
+ {
+ const coordinates = location.get('geometry').get('coordinates');
+ return [coordinates.get(0), coordinates.get(1)];
+ }}
+ />
+
+ );
+ }
+}
+
+MapBox.propTypes = propTypes;
+MapBox.defaultProps = defaultProps;
+
+function createReducer(aggregatorName, customMetric) {
+ if (aggregatorName === 'sum' || !customMetric) {
+ return (a, b) => a + b;
+ } else if (aggName === 'min') {
+ return Math.min;
+ } else if (aggName === 'max') {
+ return Math.max;
+ }
+ return function (a, b) {
+ if (a instanceof Array) {
+ if (b instanceof Array) {
+ return a.concat(b);
+ }
+ a.push(b);
+ return a;
+ }
+ if (b instanceof Array) {
+ b.push(a);
+ return b;
+ }
+ return [a, b];
+ };
+}
+
+function mapbox(slice, payload, setControlValue) {
+ const { formData, selector } = slice;
+ const {
+ customMetric,
+ geoJSON,
+ mapboxApiKey,
+ } = payload.data;
+ const {
+ clustering_radius: clusteringRadius,
+ global_opacity: globalOpacity,
+ mapbox_color: color,
+ mapbox_style: mapStyle,
+ pandas_aggfunc: aggregatorName,
+ point_radius: pointRadius,
+ point_radius_unit: pointRadiusUnit,
+ render_while_dragging: renderWhileDragging,
+ viewport_latitude: viewportLatitude,
+ viewport_longitude: viewportLongitude,
+ viewport_zoom: viewportZoom,
+ } = formData;
+
+ // Validate mapbox color
+ const rgb = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/
+ .exec(color);
+ if (rgb === null) {
+ slice.error('Color field must be of form \'rgb(%d, %d, %d)\'');
+ return;
+ }
+
+ const clusterer = supercluster({
+ radius: clusteringRadius,
+ maxZoom: DEFAULT_MAX_ZOOM,
+ metricKey: 'metric',
+ metricReducer: createReducer(aggregatorName, customMetric),
+ });
+ clusterer.load(geoJSON.features);
+
+ ReactDOM.render(
+ {
+ setControlValue('viewport_longitude', longitude);
+ setControlValue('viewport_latitude', latitude);
+ setControlValue('viewport_zoom', zoom);
+ }}
+ pointRadius={pointRadius === 'Auto' ? DEFAULT_POINT_RADIUS : pointRadius}
+ pointRadiusUnit={pointRadiusUnit}
+ renderWhileDragging={renderWhileDragging}
+ rgb={rgb}
+ viewportLatitude={viewportLatitude}
+ viewportLongitude={viewportLongitude}
+ viewportZoom={viewportZoom}
+ />,
+ document.querySelector(selector),
+ );
+}
+
+export default mapbox;
diff --git a/superset/assets/src/visualizations/mapbox.jsx b/superset/assets/src/visualizations/MapBox/ScatterPlotGlowOverlay.jsx
similarity index 59%
rename from superset/assets/src/visualizations/mapbox.jsx
rename to superset/assets/src/visualizations/MapBox/ScatterPlotGlowOverlay.jsx
index 1a156ae520e9d..ea4e115de3b00 100644
--- a/superset/assets/src/visualizations/mapbox.jsx
+++ b/superset/assets/src/visualizations/MapBox/ScatterPlotGlowOverlay.jsx
@@ -1,28 +1,46 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable react/no-multi-comp */
import d3 from 'd3';
+import Immutable from 'immutable';
import React from 'react';
import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import MapGL from 'react-map-gl';
-import Immutable from 'immutable';
-import supercluster from 'supercluster';
import ViewportMercator from 'viewport-mercator-project';
-
import {
kmToPixels,
rgbLuminance,
isNumeric,
MILES_PER_KM,
- DEFAULT_LONGITUDE,
- DEFAULT_LATITUDE,
- DEFAULT_ZOOM,
-} from '../utils/common';
-import './mapbox.css';
+} from '../../utils/common';
+
+const propTypes = {
+ locations: PropTypes.instanceOf(Immutable.List).isRequired,
+ lngLatAccessor: PropTypes.func,
+ renderWhileDragging: PropTypes.bool,
+ globalOpacity: PropTypes.number,
+ dotRadius: PropTypes.number,
+ dotFill: PropTypes.string,
+ compositeOperation: PropTypes.string,
+};
+
+const defaultProps = {
+ lngLatAccessor: location => [location.get(0), location.get(1)],
+ renderWhileDragging: true,
+ dotRadius: 4,
+ dotFill: '#1FBAD6',
+ globalOpacity: 1,
+ // Same as browser default.
+ compositeOperation: 'source-over',
+};
-const NOOP = () => {};
+const contextTypes = {
+ viewport: PropTypes.object,
+ isDragging: PropTypes.bool,
+};
class ScatterPlotGlowOverlay extends React.Component {
+ constructor(props) {
+ super(props);
+ this.setCanvasRef = this.setCanvasRef.bind(this);
+ }
+
componentDidMount() {
this.redraw();
}
@@ -30,6 +48,11 @@ class ScatterPlotGlowOverlay extends React.Component {
componentDidUpdate() {
this.redraw();
}
+
+ setCanvasRef(element) {
+ this.canvas = element;
+ }
+
drawText(ctx, pixel, options = {}) {
const IS_DARK_THRESHOLD = 110;
const { fontHeight = 0, label = '', radius = 0, rgb = [0, 0, 0], shadow = false } = options;
@@ -62,8 +85,7 @@ class ScatterPlotGlowOverlay extends React.Component {
redraw() {
const props = this.props;
const pixelRatio = window.devicePixelRatio || 1;
- const canvas = this.refs.overlay;
- const ctx = canvas.getContext('2d');
+ const ctx = this.canvas.getContext('2d');
const radius = props.dotRadius;
const mercator = new ViewportMercator(props);
const rgb = props.rgb;
@@ -185,9 +207,9 @@ class ScatterPlotGlowOverlay extends React.Component {
}
}, this);
}
-
ctx.restore();
}
+
render() {
let width = 0;
let height = 0;
@@ -198,11 +220,11 @@ class ScatterPlotGlowOverlay extends React.Component {
const { globalOpacity } = this.props;
const pixelRatio = window.devicePixelRatio || 1;
return (
- React.createElement('canvas', {
- ref: 'overlay',
- width: width * pixelRatio,
- height: height * pixelRatio,
- style: {
+