diff --git a/src/partials/editor.html b/src/partials/editor.html
index c862ec7..8942b22 100644
--- a/src/partials/editor.html
+++ b/src/partials/editor.html
@@ -413,11 +413,17 @@ <h5>Appearance</h5>
     <div class="gf-form-subgroup">
         <gf-form-switch class="gf-form" label="Show Legend" label-class="width-10" checked="ctrl.panel.showLegend"
                         on-change="ctrl.toggleLegend()"></gf-form-switch>
-        <div class="gf-form" ng-show="ctrl.panel.showLegend == true">
-            <label class="gf-form-label width-10">Legend container</label>
-            <input type="text" class="input-small gf-form-input max-width-18"
-                   ng-model="ctrl.panel.legendContainerSelector"
-                   placeholder=".shared-map-legend" ng-change="ctrl.restart()" ng-model-onblur/>
+
+        <div ng-show="ctrl.panel.showLegend == true">
+            <gf-form-switch class="gf-form" label="Reverse Legend" label-class="width-10" checked="ctrl.panel.reverseLegend"
+                            on-change="ctrl.toggleLegendDirection()"></gf-form-switch>
+
+            <div class="gf-form">
+                <label class="gf-form-label width-10">Legend container</label>
+                <input type="text" class="input-small gf-form-input max-width-18"
+                       ng-model="ctrl.panel.legendContainerSelector"
+                       placeholder=".shared-map-legend" ng-change="ctrl.restart()" ng-model-onblur/>
+            </div>
         </div>
     </div>
 
diff --git a/src/worldmap.test.ts b/src/worldmap.test.ts
index 903007e..8518acb 100644
--- a/src/worldmap.test.ts
+++ b/src/worldmap.test.ts
@@ -375,12 +375,14 @@ describe('Worldmap', () => {
 
     it('should create a legend with two legend values', () => {
       expect(worldMap.legend).toBeDefined();
-      expect(worldMap.legend._div.outerHTML).toBe(
-        '<div class="info legend leaflet-control">' +
-          '<div class="legend-item">' +
-          '<i style="background:red"></i> &lt; 2</div><div class="legend-item"><i style="background:blue"></i> 2+</div>' +
-          '</div>'
-      );
+      let elements = [...worldMap.legend._div.querySelectorAll('.legend-item')];
+      expect(elements.length).toEqual(2);
+
+      let labels = elements.map(e => e.textContent.trim());
+      expect(labels).toEqual(['< 2', '2+']);
+
+      let colors = elements.map(e => e.querySelector('i').style.getPropertyValue('background'));
+      expect(colors).toEqual(['red', 'blue']);
     });
   });
 
@@ -404,11 +406,14 @@ describe('Worldmap', () => {
 
     it('should create a legend with three legend values', () => {
       expect(worldMap.legend).toBeDefined();
-      expect(worldMap.legend._div.outerHTML).toBe(
-        '<div class="info legend leaflet-control"><div class="legend-item">' +
-          '<i style="background:red"></i> &lt; 2</div><div class="legend-item"><i style="background:blue"></i> 2–4</div>' +
-          '<div class="legend-item"><i style="background:green"></i> 4+</div></div>'
-      );
+      let elements = [...worldMap.legend._div.querySelectorAll('.legend-item')];
+      expect(elements.length).toEqual(3);
+
+      let labels = elements.map(e => e.textContent.trim());
+      expect(labels).toEqual(['< 2', '2 – 4', '4+']);
+
+      let colors = elements.map(e => e.querySelector('i').style.getPropertyValue('background'));
+      expect(colors).toEqual(['red', 'blue', 'green']);
     });
   });
 
@@ -420,12 +425,15 @@ describe('Worldmap', () => {
 
     it('should create a legend with four legend values', () => {
       expect(worldMap.legend).toBeDefined();
-      expect(worldMap.legend._div.outerHTML).toBe(
-        '<div class="info legend leaflet-control"><div class="legend-item">' +
-          '<i style="background:red"></i> &lt; 2</div><div class="legend-item"><i style="background:blue"></i> 2–4</div>' +
-          '<div class="legend-item"><i style="background:green"></i> 4–6</div>' +
-          '<div class="legend-item"><i style="background:undefined"></i> 6+</div></div>'
-      );
+
+      let elements = [...worldMap.legend._div.querySelectorAll('.legend-item')];
+      expect(elements.length).toEqual(4);
+
+      let labels = elements.map(e => e.textContent.trim());
+      expect(labels).toEqual(['< 2', '2 – 4', '4 – 6', '6+']);
+
+      let colors = elements.map(e => e.querySelector('i').style.getPropertyValue('background'));
+      expect(colors).toEqual(['red', 'blue', 'green', '']);
     });
   });
 
@@ -438,12 +446,15 @@ describe('Worldmap', () => {
 
     it('should create a legend with four legend values', () => {
       expect(worldMap.legend).toBeDefined();
-      expect(worldMap.legend._div.outerHTML).toBe(
-        '<div class="info legend leaflet-control"><div class="legend-item">' +
-          '<i style="background:red"></i> &lt; 2</div><div class="legend-item"><i style="background:blue"></i> 2–4</div>' +
-          '<div class="legend-item"><i style="background:green"></i> 4–6</div>' +
-          '<div class="legend-item"><i style="background:undefined"></i> 6+</div></div>'
-      );
+
+      let elements = [...worldMap.legend._div.querySelectorAll('.legend-item')];
+      expect(elements.length).toEqual(4);
+
+      let labels = elements.map(e => e.textContent.trim());
+      expect(labels).toEqual(['< 2', '2 – 4', '4 – 6', '6+']);
+
+      let colors = elements.map(e => e.querySelector('i').style.getPropertyValue('background'));
+      expect(colors).toEqual(['red', 'blue', 'green', '']);
     });
   });
 
@@ -456,12 +467,15 @@ describe('Worldmap', () => {
 
     it('should create a legend with four legend values', () => {
       expect(worldMap.legend).toBeDefined();
-      expect(worldMap.legend._div.outerHTML).toBe(
-        '<div class="info legend leaflet-control"><div class="legend-item">' +
-          '<i style="background:red"></i> *</div><div class="legend-item"><i style="background:blue"></i> some cat</div>' +
-          '<div class="legend-item"><i style="background:green"></i> other cat</div>' +
-          '<div class="legend-item"><i style="background:undefined"></i> asdf</div></div>'
-      );
+
+      let elements = [...worldMap.legend._div.querySelectorAll('.legend-item')];
+      expect(elements.length).toEqual(4);
+
+      let labels = elements.map(e => e.textContent.trim());
+      expect(labels).toEqual(['*', 'some cat', 'other cat', 'asdf']);
+
+      let colors = elements.map(e => e.querySelector('i').style.getPropertyValue('background'));
+      expect(colors).toEqual(['red', 'blue', 'green', '']);
     });
   });
 
@@ -488,12 +502,7 @@ describe('Worldmap', () => {
 
     it('we should find the respective element at the appropriate place in the DOM', () => {
       expect(worldMap.legend).toBeDefined();
-      expect($('.shared-map-legend')[0].innerHTML).toBe(
-        '<div class="info legend leaflet-control"><div class="legend-item">' +
-          '<i style="background:red"></i> &lt; 2</div><div class="legend-item"><i style="background:blue"></i> 2–4</div>' +
-          '<div class="legend-item"><i style="background:green"></i> 4–6</div>' +
-          '<div class="legend-item"><i style="background:undefined"></i> 6+</div></div>'
-      );
+      expect($('.shared-map-legend')[0].innerHTML).toContain('legend-item');
     });
   });
 
diff --git a/src/worldmap.ts b/src/worldmap.ts
index 4408531..a69e3d5 100644
--- a/src/worldmap.ts
+++ b/src/worldmap.ts
@@ -127,23 +127,37 @@ export default class WorldMap {
       default:
         return () => {
           const thresholds = this.ctrl.data.thresholds;
-          let legendHtml = '';
-          legendHtml +=
-            '<div class="legend-item"><i style="background:' +
-            this.ctrl.settings.colors[0] +
-            '"></i> ' +
-            '&lt; ' +
-            thresholds[0] +
-            '</div>';
+          const colors = this.ctrl.settings.colors;
+
+          let labels: string[] = [];
+
+          labels.push(`
+              <div class="legend-item">
+                  <i style="background: ${colors[0]}"></i>
+                  &lt; ${thresholds[0]}
+              </div>            
+          `);
+
           for (let index = 0; index < thresholds.length; index += 1) {
-            legendHtml +=
-              '<div class="legend-item"><i style="background:' +
-              this.ctrl.settings.colors[index + 1] +
-              '"></i> ' +
-              thresholds[index] +
-              (thresholds[index + 1] ? '&ndash;' + thresholds[index + 1] + '</div>' : '+');
+            let next = '+';
+
+            if (thresholds[index + 1]) {
+              next = ' &ndash; ' + thresholds[index + 1];
+            }
+
+            labels.push(`
+              <div class="legend-item">
+                  <i style="background: ${colors[index + 1]}"></i>
+                  ${thresholds[index]}${next}
+              </div>
+            `);
           }
-          this.legend._div.innerHTML = legendHtml;
+
+          if (this.ctrl.settings.reverseLegend) {
+            labels.reverse();
+          }
+
+          this.legend._div.innerHTML = labels.join('');
         };
     }
   }
diff --git a/src/worldmap_ctrl.ts b/src/worldmap_ctrl.ts
index ae4a80f..194a2a5 100644
--- a/src/worldmap_ctrl.ts
+++ b/src/worldmap_ctrl.ts
@@ -38,6 +38,7 @@ const panelDefaults = {
   unitSingular: '',
   unitPlural: '',
   showLegend: true,
+  reverseLegend: false,
   legendContainerSelector: null,
   showZoomControl: true,
   showAttribution: true,
@@ -549,6 +550,10 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
+  toggleLegendDirection() {
+    this.map.legend.update();
+  }
+
   refreshOverlay() {
     this.map.overlay.remove();
     this.map.overlay = null;