Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 82bc73a

Browse files
etpinardetpinard
committed
add fill source and layer:
- make fill and lines compute geojson coordinates only once.
1 parent 3c77742 commit 82bc73a

File tree

2 files changed

+91
-39
lines changed

2 files changed

+91
-39
lines changed

‎src/traces/scattermapbox/convert.js

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,35 @@ var SIZE_PROP = 'circle-size';
2323

2424
module.exports = function convert(trace) {
2525
var isVisible = (trace.visible === true),
26+
hasFill = (trace.fill !== 'none'),
2627
hasLines = subTypes.hasLines(trace),
2728
hasMarkers = subTypes.hasMarkers(trace);
2829

29-
var geojsonLines = makeBlankGeoJSON(),
30-
layoutLines = { visibility: 'none' },
31-
paintLines = {};
30+
var fill = initContainer(),
31+
lines = initContainer(),
32+
markers = initContainer();
3233

33-
var geojsonMarkers = makeBlankGeoJSON(),
34-
layoutMarkers = { visibility: 'none' },
35-
paintMarkers = {};
34+
var coords;
35+
if(isVisible && (hasFill || hasLines)) {
36+
coords = getCoords(trace);
37+
}
38+
39+
if(isVisible && hasFill) {
40+
fill.geojson = makeFillGeoJSON(trace, coords);
41+
fill.layout.visibility = 'visible';
42+
43+
Lib.extendFlat(fill.paint, {
44+
'fill-color': trace.fillcolor
45+
});
46+
}
3647

3748
if(isVisible && hasLines) {
38-
geojsonLines = makeLineGeoJSON(trace);
39-
layoutLines.visibility = 'visible';
49+
lines.geojson = makeLineGeoJSON(trace, coords);
50+
lines.layout.visibility = 'visible';
4051

4152
var line = trace.line;
4253

43-
Lib.extendFlat(paintLines, {
54+
Lib.extendFlat(lines.paint, {
4455
'line-width': line.width,
4556
'line-color': line.color,
4657
'line-opacity': trace.opacity
@@ -55,35 +66,39 @@ module.exports = function convert(trace) {
5566
hash[COLOR_PROP] = {};
5667
hash[SIZE_PROP] = {};
5768

58-
geojsonMarkers = makeMarkerGeoJSON(trace, hash);
59-
layoutMarkers.visibility = 'visible';
69+
markers.geojson = makeMarkerGeoJSON(trace, hash);
70+
markers.layout.visibility = 'visible';
6071

61-
Lib.extendFlat(paintMarkers, {
72+
Lib.extendFlat(markers.paint, {
6273
'circle-opacity': trace.opacity * trace.marker.opacity,
6374
'circle-color': calcMarkerColor(trace, hash),
6475
'circle-radius': calcMarkerSize(trace, hash)
6576
});
6677
}
6778

6879
return {
69-
geojsonLines: geojsonLines,
70-
layoutLines: layoutLines,
71-
paintLines: paintLines,
72-
73-
geojsonMarkers: geojsonMarkers,
74-
layoutMarkers: layoutMarkers,
75-
paintMarkers: paintMarkers
80+
fill: fill,
81+
lines: lines,
82+
markers: markers
7683
};
7784
};
7885

86+
function initContainer() {
87+
return {
88+
geojson: makeBlankGeoJSON(),
89+
layout: { visibility: 'none' },
90+
paint: {}
91+
};
92+
}
93+
7994
function makeBlankGeoJSON() {
8095
return {
8196
type: 'Point',
8297
coordinates: []
8398
};
8499
}
85100

86-
function makeLineGeoJSON(trace) {
101+
function getCoords(trace) {
87102
var len = getCoordLen(trace),
88103
connectgaps = trace.connectgaps;
89104

@@ -105,6 +120,17 @@ function makeLineGeoJSON(trace) {
105120

106121
coords.push(lineString);
107122

123+
return coords;
124+
}
125+
126+
function makeFillGeoJSON(trace, coords) {
127+
return {
128+
type: 'Polygon',
129+
coordinates: coords
130+
};
131+
}
132+
133+
function makeLineGeoJSON(trace, coords) {
108134
return {
109135
type: 'MultiLineString',
110136
coordinates: coords

‎src/traces/scattermapbox/plot.js

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,40 @@ function ScatterMapbox(mapbox, uid) {
1717
this.map = mapbox.map;
1818

1919
this.uid = uid;
20-
this.idSourceMarkers = uid + '-source-markers';
20+
21+
this.idSourceFill = uid + '-source-fill';
2122
this.idSourceLines = uid + '-source-lines';
22-
this.idLayerMarkers = uid + '-layer-markers';
23+
this.idSourceMarkers = uid + '-source-markers';
24+
25+
this.idLayerFill = uid + '-layer-fill';
2326
this.idLayerLines = uid + '-layer-lines';
27+
this.idLayerMarkers = uid + '-layer-markers';
28+
29+
this.sourceFill = mapbox.createGeoJSONSource();
30+
this.map.addSource(this.idSourceFill, this.sourceFill);
2431

2532
this.sourceLines = mapbox.createGeoJSONSource();
2633
this.map.addSource(this.idSourceLines, this.sourceLines);
34+
35+
this.sourceMarkers = mapbox.createGeoJSONSource();
36+
this.map.addSource(this.idSourceMarkers, this.sourceMarkers);
37+
38+
this.map.addLayer({
39+
id: this.idLayerFill,
40+
source: this.idSourceFill,
41+
type: 'fill'
42+
});
43+
2744
this.map.addLayer({
2845
id: this.idLayerLines,
2946
source: this.idSourceLines,
30-
type: 'line',
31-
interactive: true
47+
type: 'line'
3248
});
3349

34-
this.sourceMarkers = mapbox.createGeoJSONSource();
35-
this.map.addSource(this.idSourceMarkers, this.sourceMarkers);
3650
this.map.addLayer({
3751
id: this.idLayerMarkers,
3852
source: this.idSourceMarkers,
39-
type: 'circle',
40-
interactive: true
53+
type: 'circle'
4154
});
4255

4356
// how to add 'symbol' layer ???
@@ -49,29 +62,38 @@ function ScatterMapbox(mapbox, uid) {
4962
var proto = ScatterMapbox.prototype;
5063

5164
proto.update = function update(trace) {
52-
var opts = convert(trace);
65+
var map = this.map,
66+
opts = convert(trace);
5367

54-
setOptions(this.map, this.idLayerLines, 'setLayoutProperty', opts.layoutLines);
55-
setOptions(this.map, this.idLayerMarkers, 'setLayoutProperty', opts.layoutMarkers);
68+
setOptions(map, this.idLayerFill, 'setLayoutProperty', opts.fill.layout);
69+
setOptions(map, this.idLayerLines, 'setLayoutProperty', opts.lines.layout);
70+
setOptions(map, this.idLayerMarkers, 'setLayoutProperty', opts.markers.layout);
5671

57-
if(opts.layoutLines.visibility === 'visible') {
58-
this.sourceLines.setData(opts.geojsonLines);
59-
setOptions(this.map, this.idLayerLines, 'setPaintProperty', opts.paintLines);
72+
if(isVisible(opts.fill)) {
73+
this.sourceFill.setData(opts.fill.geojson);
74+
setOptions(map, this.idLayerFill, 'setPaintProperty', opts.fill.paint);
6075
}
6176

62-
if(opts.layoutMarkers.visibility === 'visible') {
63-
this.sourceMarkers.setData(opts.geojsonMarkers);
64-
setOptions(this.map, this.idLayerMarkers, 'setPaintProperty', opts.paintMarkers);
77+
if(isVisible(opts.lines)) {
78+
this.sourceLines.setData(opts.lines.geojson);
79+
setOptions(map, this.idLayerLines, 'setPaintProperty', opts.lines.paint);
80+
}
81+
82+
if(isVisible(opts.markers)) {
83+
this.sourceMarkers.setData(opts.markers.geojson);
84+
setOptions(map, this.idLayerMarkers, 'setPaintProperty', opts.markers.paint);
6585
}
6686
};
6787

6888
proto.dispose = function dispose() {
6989
var map = this.map;
7090

71-
map.removeLayer(this.idLayerMarkers);
72-
map.removeSource(this.idSourceMarkers);
91+
map.removeLayer(this.idLayerFill);
7392
map.removeLayer(this.idLayerLines);
93+
map.removeLayer(this.idLayerMarkers);
94+
7495
map.removeSource(this.idSourceLines);
96+
map.removeSource(this.idSourceMarkers);
7597
};
7698

7799
function setOptions(map, id, methodName, opts) {
@@ -84,6 +106,10 @@ function setOptions(map, id, methodName, opts) {
84106
}
85107
}
86108

109+
function isVisible(layerOpts) {
110+
return layerOpts.layout.visibility === 'visible';
111+
}
112+
87113
module.exports = function createScatterMapbox(mapbox, trace) {
88114
var scatterMapbox = new ScatterMapbox(mapbox, trace.uid);
89115
scatterMapbox.update(trace);

0 commit comments

Comments
 (0)