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

Skip to content

Commit 32973fc

Browse files
etpinardetpinard
committed
add layer type 'circle' :
- so that Point geojson can be displayed as mapbox circle layers - change layer attribute to be more one-to-one with the mapbox api, where styles of different layer types will be set in different container objects
1 parent 4a8563b commit 32973fc

File tree

5 files changed

+113
-32
lines changed

5 files changed

+113
-32
lines changed

‎src/plots/mapbox/layers.js

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -126,21 +126,32 @@ function convertPaintOpts(opts) {
126126

127127
switch(opts.type) {
128128

129+
case 'circle':
130+
var circle = opts.circle;
131+
Lib.extendFlat(paintOpts, {
132+
'circle-radius': circle.radius,
133+
'circle-color': circle.color,
134+
'circle-opacity': opts.opacity
135+
});
136+
break;
137+
129138
case 'line':
139+
var line = opts.line;
130140
Lib.extendFlat(paintOpts, {
131-
'line-width': opts.line.width,
132-
'line-color': opts.line.color,
141+
'line-width': line.width,
142+
'line-color': line.color,
133143
'line-opacity': opts.opacity
134144
});
135145
break;
136146

137147
case 'fill':
148+
var fill = opts.fill;
138149
Lib.extendFlat(paintOpts, {
139-
'fill-color': opts.fillcolor,
140-
'fill-outline-color': opts.line.color,
150+
'fill-color': fill.color,
151+
'fill-outline-color': fill.outlinecolor,
141152
'fill-opacity': opts.opacity
142153

143-
// no way to pass line.width at the moment
154+
// no way to pass specify outline width at the moment
144155
});
145156
break;
146157
}

‎src/plots/mapbox/layout_attributes.js

Lines changed: 63 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@
99

1010
'use strict';
1111

12-
var scatterMapboxAttrs = require('../../traces/scattermapbox/attributes');
1312
var defaultLine = require('../../components/color').defaultLine;
14-
var extendFlat = require('../../lib').extendFlat;
15-
16-
var lineAttrs = scatterMapboxAttrs.line;
1713

1814

1915
module.exports = {
@@ -129,12 +125,14 @@ module.exports = {
129125

130126
type: {
131127
valType: 'enumerated',
132-
values: ['line', 'fill'],
128+
values: ['circle', 'line', 'fill'],
133129
dflt: 'line',
134130
role: 'info',
135131
description: [
136132
'Sets the layer type.',
137-
'Support for *raster*, *background* types is coming soon.'
133+
'Support for *raster*, *background* types is coming soon.',
134+
'Note that *line* and *fill* are not compatible with Point',
135+
'GeoJSON geometry.'
138136
].join(' ')
139137
},
140138

@@ -150,14 +148,68 @@ module.exports = {
150148
].join(' ')
151149
},
152150

151+
circle: {
152+
radius: {
153+
valType: 'number',
154+
dflt: 15,
155+
role: 'style',
156+
description: [
157+
'Sets the circle radius.',
158+
'Has an effect only when `type` is set to *circle*.'
159+
].join(' ')
160+
},
161+
color: {
162+
valType: 'color',
163+
dflt: defaultLine,
164+
role: 'style',
165+
description: [
166+
'Sets the circle color.',
167+
'Has an effect only when `type` is set to *circle*.'
168+
].join(' ')
169+
}
170+
},
171+
153172
line: {
154-
color: extendFlat({}, lineAttrs.color, {
155-
dflt: defaultLine
156-
}),
157-
width: lineAttrs.width
173+
width: {
174+
valType: 'number',
175+
dflt: 2,
176+
role: 'style',
177+
description: [
178+
'Sets the line radius.',
179+
'Has an effect only when `type` is set to *line*.'
180+
].join(' ')
181+
},
182+
color: {
183+
valType: 'color',
184+
dflt: defaultLine,
185+
role: 'style',
186+
description: [
187+
'Sets the line color.',
188+
'Has an effect only when `type` is set to *line*.'
189+
].join(' ')
190+
}
158191
},
159192

160-
fillcolor: scatterMapboxAttrs.fillcolor,
193+
fill: {
194+
color: {
195+
valType: 'color',
196+
dflt: defaultLine,
197+
role: 'style',
198+
description: [
199+
'Sets the fill color.',
200+
'Has an effect only when `type` is set to *fill*.'
201+
].join(' ')
202+
},
203+
outlinecolor: {
204+
valType: 'color',
205+
dflt: defaultLine,
206+
role: 'style',
207+
description: [
208+
'Sets the fill outline color.',
209+
'Has an effect only when `type` is set to *fill*.'
210+
].join(' ')
211+
}
212+
},
161213

162214
opacity: {
163215
valType: 'number',

‎src/plots/mapbox/layout_defaults.js

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,26 +49,39 @@ function handleLayerDefaults(containerIn, containerOut) {
4949
}
5050

5151
for(var i = 0; i < layersIn.length; i++) {
52-
layerIn = layersIn[i];
52+
layerIn = layersIn[i] || {};
5353
layerOut = {};
5454

5555
var sourceType = coerce('sourcetype');
5656
coerce('source');
5757

5858
if(sourceType === 'vector') coerce('sourcelayer');
5959

60-
// maybe add smart default based off 'fillcolor' ???
60+
// maybe add smart default based off GeoJSON geometry
6161
var type = coerce('type');
6262

63-
var lineColor;
64-
if(type === 'line' || type === 'fill') {
65-
lineColor = coerce('line.color');
63+
var dfltColor;
64+
65+
if(type === 'circle') {
66+
dfltColor = (layerIn.line || {}).color || (layerIn.fill || {}).color;
67+
68+
coerce('circle.color', dfltColor);
69+
coerce('circle.radius');
70+
}
71+
72+
if(type === 'line') {
73+
dfltColor = (layerIn.circle || {}).color || (layerIn.fill || {}).color;
74+
75+
coerce('line.color', dfltColor);
76+
coerce('line.width');
6677
}
6778

68-
// no way to pass line.width to fill layers
69-
if(type === 'line') coerce('line.width');
79+
if(type === 'fill') {
80+
dfltColor = (layerIn.circle || {}).color || (layerIn.line || {}).color;
7081

71-
if(type === 'fill') coerce('fillcolor', lineColor);
82+
coerce('fill.color', dfltColor);
83+
coerce('fill.outlinecolor', dfltColor);
84+
}
7285

7386
coerce('below');
7487
coerce('opacity');

‎test/image/mocks/mapbox_layers.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -532,7 +532,9 @@
532532
},
533533
"type": "fill",
534534
"below": "water",
535-
"fillcolor": "#ece2f0",
535+
"fill": {
536+
"color": "#ece2f0"
537+
},
536538
"opacity": 0.8
537539
},
538540
{

‎test/jasmine/tests/mapbox_test.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,10 @@ describe('mapbox defaults', function() {
102102
color: 'red',
103103
width: 3
104104
},
105-
fillcolor: 'blue'
105+
fill: {
106+
color: 'blue',
107+
outlinecolor: 'green'
108+
}
106109
}]
107110
}
108111
};
@@ -111,11 +114,11 @@ describe('mapbox defaults', function() {
111114

112115
expect(layoutOut.mapbox.layers[0].line.color).toEqual('red');
113116
expect(layoutOut.mapbox.layers[0].line.width).toEqual(3);
114-
expect(layoutOut.mapbox.layers[0].fillcolor).toBeUndefined();
117+
expect(layoutOut.mapbox.layers[0].fill).toBeUndefined();
115118

116-
expect(layoutOut.mapbox.layers[1].line.color).toEqual('red');
117-
expect(layoutOut.mapbox.layers[1].line.width).toBeUndefined();
118-
expect(layoutOut.mapbox.layers[1].fillcolor).toEqual('blue');
119+
expect(layoutOut.mapbox.layers[1].line).toBeUndefined();
120+
expect(layoutOut.mapbox.layers[1].fill.color).toEqual('blue');
121+
expect(layoutOut.mapbox.layers[1].fill.outlinecolor).toEqual('green');
119122
});
120123
});
121124

@@ -353,8 +356,8 @@ describe('mapbox plots', function() {
353356
};
354357

355358
var styleUpdate0 = {
356-
'mapbox.layers[0].fillcolor': 'red',
357-
'mapbox.layers[0].line.color': 'blue',
359+
'mapbox.layers[0].fill.color': 'red',
360+
'mapbox.layers[0].fill.outlinecolor': 'blue',
358361
'mapbox.layers[0].opacity': 0.3
359362
};
360363

0 commit comments

Comments
 (0)