ensure logo appears for tileLayers added after map init (#1324)

Josh Erb · web-flow · commit dae3498e2b81 · 2020-03-19T17:58:58.000-04:00
diff --git a/src/map.js b/src/map.js
@@ -207,6 +207,13 @@ var LMap = L.Map.extend({
             this._zoomBoundLayers[L.stamp(layer)] = layer;
         }
 
+        // ensure logo appears even when mapbox layer added after map is initialized
+        var mapboxLogoControl = this._mapboxLogoControl.getContainer();
+        if (!L.DomUtil.hasClass(mapboxLogoControl, 'mapbox-logo-true')) {
+            var tileJSON = layer.getTileJSON();
+            this._mapboxLogoControl._setTileJSON(tileJSON);
+        }
+
         this._updateMapFeedbackLink();
         this._updateZoomLevels();
     }
diff --git a/src/mapbox_logo.js b/src/mapbox_logo.js
@@ -22,6 +22,11 @@ var MapboxLogoControl = L.Control.extend({
         if (json.mapbox_logo) {
             L.DomUtil.addClass(this._container, 'mapbox-logo-true');
         }
+
+        // account for usage of styleJSON as functional tileJSON for defaults
+        if (!json.tilejson && json.owner === 'mapbox') {
+            L.DomUtil.addClass(this._container, 'mapbox-logo-true');
+        }
     }
 });
 
diff --git a/test/helper.js b/test/helper.js
@@ -869,6 +869,23 @@ helpers.tileJSON_malicious = {
     "webpage":"http://tiles.mapbox.com/examples/map/map-8ced9urs"
 }
 
+helpers.tileJSON_mapboxlogoMissing = {
+    "attribution": "<a href='https://www.mapbox.com/about/maps/' target='_blank'>&copy; Mapbox &copy; OpenStreetMap</a> <a class='mapbox-improve-map' href='https://www.mapbox.com/feedback/' target='_blank'>Improve this map</a>",
+    "autoscale": true,
+    "bounds": [-180, -85.0511, 180, 85.0511],
+    "data": ["http://a.tiles.mapbox.com/v3/examples.h8e9h88l/markers.geojsonp"],
+    "geocoder": "http://a.tiles.mapbox.com/v3/examples.h8e9h88l/geocode/{query}.jsonp",
+    "id": "examples.h8e9h88l",
+    "maxzoom": 22,
+    "minzoom": 0,
+    "name": "My Mapbox Streets Map",
+    "private": true,
+    "scheme": "xyz",
+    "tilejson": "2.0.0",
+    "tiles": ["http://some.external.source.com/v3/examples.h8e9h88l/{z}/{x}/{y}.png"],
+    "webpage": "http://a.tiles.mapbox.com/v3/examples.h8e9h88l/page.html",
+};
+
 helpers.tileJSON_mapboxlogoFalse = {
     "attribution": "<a href='https://www.mapbox.com/about/maps/' target='_blank'>&copy; Mapbox &copy; OpenStreetMap</a> <a class='mapbox-improve-map' href='https://www.mapbox.com/feedback/' target='_blank'>Improve this map</a>",
     "autoscale": true,
diff --git a/test/manual/later-layer-logo.html b/test/manual/later-layer-logo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='UTF-8' />
+  <link rel="stylesheet" href="../../dist/mapbox.css" />
+  <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
+  <link rel="stylesheet" href="embed.css" />
+  <script src="../../dist/mapbox.js"></script>
+  <script src="access_token.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id='map'></div>
+
+  <script>
+    var map = L.mapbox.map('map', null, {
+      maxZoom: 18
+    }).setView([22.76, -25.84], 3);
+
+    L.mapbox.tileLayer('mapbox.streets').addTo(map);
+  </script>
+
+</body>
+
+</html>
diff --git a/test/manual/tooltips-on-hover.html b/test/manual/tooltips-on-hover.html
@@ -24,7 +24,7 @@
     // Hide popup when user's cursor leaves marker.
     // We add a timeout to make it a little more visually graceful
     // in case of rapid cursor movement.
-    mapfeatureLayerr.on('mouseout', function(e) {
+    map.featureLayer.on('mouseout', function(e) {
         e.layer._closeTimeout = window.setTimeout(function() {
             e.layer.closePopup();
         }, 300);
diff --git a/test/spec/mapbox_logo.js b/test/spec/mapbox_logo.js
@@ -17,11 +17,17 @@ describe('mapbox_logo', function() {
     });
 
     it('is not on tilejson map without mapbox_logo flag', function() {
-        var map = L.mapbox.map(element, tileJSON);
+        var map = L.mapbox.map(element, helpers.tileJSON_mapboxlogoMissing);
         var mapboxLogoControl = map._mapboxLogoControl.getContainer();
         expect(L.DomUtil.hasClass(mapboxLogoControl, 'mapbox-logo-true')).to.be(false);
     });
 
+    it('is on map when tilejson is mapbox styleJSON without mapbox_logo flag', function() {
+        var map = L.mapbox.map(element, helpers.styleJSON);
+        var mapboxLogoControl = map._mapboxLogoControl.getContainer();
+        expect(L.DomUtil.hasClass(mapboxLogoControl, 'mapbox-logo-true')).to.be(true);
+    });
+
     it('is on tilejson map with mapbox_logo === true', function() {
         var map = L.mapbox.map(element, helpers.tileJSON_mapboxlogo);
         var mapboxLogoControl = map._mapboxLogoControl.getContainer();
@@ -60,4 +66,21 @@ describe('mapbox_logo', function() {
             [200, { "Content-Type": "application/json" }, JSON.stringify(helpers.tileJSON_mapboxlogoFalse)]);
         server.respond();
     });
+
+    it('is on mapid map when layer added after map initialization', function (done) {
+        var layer = L.mapbox.tileLayer('mapbox.map-0l53fhk2');
+        var map = L.mapbox.map(element)
+            .setView([0, 0], 3)
+            .addLayer(layer);
+
+        layer.on('ready', function() {
+            var mapboxLogoControl = map._mapboxLogoControl.getContainer();
+            expect(L.DomUtil.hasClass(mapboxLogoControl, 'mapbox-logo-true')).to.be(true);
+            done();
+        });
+
+        server.respondWith("GET", "https://api.mapbox.com/v4/mapbox.map-0l53fhk2.json?access_token=key&secure",
+            [200, { "Content-Type": "application/json" }, JSON.stringify(helpers.tileJSON_mapboxlogo)]);
+        server.respond();
+    });
 });

Original file line number	Diff line number	Diff line change
`@@ -207,6 +207,13 @@ var LMap = L.Map.extend({`
`207`	`207`	`this._zoomBoundLayers[L.stamp(layer)] = layer;`
`208`	`208`	`}`
`209`	`209`
	`210`	`+ // ensure logo appears even when mapbox layer added after map is initialized`
	`211`	`+ var mapboxLogoControl = this._mapboxLogoControl.getContainer();`
	`212`	`+ if (!L.DomUtil.hasClass(mapboxLogoControl, 'mapbox-logo-true')) {`
	`213`	`+ var tileJSON = layer.getTileJSON();`
	`214`	`+ this._mapboxLogoControl._setTileJSON(tileJSON);`
	`215`	`+ }`
	`216`	`+`
`210`	`217`	`this._updateMapFeedbackLink();`
`211`	`218`	`this._updateZoomLevels();`
`212`	`219`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,11 @@ var MapboxLogoControl = L.Control.extend({`
`22`	`22`	`if (json.mapbox_logo) {`
`23`	`23`	`L.DomUtil.addClass(this._container, 'mapbox-logo-true');`
`24`	`24`	`}`
	`25`	`+`
	`26`	`+ // account for usage of styleJSON as functional tileJSON for defaults`
	`27`	`+ if (!json.tilejson && json.owner === 'mapbox') {`
	`28`	`+ L.DomUtil.addClass(this._container, 'mapbox-logo-true');`
	`29`	`+ }`
`25`	`30`	`}`
`26`	`31`	`});`
`27`	`32`