From 02de16b7ec86cba6b3441bbdf060109155db82e6 Mon Sep 17 00:00:00 2001
From: AliyanH <aliyanulhaq@gmail.com>
Date: Mon, 6 Feb 2023 11:53:16 -0500
Subject: [PATCH 1/3] View Legend on hover of legendlink

---
 src/mapml.css                  | 11 +++++++++++
 src/mapml/layers/MapMLLayer.js |  7 +++++++
 2 files changed, 18 insertions(+)

diff --git a/src/mapml.css b/src/mapml.css
index 3f747e39d..af298837b 100644
--- a/src/mapml.css
+++ b/src/mapml.css
@@ -73,6 +73,17 @@
 .mapml-layer-item-name a {
   color: revert;
 }
+/* Style Legend */
+.legendLink span { 
+	position: absolute;
+	visibility: hidden;
+}
+.legendLink:hover, .legendLink:hover span { 
+	visibility:visible;
+  left: 0;
+	right: auto;
+	z-index: 1;
+}
 
  .leaflet-top .leaflet-control {
    margin-top: 5px;
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
index c1e198204..69bf4162f 100644
--- a/src/mapml/layers/MapMLLayer.js
+++ b/src/mapml/layers/MapMLLayer.js
@@ -650,10 +650,17 @@ export var MapMLLayer = L.Layer.extend({
 
         if (this._legendUrl) {
           var legendLink = document.createElement('a');
+          var viewerSpan = document.createElement('span');
+          var legendImg = document.createElement('img');
           legendLink.text = ' ' + this._title;
           legendLink.href = this._legendUrl;
           legendLink.target = '_blank';
           legendLink.draggable = false;
+          legendLink.setAttribute('class', 'legendLink');
+          legendImg.src = this._legendUrl;
+          legendImg.alt = "Legend for " + this._title;
+          viewerSpan.appendChild(legendImg);
+          legendLink.appendChild(viewerSpan);
           layerItemName.appendChild(legendLink);
         } else {
           layerItemName.innerHTML = this._title;

From 15423a2e90271209db6629e1d1ba636ce391bf20 Mon Sep 17 00:00:00 2001
From: AliyanH <aliyanulhaq@gmail.com>
Date: Mon, 20 Feb 2023 14:46:57 -0500
Subject: [PATCH 2/3] Add legend on focus

---
 src/mapml.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mapml.css b/src/mapml.css
index af298837b..80e56a53c 100644
--- a/src/mapml.css
+++ b/src/mapml.css
@@ -78,7 +78,7 @@
 	position: absolute;
 	visibility: hidden;
 }
-.legendLink:hover, .legendLink:hover span { 
+.legendLink:hover span, .legendLink:focus span { 
 	visibility:visible;
   left: 0;
 	right: auto;

From f270b724a676626f7200c011332e3393e293a64a Mon Sep 17 00:00:00 2001
From: AliyanH <aliyanulhaq@gmail.com>
Date: Tue, 21 Feb 2023 15:59:25 -0500
Subject: [PATCH 3/3] set max image width

---
 src/mapml.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/mapml.css b/src/mapml.css
index 80e56a53c..91f9c83a9 100644
--- a/src/mapml.css
+++ b/src/mapml.css
@@ -73,6 +73,7 @@
 .mapml-layer-item-name a {
   color: revert;
 }
+
 /* Style Legend */
 .legendLink span { 
 	position: absolute;
@@ -84,6 +85,9 @@
 	right: auto;
 	z-index: 1;
 }
+.legendLink img { 
+	max-width: 200px;
+}
 
  .leaflet-top .leaflet-control {
    margin-top: 5px;