').addClass('tilemap-legend-title').text(titleText);
+ jqueryDiv.append($title);
+
+ this._legendColors.forEach((color) => {
+
+ const labelText = this._legendQuantizer
+ .invertExtent(color)
+ .map(this._valueFormatter)
+ .join(' – ');
+
+ const label = $('
');
+ const icon = $('
').css({
+ background: color,
+ 'border-color': makeColorDarker(color)
+ });
+
+ const text = $('').text(labelText);
+ label.append(icon);
+ label.append(text);
+
+ jqueryDiv.append(label);
+ });
+
+ }
+
+}
+
+
+function makeColorDarker(color) {
+ const amount = 1.3;//magic number, carry over from earlier
+ return d3.hcl(color).darker(amount).toString();
+}
+
+
+function getMinMax(data) {
+ let min = data[0].value;
+ let max = data[0].value;
+ for (let i = 1; i < data.length; i += 1) {
+ min = Math.min(data[i].value, min);
+ max = Math.max(data[i].value, max);
+ }
+ return { min, max };
+}
+
+
+function makeChoroplethStyleFunction(data, colorramp, joinField) {
+
+ if (data.length === 0) {
+ return function () {
+ return emptyStyle();
+ };
+ }
+
+ const { min, max } = getMinMax(data);
+
+
+ return function (geojsonFeature) {
+
+ const match = data.find((bucket) => {
+ if (typeof bucket.term === 'string' && typeof geojsonFeature.properties[joinField] === 'string') {
+ return normalizeString(bucket.term) === normalizeString(geojsonFeature.properties[joinField]);
+ } else {
+ return bucket.term === geojsonFeature.properties[joinField];
+ }
+ });
+
+ if (!match) {
+ return emptyStyle();
+ }
+
+ return {
+ fillColor: getChoroplethColor(match.value, min, max, colorramp),
+ weight: 2,
+ opacity: 1,
+ color: 'white',
+ fillOpacity: 0.7
+ };
+ };
+}
+
+
+function normalizeString(string) {
+ return string.trim().toLowerCase();
+}
+
+
+function getLegendColors(colorRamp) {
+ const colors = [];
+ colors[0] = getColor(colorRamp, 0);
+ colors[1] = getColor(colorRamp, Math.floor(colorRamp.length * 1 / 4));
+ colors[2] = getColor(colorRamp, Math.floor(colorRamp.length * 2 / 4));
+ colors[3] = getColor(colorRamp, Math.floor(colorRamp.length * 3 / 4));
+ colors[4] = getColor(colorRamp, colorRamp.length - 1);
+ return colors;
+}
+
+function getColor(colorRamp, i) {
+
+ if (!colorRamp[i]) {
+ return getColor();
+ }
+
+ const color = colorRamp[i][1];
+ const red = Math.floor(color[0] * 255);
+ const green = Math.floor(color[1] * 255);
+ const blue = Math.floor(color[2] * 255);
+ return `rgb(${red},${green},${blue})`;
+}
+
+
+function getChoroplethColor(value, min, max, colorRamp) {
+ if (min === max) {
+ return getColor(colorRamp, colorRamp.length - 1);
+ }
+ const fraction = (value - min) / (max - min);
+ const index = Math.round(colorRamp.length * fraction) - 1;
+ const i = Math.max(Math.min(colorRamp.length - 1, index), 0);
+
+ return getColor(colorRamp, i);
+}
+
+const emptyStyleObject = {
+ weight: 1,
+ opacity: 0.6,
+ color: 'rgb(200,200,200)',
+ fillOpacity: 0
+};
+function emptyStyle() {
+ return emptyStyleObject;
+}
+
diff --git a/src/core_plugins/choropleth/public/choropleth_vis.js b/src/core_plugins/choropleth/public/choropleth_vis.js
new file mode 100644
index 0000000000000..3bd796dbade4c
--- /dev/null
+++ b/src/core_plugins/choropleth/public/choropleth_vis.js
@@ -0,0 +1,105 @@
+import 'plugins/choropleth/choropleth.less';
+import 'plugins/choropleth/choropleth_controller';
+import 'plugins/choropleth/choropleth_vis_params';
+import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
+import VisSchemasProvider from 'ui/vis/schemas';
+import choroplethTemplate from 'plugins/choropleth/choropleth_controller.html';
+import visTypes from 'ui/registry/vis_types';
+import colorramps from 'ui/vislib/components/color/colormaps';
+
+visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
+
+ const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);
+ const Schemas = Private(VisSchemasProvider);
+
+
+ const defaultLayers = [
+ {
+ type: 'default',
+ url: '../plugins/choropleth/data/world_countries.geojson',
+ name: 'World Countries',
+ fields: [
+ {
+ name: 'iso',
+ description: '2-letter abbreviation'
+ },
+ {
+ name: 'name',
+ description: 'Country name'
+ }
+ ]
+ },
+ {
+ type: 'default',
+ url: '../plugins/choropleth/data/state.geojson',
+ name: 'US States',
+ fields: [{
+ name: 'STUSPS10',
+ description: '2-letter abbreviation'
+ }, {
+ name: 'NAME10',
+ description: 'State name'
+ }]
+ }
+ ];
+
+ const vectorLayers = vectormapsConfig.layers.concat(defaultLayers);
+ return new TemplateVisType({
+ name: 'choropleth',
+ title: 'Vector Map',
+ implementsRenderComplete: true,
+ description: 'Show metrics on a thematic map. Use one of the provide base maps, or add your own. ' +
+ 'Darker colors represent higher values.',
+ icon: 'fa-globe',
+ template: choroplethTemplate,
+ params: {
+ defaults: {
+ legendPosition: 'bottomright',
+ addTooltip: true,
+ colorSchema: 'Yellow to Red',
+ selectedLayer: vectorLayers[0],
+ selectedJoinField: vectorLayers[0].fields[0]
+ },
+ legendPositions: [{
+ value: 'bottomleft',
+ text: 'bottom left',
+ }, {
+ value: 'bottomright',
+ text: 'bottom right',
+ }, {
+ value: 'topleft',
+ text: 'top left',
+ }, {
+ value: 'topright',
+ text: 'top right',
+ }],
+ colorSchemas: Object.keys(colorramps),
+ vectormap: vectorLayers,
+ editor: ''
+ },
+ schemas: new Schemas([
+ {
+ group: 'metrics',
+ name: 'metric',
+ title: '',
+ min: 1,
+ max: 1,
+ aggFilter: ['!std_dev', '!percentiles', '!percentile_ranks'],
+ defaults: [
+ { schema: 'metric', type: 'count' }
+ ]
+ },
+ {
+ group: 'buckets',
+ name: 'segment',
+ icon: 'fa fa-globe',
+ title: 'shape field',
+ min: 1,
+ max: 1,
+ aggFilter: ['terms']
+ }
+ ])
+ });
+});
+
+
diff --git a/src/core_plugins/choropleth/public/choropleth_vis_params.html b/src/core_plugins/choropleth/public/choropleth_vis_params.html
new file mode 100644
index 0000000000000..a778c2343d394
--- /dev/null
+++ b/src/core_plugins/choropleth/public/choropleth_vis_params.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+