From 64a2d1534f25c00134466da6edf0a8397a92f290 Mon Sep 17 00:00:00 2001
From: prushfor <prushfor@W-BSC-A023534.nrn.nrcan.gc.ca>
Date: Tue, 10 Oct 2017 15:52:26 -0400
Subject: [PATCH] Fire 'loadstart' event for layer- element based on MapML
 parsing. Establish @label for layer- element based on <title> of MapML
 document, if possible. Make min-width for map = 100% of its container by
 default Set Leaflet map fadeAnimation property to true, not sure how this
 didn't get committed before now, in fact I'm pretty sure it did, so this is
 typically fubar for my experience on git

---
 map-layer.html | 18 +++++++++++++++++-
 web-map.html   |  3 ++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/map-layer.html b/map-layer.html
index 551ee7478..cb927cd5d 100644
--- a/map-layer.html
+++ b/map-layer.html
@@ -110,6 +110,9 @@
                  hreflang: null,
                  sizes: null }];
         }
+        if (this._layer._title && this.label === "Layer") {
+          this.label = this._layer._title;
+        }
         // make sure local content layer has the chance to set its extent properly
         // which is important for the layer control and the disabled property
         if (this._layer._map) {
@@ -157,6 +160,7 @@
         if (this._layerControl && !this.hidden) {
           this._layerControl.removeLayer(this._layer);
         }
+        this._removeEvents();
     },
     ready: function() {
         
@@ -169,6 +173,7 @@
         var base = this.baseURI ? this.baseURI : document.baseURI;
         this._layer = M.mapMLLayer(this.src ? new URI(this.src).resolve(new URI(base)).toString(): null, this);
         this._layer.on('extentload', this._onLayerExtentLoad, this);
+        this._setUpEvents();
     },
     _attachedToMap: function() {
         // set i to the index of this layer element in the set of layers
@@ -209,13 +214,24 @@
     },
     attached: function() {
         if (Polymer.dom(this).parentNode.nodeName !== 'MAP') {
-            console.log('Info: '+ this.localName + '#' + this.id + ' must be a child of a map element');
+            console.log('ERROR: '+ this.localName + '#' + this.id + ' must be a child of a map element');
             return;
         }
         // if the map has been attached, set this layer up wrt Leaflet map
         if (Polymer.dom(this).parentNode._map) {
             this._attachedToMap();
         }
+    },
+    _removeEvents: function() {
+      if (this._layer) {
+        this._layer.off('loadstart', false, this);
+      }
+    },
+    _setUpEvents: function () {
+      this._layer.on('loadstart', 
+          function () {
+              this.fire('loadstart', {target: this});
+          }, this);      
     }
 });
 </script>
diff --git a/web-map.html b/web-map.html
index a4aadcb33..81eaa3281 100644
--- a/web-map.html
+++ b/web-map.html
@@ -22,6 +22,7 @@
     /* try to constrain the map and the leaflet div#map to the size of the container */
         :host, :host #map {
          max-width: 100%;
+         min-width: 100%;
     }
     /* this is a hack for shady DOM, as max-width messes with Leaflet tiles */
     :host img {
@@ -230,7 +231,7 @@
             // there is a better configuration than that, but at this moment
             // I'm not sure how to approach that issue.  
             // See https://github.com/Maps4HTML/MapML-Leaflet-Client/issues/24 
-            fadeAnimation: false
+            fadeAnimation: true
           });
         
           // optionally add controls to the map