Rename from legend2DWidget to colorLegendWidget; add methods for adding and removing categories; other improvements;
ADD
examples/color-legend/example.json
+{
+ "path": "color-legend",
+ "title": "Color legends",
+ "exampleCss": ["main.css"],
+ "exampleJs": ["main.js"],
+ "about": {
+ "text": "This example shows how to create a discrete or continous color legends."
+ },
+ "disabled": true
+}

RENAME
examples/legend2d/index.pug
examples/color-legend/index.pug
RENAME
examples/legend2d/main.css
examples/color-legend/main.css
RENAME
examples/legend2d/main.js
examples/color-legend/main.js
@@ -15,7 +15,7 @@ $(function () {
var ui = map.createLayer('ui');
// Create a legend widget
- var legend = ui.createWidget('legend2d', {
+ var legend = ui.createWidget('colorLegend', {
position: {
right: 20,
top: 10

ADD
examples/color-legend/thumb.jpg
examples/color-legend/thumb.jpg
Binary files /dev/null and b/examples/color-legend/thumb.jpg differ

DELETE
examples/legend2d/example.json
-{
- "path": "legend2d",
- "title": "2D legends",
- "exampleCss": ["main.css"],
- "exampleJs": ["main.js"],
- "about": {
- "text": "This example shows how to create a legend to describe feature styles on a map."
- },
- "disabled": true
-}

DELETE
examples/legend2d/thumb.jpg
examples/legend2d/thumb.jpg
Binary files a/examples/legend2d/thumb.jpg and /dev/null differ

RENAME
src/ui/legend2dWidget.js
src/ui/colorLegendWidget.js
@@ -3,10 +3,10 @@ var domWidget = require('./domWidget');
var inherit = require('../inherit');
var registerWidget = require('../registry').registerWidget;
-var legend2dWidget = function (arg) {
+var colorLegendWidget = function (arg) {
'use strict';
- if (!(this instanceof legend2dWidget)) {
- return new legend2dWidget(arg);
+ if (!(this instanceof colorLegendWidget)) {
+ return new colorLegendWidget(arg);
}
domWidget.call(this, arg);
@@ -21,6 +21,7 @@ var legend2dWidget = function (arg) {
var canvas = m_this.canvas();
d3.select(canvas)
.style({
+ 'display': 'none',
'padding': '10px',
'border': '1.5px solid black',
'border-radius': '3px',
@@ -58,6 +59,13 @@ var legend2dWidget = function (arg) {
this.draw = function () {
d3.select(m_this.canvas()).selectAll('div.legends').remove();
+ if (!m_categories.length) {
+ d3.select(m_this.canvas()).style('display', 'none');
+ return;
+ } else {
+ d3.select(m_this.canvas()).style('display', 'block');
+ }
+
var container = d3.select(m_this.canvas())
.append('div')
.attr('class', 'legends');
@@ -102,6 +110,18 @@ var legend2dWidget = function (arg) {
this.draw();
};
+ this.addCategories = function (categories) {
+ m_categories = m_categories.concat(categories);
+ this.draw();
+ };
+
+ this.removeCategories = function (categories) {
+ m_categories = m_categories.filter(function (category) {
+ return categories.indexOf(category) === -1;
+ });
+ this.draw();
+ };
+
this._drawDiscrete = function (svg, width, category) {
var valueRange, valueScale, colorScale, axisScale, axis, steps, ticks;
if (category.scale === 'ordinal') {
@@ -298,7 +318,7 @@ function getPrecision(a) {
return p;
}
-inherit(legend2dWidget, domWidget);
+inherit(colorLegendWidget, domWidget);
-registerWidget('dom', 'legend2d', legend2dWidget);
-module.exports = legend2dWidget;
+registerWidget('dom', 'colorLegend', colorLegendWidget);
+module.exports = colorLegendWidget;

MODIFY
src/ui/index.js
src/ui/index.js
module.exports = {
domWidget: require('./domWidget'),
legendWidget: require('./legendWidget'),
- legend2dWidget: require('./legend2dWidget'),
+ colorLegendWidget: require('./colorLegendWidget'),
sliderWidget: require('./sliderWidget'),
svgWidget: require('./svgWidget'),
uiLayer: require('./uiLayer'),

Rename from legend2DWidget to colorLegendWidget; add methods for adding and removing categories; other improvements;