Add options customAttribution and customAttributionText.

These settings control which alternative text is displayed
in the attribution area of the Leaflet map widget.

Author: amotl

CHANGELOG.md

@@ -42,6 +42,7 @@
 - Add `ignoreEscapeKey` option.
 - Add `hideTimepickerNavigation` option.
 - Add `circleOptions.strokeEnabled` and `circleOptions.strokeWeight`.
+- Add options `customAttribution` and `customAttributionText`.
 
 ## v0.2.0
 

src/css/worldmap-panel.css

@@ -53,3 +53,7 @@
 .editor-link-color {
   color: #2846a1;
 }
+
+.gf-form-subgroup {
+  margin-bottom: 1rem;
+}

src/partials/editor.html

@@ -336,15 +336,30 @@ <h5>Center and zoom level</h5>
 
     <div class="gf-form-group">
       <h5>Appearance</h5>
+
+      <!-- Zoom -->
+      <div class="gf-form-subgroup">
+      <gf-form-switch class="gf-form" label="Show Zoom Control" label-class="width-10" checked="ctrl.panel.showZoomControl" on-change="ctrl.restart()"></gf-form-switch>
+      <gf-form-switch class="gf-form" label="Mouse Wheel Zoom" label-class="width-10" checked="ctrl.panel.mouseWheelZoom" on-change="ctrl.toggleMouseWheelZoom()"></gf-form-switch>
+      </div>
+
+      <!-- Legend -->
+      <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>
-      <gf-form-switch class="gf-form" label="Show Zoom Control" label-class="width-10" checked="ctrl.panel.showZoomControl" on-change="ctrl.restart()"></gf-form-switch>
+      </div>
+
+      <!-- Attribution -->
+      <div class="gf-form-subgroup">
       <gf-form-switch class="gf-form" label="Show Attribution" label-class="width-10" checked="ctrl.panel.showAttribution" on-change="ctrl.restart()"></gf-form-switch>
-      <gf-form-switch class="gf-form" label="Mouse Wheel Zoom" label-class="width-10" checked="ctrl.panel.mouseWheelZoom" on-change="ctrl.toggleMouseWheelZoom()"></gf-form-switch>
+      <gf-form-switch class="gf-form" label="Custom Attribution" label-class="width-10" checked="ctrl.panel.customAttribution" on-change="ctrl.toggleCustomAttribution()"></gf-form-switch>
+      <textarea class="gf-form input-small gf-form-input width-24" rows="5" ng-show="ctrl.panel.customAttribution" ng-model="ctrl.panel.customAttributionText" ng-change="ctrl.render()"></textarea>
+      </div>
+
     </div>
 
     <div class="gf-form-group">

src/worldmap.ts

@@ -80,6 +80,8 @@ export default class WorldMap {
     console.info('Drawing circles');
     this.drawCircles();
 
+    this.drawCustomAttribution();
+
     setTimeout(() => {
       this.drawMap(options);
     }, 1);
@@ -399,7 +401,9 @@ export default class WorldMap {
   }
 
   addCircles(circles) {
-    return (<any>window).L.layerGroup(circles).addTo(this.map);
+    // Todo: Optionally add fixed custom attributions to the circle layer.
+    let attribution;
+    return (<any>window).L.layerGroup(circles, {attribution: attribution}).addTo(this.map);
   }
 
   removeCircles() {
@@ -420,4 +424,19 @@ export default class WorldMap {
     }
     this.map.remove();
   }
+
+  drawCustomAttribution() {
+    // The operator wants a custom attribution.
+    if (this.ctrl.settings.customAttribution) {
+
+      // The custom attribution text.
+      const attribution = this.ctrl.settings.customAttributionText;
+
+      // Amend the Leaflet map by clearing out and setting the custom attribution text.
+      const attributionControl = this.map.attributionControl;
+      attributionControl._attributions = {};
+      attributionControl.addAttribution(attribution);
+    }
+  }
+
 }

src/worldmap_ctrl.ts

@@ -39,6 +39,8 @@ const panelDefaults = {
   legendContainerSelector: null,
   showZoomControl: true,
   showAttribution: true,
+  customAttribution: false,
+  customAttributionText: null,
   mouseWheelZoom: false,
   esGeoPoint: null,
   // Todo: Investigate: Is "Count" a reasonable default here
@@ -507,6 +509,36 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
+  toggleCustomAttribution() {
+    if (this.settings.customAttribution) {
+
+      const attributionControl = this.map.map.attributionControl;
+
+      // When switching on custom attributions and the text is
+      // empty yet, use the value which is currently active.
+      if (!this.panel.customAttributionText) {
+
+        // Collect active attributions.
+        const entries:Array<any> = [];
+        for (let key in attributionControl._attributions) {
+          entries.push(key);
+        }
+
+        // Store in custom text.
+        this.panel.customAttributionText = entries.join(', ');
+      }
+
+      // Clear out builtin attributions.
+      attributionControl._attributions = {};
+      attributionControl._update();
+      this.render();
+
+    } else {
+      // The operator wants vanilla attributions again, so let's start over.
+      this.restart();
+    }
+  }
+
   redrawCircles() {
     this.map.clearCircles();
     this.render();