From 14fc1559889a141b8a47d6027d6e88cd171c5278 Mon Sep 17 00:00:00 2001
From: Paul <runette@gmail.com>
Date: Tue, 7 Jan 2020 12:14:43 +0000
Subject: [PATCH] Add .ts version

This is an example of how to add the responsive attribution control in TS - in this case this is based on Angular.io and using ngx-leaflet to add Leaflet but the TS parts should be re-usable for any version of TS.
---
 leaflet-responsive-attribution.ts | 76 +++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 leaflet-responsive-attribution.ts

diff --git a/leaflet-responsive-attribution.ts b/leaflet-responsive-attribution.ts
new file mode 100644
index 0000000..f8a5597
--- /dev/null
+++ b/leaflet-responsive-attribution.ts
@@ -0,0 +1,76 @@
+import { Component, OnInit,Input, OnDestroy} from '@angular/core';
+import { Map, Control, DomUtil, ZoomAnimEvent , MapOptions } from 'leaflet';
+
+declare module 'leaflet' {
+  interface Control {
+     _addTo(map: Map): Control;
+  }
+  interface Map {
+    _leaflet_id: number;
+    _container: HTMLElement;
+  }
+}
+
+@Component({
+  selector: 'app-osm-map',
+  templateUrl: './osm-map.component.html',
+  styleUrls: ['./osm-map.component.css',]
+})
+export class OsmMapComponent implements OnInit, OnDestroy {
+  @Input() options: MapOptions;
+  public map: Map;
+
+  constructor() { 
+  }
+
+  ngOnInit() {
+
+    // Use a compact attribution control for small map container widths
+    if (! Control.Attribution.prototype._addTo) {
+    Control.Attribution.prototype._addTo = Control.Attribution.prototype.addTo;
+
+    Control.Attribution.prototype.addTo = function(map) {
+      Control.Attribution.prototype._addTo.call(this, map);
+
+      // use the css checkbox hack to toggle the attribution
+      const parent     = this._container.parentNode;
+      const checkbox   = document.createElement('input');
+      const label      = document.createElement('label');
+      const checkboxId = 'attribution-toggle-' + map._leaflet_id;  // unique name if multiple maps are present
+
+      checkbox.setAttribute('id', checkboxId);
+      checkbox.setAttribute('type', 'checkbox');
+      checkbox.classList.add('leaflet-compact-attribution-toggle');
+      parent.insertBefore(checkbox, parent.firstChild);
+
+      label.setAttribute('for', checkboxId);
+      label.classList.add('leaflet-control');
+      label.classList.add('leaflet-compact-attribution-label');
+      parent.appendChild(label);
+
+      // initial setup for map load
+      if (map._container.offsetWidth <= 600) {
+        DomUtil.addClass(this._container, 'leaflet-compact-attribution');
+      }
+
+      // update on map resize
+      map.on('resize', function() {
+        if (map._container.offsetWidth > 600) {
+          DomUtil.removeClass(this._container, 'leaflet-compact-attribution');
+        } else {
+          DomUtil.addClass(this._container, 'leaflet-compact-attribution');
+        }
+      }, this);
+      return this;
+    };
+    }
+  }
+
+  ngOnDestroy() {
+    this.map.clearAllEventListeners;
+    this.map.remove();
+  };
+
+  onMapReady(map: Map) {
+    this.map = map;
+  }