Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rename layer visible -> enabled & don't allow descendant layers to override #523

Merged
merged 4 commits into from
Mar 17, 2017
Merged

Rename layer visible -> enabled & don't allow descendant layers to override #523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8ea738
layer `visible` property cannot be overridden by sub-layers (matches …
bcamper Mar 15, 2017
02ed27b
rename layer-level `visible` property to `enabled` (with backwards co…
bcamper Mar 16, 2017
5d082fe
demo: update for new layer `visible` -> `enabled` syntax
bcamper Mar 16, 2017
e054026
demo: fix style switching
bcamper Mar 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 30 additions & 30 deletions demos/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,10 +212,10 @@ Enjoy!
}
}

scene.config.layers.earth.visible = true; // some custom shaders may need to render earth
scene.config.layers.earth.fill.enabled = true; // some custom shaders may need to render earth
}
else {
scene.config.layers.earth.visible = false; // don't need earth layer in default style
scene.config.layers.earth.fill.enabled = false; // don't need earth layer in default style
}
}

Expand All @@ -236,70 +236,70 @@ Enjoy!
},
'rainbow': {
setup: function (style) {
scene.config.layers.earth.draw.polygons.color = '#333';
scene.config.layers.earth.fill.draw.polygons.color = '#333';
scene.config.layers.roads.draw.lines.color = '#777';
scene.config.layers.pois.visible = false;
scene.config.layers.buildings.draw.polygons.style = style;
scene.config.layers.buildings.extruded.draw.polygons.style = style;
scene.config.layers.pois.enabled = false;
scene.config.layers.buildings.polygons.draw.polygons.style = style;
scene.config.layers.buildings.polygons.extruded.draw.polygons.style = style;
}
},
'popup': {
setup: function (style) {
scene.config.layers.buildings.extruded.draw.polygons.style = style;
scene.config.layers.buildings.polygons.extruded.draw.polygons.style = style;
}
},
'elevator': {
setup: function (style) {
scene.config.layers.buildings.extruded.draw.polygons.style = style;
scene.config.layers.buildings.polygons.extruded.draw.polygons.style = style;
}
},
'halftone': {
setup: function (style) {
scene.config.scene.background.color = 'black';

var layers = scene.config.layers;
layers.earth.draw.polygons.style = 'halftone_polygons';
layers.earth.fill.draw.polygons.style = 'halftone_polygons';
layers.water.draw.polygons.style = 'halftone_polygons';
layers.landuse.areas.draw.polygons.style = 'halftone_polygons';
layers.buildings.draw.polygons.style = 'halftone_polygons';
layers.buildings.extruded.draw.polygons.style = 'halftone_polygons';
layers.buildings.draw.polygons.color = 'Style.color.pseudoRandomColor()';
layers.buildings.polygons.draw.polygons.style = 'halftone_polygons';
layers.buildings.polygons.extruded.draw.polygons.style = 'halftone_polygons';
layers.buildings.polygons.draw.polygons.color = 'Style.color.pseudoRandomColor()';
layers.roads.draw.lines.style = 'halftone_lines';
layers.pois.visible = false;
layers.pois.enabled = false;

var visible_layers = ['landuse', 'water', 'roads', 'buildings'];
var enabled_layers = ['landuse', 'water', 'roads', 'buildings'];
Object.keys(layers).forEach(function(l) {
if (visible_layers.indexOf(l) === -1) {
layers[l].visible = false;
if (enabled_layers.indexOf(l) === -1) {
layers[l].enabled = false;
}
});
}
},
'windows': {
camera: 'isometric', // force isometric
setup: function (style) {
scene.config.layers.earth.draw.polygons.color = '#333';
scene.config.layers.earth.fill.draw.polygons.color = '#333';
scene.config.layers.roads.draw.lines.color = '#777';
scene.config.layers.pois.visible = false;
scene.config.layers.pois.enabled = false;

scene.config.layers.buildings.draw.polygons.style = style;
scene.config.layers.buildings.extruded.draw.polygons.style = style;
// scene.config.layers.pois.visible = false;
scene.config.layers.buildings.polygons.draw.polygons.style = style;
scene.config.layers.buildings.polygons.extruded.draw.polygons.style = style;
// scene.config.layers.pois.enabled = false;
}
},
'envmap': {
setup: function (style) {
scene.config.layers.earth.draw.polygons.color = '#333';
scene.config.layers.earth.fill.draw.polygons.color = '#333';
scene.config.layers.roads.draw.lines.color = '#777';

scene.config.layers.buildings.draw.polygons.style = style;
scene.config.layers.buildings.extruded.draw.polygons.style = style;
scene.config.layers.buildings.polygons.draw.polygons.style = style;
scene.config.layers.buildings.polygons.extruded.draw.polygons.style = style;

var envmaps = {
'Sunset': 'images/sunset.jpg',
'Chrome': 'images/LitSphere_test_02.jpg',
'Matte Red': 'images/matball01.jpg',
'Color Wheel': 'images/wheel.png'
'Sunset': 'demos/images/sunset.jpg',
'Chrome': 'demos/images/LitSphere_test_02.jpg',
'Matte Red': 'demos/images/matball01.jpg',
'Color Wheel': 'demos/images/wheel.png'
};

this.state.envmap = envmaps['Sunset'];
Expand Down Expand Up @@ -414,11 +414,11 @@ Enjoy!
return;
}

layer_controls[l] = !(layer.scene.config.layers[l].visible == false);
layer_controls[l] = !(layer.scene.config.layers[l].enabled == false);
layer_gui.
add(layer_controls, l).
onChange(function(value) {
layer.scene.config.layers[l].visible = value;
layer.scene.config.layers[l].enabled = value;
layer.scene.rebuild();
});
});
Expand Down
40 changes: 19 additions & 21 deletions demos/scene.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,15 +184,17 @@ layers:

earth:
data: { source: mapzen }
visible: false
draw:
polygons:
order: global.feature_order
color: '#f0ebeb'

continents:
fill:
filter: { $geometry: polygon }
enabled: false
draw:
polygons:
order: global.feature_order
color: '#f0ebeb'

labels:
filter: { kind: continent, $geometry: point }
visible: true
draw:
text:
text_source: global.language_text_source
Expand Down Expand Up @@ -257,7 +259,6 @@ layers:

oceans:
filter: { kind: ocean }
visible: true
draw:
text:
font:
Expand All @@ -267,7 +268,6 @@ layers:

seas:
filter: { kind: sea, $zoom: { min: 7 } }
visible: true
draw:
text:
font:
Expand Down Expand Up @@ -626,29 +626,29 @@ layers:

boundaries:
data: { source: mapzen}
visible: false
draw:
lines:
visible: false
order: global.feature_order
width: 2px
color: wheat

country:
filter: { kind: country }
visible: true
draw:
lines:
visible: true
color: [0.824, 0.651, 0.329, 1.00]
water:
filter: { maritime_boundary: true }
visible: false
draw: { lines: { visible: false } }

region:
filter: { kind: [region, macroregion] }
visible: true
draw: { lines: { visible: true } }
water:
filter: { maritime_boundary: true }
visible: false
draw: { lines: { visible: false } }

places:
data: { source: mapzen }
Expand All @@ -659,7 +659,6 @@ layers:
kind: locality
kind_detail: city
$zoom: { max: 11 }
visible: true
draw:
points:
size: 8px
Expand All @@ -681,6 +680,7 @@ layers:
text-only:
draw:
text:
visible: false
text_source: global.language_text_source
priority: 1
font:
Expand All @@ -689,18 +689,16 @@ layers:
fill: [0, 0, 0, .8]
stroke: { color: white, width: 4 }
transform: uppercase
visible: false

countries:
filter:
kind: country
any:
- { population: { min: 100000000 } }
- { $zoom: { min: 5, max: 8 }, population: { min: 1000000 } }
# - population: { min: 10000000 }
visible: true
draw:
text:
visible: true
buffer: 2px
font:
weight: bold
Expand All @@ -711,9 +709,9 @@ layers:
kind: region
kind_detail: [state, province]
$zoom: { min: 5, max: 9 }
visible: true
draw:
text:
visible: true
buffer: 2px
font:
# weight: bold
Expand All @@ -731,9 +729,9 @@ layers:
kind: locality
kind_detail: city
$zoom: { min: 11 } # show city point labels below z11
visible: true
draw:
text:
visible: true
font:
weight: bold
size: [[8, 11px], [12, 16px]]
Expand All @@ -743,9 +741,9 @@ layers:
filter:
- { kind: [neighbourhood, macrohood], $zoom: { min: 13 } }
- { kind: microhood, $zoom: { min: 15 } }
visible: true
draw:
text:
visible: true
font:
size: [[13, 11px], [14, 11px], [15, 13px]]
style: italic
Expand Down
62 changes: 38 additions & 24 deletions src/styles/layer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import log from '../utils/log';
import mergeObjects from '../utils/merge';
import {buildFilter} from './filter';

export const whiteList = ['filter', 'draw', 'visible', 'data'];
// N.B.: 'visible' is legacy compatibility for 'enabled'
export const whiteList = ['filter', 'draw', 'visible', 'enabled', 'data'];

export const layer_cache = {};

Expand Down Expand Up @@ -72,7 +73,7 @@ const blacklist = ['any', 'all', 'not', 'none'];

class Layer {

constructor({ layer, name, parent, draw, visible, filter }) {
constructor({ layer, name, parent, draw, visible, enabled, filter }) {
this.id = Layer.id++;
this.config_data = layer.data;
this.parent = parent;
Expand All @@ -81,7 +82,14 @@ class Layer {
this.draw = draw;
this.filter = filter;
this.is_built = false;
this.visible = visible !== undefined ? visible : (this.parent && this.parent.visible);

enabled = (enabled === undefined) ? visible : enabled; // `visible` property is backwards compatible for `enabled`
if (this.parent && this.parent.visible === false) {
this.enabled = false; // all descendants of disabled layer are also disabled
}
else {
this.enabled = (enabled !== false); // layer is enabled unless explicitly set to disabled
}

// Denormalize layer name to draw groups
if (this.draw) {
Expand Down Expand Up @@ -228,6 +236,10 @@ class Layer {
}

doesMatch (context) {
if (!this.enabled) {
return false;
}

if (!this.is_built) {
this.build();
}
Expand Down Expand Up @@ -397,32 +409,34 @@ export function parseLayerTree(name, layer, parent, styles) {

let r = new Create(Object.assign(properties, whiteListed));

if (parent) {
parent.addLayer(r);
}
// only process child layers if this layer is enabled
if (r.enabled) {
if (parent) {
parent.addLayer(r);
}

if (!empty) {
for (let key in nonWhiteListed) {
let property = nonWhiteListed[key];
if (typeof property === 'object' && !Array.isArray(property)) {
parseLayerTree(key, property, r, styles);
} else {
// Invalid layer
let msg = `Layer value must be an object: cannot create layer '${key}: ${JSON.stringify(property)}'`;
msg += `, under parent layer '${r.full_name}'.`;

// If the parent is a style name, this may be an incorrectly nested layer
if (styles[r.name]) {
msg += ` The parent name '${r.name}' is also the name of a style, did you mean to create a 'draw' group`;
if (parent) {
msg += ` under '${parent.name}'`;
if (!empty) {
for (let key in nonWhiteListed) {
let property = nonWhiteListed[key];
if (typeof property === 'object' && !Array.isArray(property)) {
parseLayerTree(key, property, r, styles);
} else {
// Invalid layer
let msg = `Layer value must be an object: cannot create layer '${key}: ${JSON.stringify(property)}'`;
msg += `, under parent layer '${r.full_name}'.`;

// If the parent is a style name, this may be an incorrectly nested layer
if (styles[r.name]) {
msg += ` The parent name '${r.name}' is also the name of a style, did you mean to create a 'draw' group`;
if (parent) {
msg += ` under '${parent.name}'`;
}
msg += ` instead?`;
}
msg += ` instead?`;
log('warn', msg); // TODO: fire external event that clients to subscribe to
}
log('warn', msg); // TODO: fire external event that clients to subscribe to
}
}

}

return r;
Expand Down