Skip to content
This repository has been archived by the owner on Jan 9, 2020. It is now read-only.

Add color legend support to ktile raster layer #451

Merged
merged 3 commits into from
Nov 17, 2017
Merged

Add color legend support to ktile raster layer #451

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
10d4d70
Add color legend support to ktile raster layer and some code refactoring
matthewma7 Oct 16, 2017
c80dc9a
Wrap a long line
matthewma7 Nov 16, 2017
3b6c510
Fix an code error that was introduced by previous template literal mu…
matthewma7 Nov 17, 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
4 changes: 2 additions & 2 deletions web_external/templates/widgets/kTileConfigWidget.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
.form-group
label Band
select.form-control.m-band(disabled=!custom)
each band in bands
option(value=band, selected=band==selectedBand) band #{band}
each band, key in bands
option(value=key, selected=key==selectedBand) band #{key}
.col-md-6
.form-group
label Colors
Expand Down
26 changes: 21 additions & 5 deletions web_external/views/adapters/Adapters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { getApiRoot } from 'girder/rest';

import ClickInfoWidget from '../widgets/ClickInfoWidget';
import ClickInfoModel from '../../models/ClickInfoModel';
import palettableColorbrewerMapper from '../util/palettableColorbrewerMapper';

import geojsonUtil from '../../geojsonUtil';

Expand Down Expand Up @@ -600,21 +601,36 @@ rendering.geo.WmsRepresentation = rendering.geo.defineMapLayer('wms', function (
}, rendering.geo.MapRepresentation);

rendering.geo.KtileRepresentation = rendering.geo.defineMapLayer('ktile', function () {
this.init = function (container, dataset) {
this.init = function (container, dataset, visProperties) {
var layer = container.createLayer('osm', {
attribution: null,
keepLower: false
});
var fileId = dataset.get('meta').minerva.original_files[0]._id;
var visProperties = dataset.getMinervaMetadata().visProperties;
var url = getApiRoot() + '/ktile/' + fileId;
if (visProperties) {
layer.url((x, y, z) => `${url}/${z}/${x}/${y}?palette=${visProperties.colorbrewer}&band=${visProperties.band}&minimum=${visProperties.min}&maximum=${visProperties.max}`);
} else {
if (_.isEmpty(visProperties)) {
layer.url((x, y, z) => `${url}/${z}/${x}/${y}`);
} else {
layer.url((x, y, z) => `${url}/${z}/${x}/${y}?
palette=${visProperties.palettable}&band=${visProperties.band}&
minimum=${visProperties.min}&maximum=${visProperties.max}`);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unbreak this line or change how it is generated. The extra spaces and newlines mess up the query parameters. This should work instead:

            layer.url((x, y, z) => `${url}/${z}/${x}/${y}?` +
            `palette=${visProperties.palettable}&band=${visProperties.band}&` +
            `minimum=${visProperties.min}&maximum=${visProperties.max}`);

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, yes. I was carried away with the multiline support of template literals.

var colorLegendCategory = {
type: 'discrete',
scale: 'linear',
colors: palettableColorbrewerMapper.toRampColors(visProperties.palettable),
domain: [visProperties.min, visProperties.max]
};
this.colorLegendCategory = colorLegendCategory;
container.addColorLegendCategories([colorLegendCategory]);
}
this.geoJsLayer = layer;

this.trigger('m:map_layer_renderable', this);
};

var existingDelete = this.delete;
this.delete = function (container) {
existingDelete.call(this, container);
container.removeColorLegendCategories([this.colorLegendCategory]);
};
}, rendering.geo.MapRepresentation);
13 changes: 11 additions & 2 deletions ...ws/widgets/palettableColorbrewerMapper.js → ...views/util/palettableColorbrewerMapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,28 @@
import _ from 'underscore';
import colorbrewer from 'colorbrewer';

const colorbrewerCategories = {
sequential: ['Blues_9', 'BuGn_9', 'BuPu_9', 'GnBu_9', 'Greens_9', 'Greys_9', 'OrRd_9', 'Oranges_9', 'PuBu_9', 'PuBuGn_9', 'PuRd_9', 'Purples_9', 'RdPu_9', 'Reds_9', 'YlGn_9', 'YlGnBu_9', 'YlOrBr_9', 'YlOrRd_9'],
diverging: ['BrBG_11', 'PRGn_11', 'PiYG_11', 'PuOr_11', 'RdBu_11', 'RdGy_11', 'RdYlBu_11', 'RdYlGn_11', 'Spectral_11'],
qualitative: ['Accent_8', 'Dark2_8', 'Paired_12', 'Pastel1_9', 'Pastel2_8', 'Set1_9', 'Set2_8', 'Set3_12']
};

const colorbrewerMapper = {
const palettableColorbrewerMapper = {
toRamp(palettable) {
if (!palettable) {
return null;
}
return palettable.split('.').slice(-1)[0].split('_')[0];
},

toRampColors(palettable) {
if (!palettable) {
return null;
}
var [ramp, number] = palettable.split('.').slice(-1)[0].split('_');
return colorbrewer[ramp][number];
},

toPalettable(rampName) {
if (!rampName) {
return null;
Expand All @@ -31,6 +40,6 @@ const colorbrewerMapper = {
}
};

export default colorbrewerMapper;
export default palettableColorbrewerMapper;

export { colorbrewerCategories };
7 changes: 3 additions & 4 deletions web_external/views/widgets/ColorbrewerPicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import _ from 'underscore';
import colorbrewer from 'colorbrewer';
import 'bootstrap-select';
import 'bootstrap-select/dist/css/bootstrap-select.css';

import { colorbrewerCategories } from './palettableColorbrewerMapper';
import palettableColorbrewerMapper, { colorbrewerCategories } from '../util/palettableColorbrewerMapper';
import View from '../view';
import template from '../../templates/widgets/colorbrewerPicker.pug';
import '../../stylesheets/widgets/colorBrewerPicker.styl';
Expand All @@ -26,8 +25,8 @@ const ColorbrewerPicker = View.extend({
this.categorizedRamps =
_.mapObject(colorbrewerCategories, (val, key) => {
return val.map((ramp) => {
var [rampName, number] = ramp.split('_');
var colors = colorbrewer[rampName][number];
var [rampName] = ramp.split('_');
var colors = palettableColorbrewerMapper.toRampColors(ramp);
var html = "<ul class='m-colorbrewer-ramp'>";
_.each(colors, function (color, i) {
html += "<li style='background-color: " + color + "'/>";
Expand Down
27 changes: 17 additions & 10 deletions web_external/views/widgets/KTileConfigWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { restRequest } from 'girder/rest';

import View from '../view';
import ColorbrewerPicker from './ColorbrewerPicker';
import palettableColorbrewerMapper from './palettableColorbrewerMapper';
import palettableColorbrewerMapper from '../util/palettableColorbrewerMapper';
import template from '../../templates/widgets/kTileConfigWidget.pug';
import '../../stylesheets/widgets/kTileConfigWidget.styl';
/**
Expand All @@ -14,10 +14,10 @@ const KTileConfigWidget = View.extend({
'submit #m-json-geo-render-form': function (e) {
e.preventDefault();
var mm = this.dataset.getMinervaMetadata();
if (this.custom && this.selectedBand && this.selectedColorbrewer) {
if (this.custom && this.selectedBand && this.selectedPalettable) {
mm.visProperties = {
band: this.selectedBand,
colorbrewer: this.selectedColorbrewer,
palettable: this.selectedPalettable,
min: this.min,
max: this.max
};
Expand All @@ -41,6 +41,9 @@ const KTileConfigWidget = View.extend({
},
'change select.m-band': function (e) {
this.selectedBand = e.currentTarget.value;
this.max = this.bands[this.selectedBand].max;
this.min = this.bands[this.selectedBand].min;
this.render();
},
'change input.min': function (e) {
this.min = e.target.value;
Expand All @@ -58,15 +61,15 @@ const KTileConfigWidget = View.extend({
this.modalOpened = false;
this.bands = [];
this.selectedBand = null;
this.selectedColorbrewer = null;
this.selectedPalettable = null;
this.max = 255;
this.min = 0;
this.custom = false;
var minervaMeta = this.dataset.getMinervaMetadata();
if (minervaMeta && minervaMeta.visProperties && minervaMeta.visProperties.band && minervaMeta.visProperties.colorbrewer) {
if (minervaMeta && minervaMeta.visProperties && minervaMeta.visProperties.band && minervaMeta.visProperties.palettable) {
this.custom = true;
this.selectedBand = minervaMeta.visProperties.band;
this.selectedColorbrewer = minervaMeta.visProperties.colorbrewer;
this.selectedPalettable = minervaMeta.visProperties.palettable;
this.min = minervaMeta.visProperties.min;
this.max = minervaMeta.visProperties.max;
}
Expand All @@ -82,9 +85,9 @@ const KTileConfigWidget = View.extend({
parentView: this,
el: this.$('.colorbrewer-picker-container'),
disabled: !this.custom,
ramp: palettableColorbrewerMapper.toRamp(this.selectedColorbrewer),
ramp: palettableColorbrewerMapper.toRamp(this.selectedPalettable),
onChange: (ramp) => {
this.selectedColorbrewer = palettableColorbrewerMapper.toPalettable(ramp);
this.selectedPalettable = palettableColorbrewerMapper.toPalettable(ramp);
}
}).render();
this._loadMeta();
Expand All @@ -98,8 +101,12 @@ const KTileConfigWidget = View.extend({
url: `/ktile/${this.dataset.get('meta').minerva.original_files[0]._id}/info`,
type: 'GET'
}).done((resp) => {
this.bands = _.range(1, resp.bands + 1);
this.selectedBand = this.selectedBand || this.bands[0];
this.bands = resp.bands;
if (!this.selectedBand) {
this.selectedBand = _.keys(this.bands)[0];
this.max = this.bands[this.selectedBand].max;
this.min = this.bands[this.selectedBand].min;
}
this.render();
});
}
Expand Down