fixes #680

addon/components/marker-layer.js

@@ -133,7 +133,7 @@ export default class MarkerLayer extends InteractiveLayer {
     'shadowPane',
 
     /**
-     * When true, a mouse event on this marker will trigger the same event
+     * When `true`, a mouse event on this marker will trigger the same event
      * on the map (unless L.DomEvent.stopPropagation is used).
      * Defaults to `false`.
      *
@@ -142,6 +142,17 @@ export default class MarkerLayer extends InteractiveLayer {
      */
     'bubblingMouseEvents',
 
+    /**
+     * When `true`, the map will pan whenever the marker is focused
+     * (via e.g. pressing `tab` on the keyboard) to ensure the marker
+     * is visible within the map's bounds.
+     * Defaults to `true`.
+     *
+     * @argument autoPanOnFocus
+     * @type {Boolean}
+     */
+    'autoPanOnFocus',
+
     // Draggable marker options
 
     /**

addon/components/popup-layer.js

@@ -134,7 +134,7 @@ export default class PopupLayer extends DivOverlayLayer {
    */
   @action
   closePopup() {
-    this._layer._close();
+    this._layer._close ? this._layer._close() : this._layer.close();
   }
 
   @action

addon/components/tile-layer.js

@@ -98,6 +98,20 @@ export default class TileLayer extends BaseLayer {
      */
     'crossOrigin',
 
+    /**
+     * Whether the referrerPolicy attribute will be added to the tiles.
+     * If a String is provided, all tiles will have their referrerPolicy attribute set
+     * to the String provided. This may be needed if your map's rendering context has a strict
+     * default but your tile provider expects a valid referrer (e.g. to validate an API token).
+     * Refer to [HTMLImageElement.referrerPolicy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/referrerPolicy)
+     * for valid String values.
+     * Defaults to `false`.
+     *
+     * @argument referrerPolicy
+     * @type {Boolean|String}
+     */
+    'referrerPolicy',
+
     // GridLayer options
 
     /**
@@ -253,6 +267,14 @@ export default class TileLayer extends BaseLayer {
      */
     'tileload',
 
+    /**
+     * Fired when a tile was loading but is now not wanted.
+     *
+     * @argument onTileabort
+     * @type {Function}
+     */
+    'tileabort',
+
     /**
      * Fired when the grid layer loaded all visible tiles.
      *

addon/components/video-layer.js

@@ -68,6 +68,15 @@ export default class VideoLayer extends ImageLayer {
      */
     'muted',
 
+    /**
+     * Mobile browsers will play the video right where it is instead of open it up in fullscreen mode.
+     * Defaults to `true`.
+     *
+     * @argument playsInline
+     * @type {Boolean}
+     */
+    'playsInline',
+
     /**
      * When true, a mouse event on this layer will trigger the same event on the map.
      * Defaults to `true`.

blueprints/ember-leaflet/index.js

@@ -8,6 +8,6 @@ module.exports = {
   },
 
   afterInstall: function () {
-    return this.addPackageToProject('leaflet', '^1.7.1');
+    return this.addPackageToProject('leaflet', '^1.8.0');
   }
 };

package.json

@@ -66,7 +66,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-qunit": "^7.2.0",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.8.0",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",

tests/integration/components/geojson-layer-test.js

@@ -43,11 +43,11 @@ module('Integration | Component | geojson layer', function (hooks) {
     `);
 
     // renders polygon as SVG:
-    assert.dom('path').exists({ count: 1 });
+    assert.dom('path.leaflet-interactive').exists({ count: 1 });
 
     // this property should have *something* in it if we've done our job, leave it
     // to Leaflet to test that the GeoJSONLayer populates it correctly
-    assert.dom('path').hasAttribute('d');
+    assert.dom('path.leaflet-interactive').hasAttribute('d');
 
     // renders point as marker:
     let markers = geoJSONLayer._layer.getLayers().filter((layer) => layer instanceof L.Marker);
@@ -70,7 +70,7 @@ module('Integration | Component | geojson layer', function (hooks) {
     // entirely.
     this.set('sampleGeoJSON', emptyGeoJSON);
 
-    assert.dom('path').doesNotExist();
+    assert.dom('path.leaflet-interactive').doesNotExist();
 
     let markers = geoJSONLayer._layer.getLayers().filter((layer) => layer instanceof L.Marker);
     assert.strictEqual(markers.length, 0);
@@ -85,11 +85,11 @@ module('Integration | Component | geojson layer', function (hooks) {
       </LeafletMap>
     `);
 
-    assert.dom('path').exists({ count: 1 });
+    assert.dom('path.leaflet-interactive').exists({ count: 1 });
 
     this.set('style', () => ({ color: 'red' }));
 
-    assert.dom('path').exists({ count: 1 });
+    assert.dom('path.leaflet-interactive').exists({ count: 1 });
   });
 
   test('update color on event', async function (assert) {
@@ -114,9 +114,9 @@ module('Integration | Component | geojson layer', function (hooks) {
       </LeafletMap>
     `);
 
-    assert.dom('path').exists({ count: 1 });
-    assert.dom('path').hasAttribute('stroke', 'green', 'Original stroke set');
-    assert.dom('path').hasAttribute('fill', 'green', 'Original fill set');
+    assert.dom('path.leaflet-interactive').exists({ count: 1 });
+    assert.dom('path.leaflet-interactive').hasAttribute('stroke', 'green', 'Original stroke set');
+    assert.dom('path.leaflet-interactive').hasAttribute('fill', 'green', 'Original fill set');
 
     run(() => {
       for (let [, layer] of Object.entries(geoJSONLayer._layer._layers)) {
@@ -125,8 +125,8 @@ module('Integration | Component | geojson layer', function (hooks) {
     });
     await settled();
 
-    assert.dom('path').hasAttribute('stroke', 'red', 'Mouseover stroke set');
-    assert.dom('path').hasAttribute('fill', 'red', 'Mouseover fill set');
+    assert.dom('path.leaflet-interactive').hasAttribute('stroke', 'red', 'Mouseover stroke set');
+    assert.dom('path.leaflet-interactive').hasAttribute('fill', 'red', 'Mouseover fill set');
 
     run(() => {
       for (let [, layer] of Object.entries(geoJSONLayer._layer._layers)) {
@@ -135,8 +135,8 @@ module('Integration | Component | geojson layer', function (hooks) {
     });
     await settled();
 
-    assert.dom('path').hasAttribute('stroke', 'blue', 'Mouseleave stroke set');
-    assert.dom('path').hasAttribute('fill', 'blue', 'Mouseleave fill set');
+    assert.dom('path.leaflet-interactive').hasAttribute('stroke', 'blue', 'Mouseleave stroke set');
+    assert.dom('path.leaflet-interactive').hasAttribute('fill', 'blue', 'Mouseleave fill set');
   });
 
   test('update color on style function change', async function (assert) {
@@ -150,22 +150,22 @@ module('Integration | Component | geojson layer', function (hooks) {
       </LeafletMap>
     `);
 
-    assert.dom('path').exists({ count: 1 });
-    assert.dom('path').hasAttribute('stroke', 'green', 'Original stroke set');
-    assert.dom('path').hasAttribute('fill', 'green', 'Original fill set');
+    assert.dom('path.leaflet-interactive').exists({ count: 1 });
+    assert.dom('path.leaflet-interactive').hasAttribute('stroke', 'green', 'Original stroke set');
+    assert.dom('path.leaflet-interactive').hasAttribute('fill', 'green', 'Original fill set');
 
     this.set('style', function () {
       return { color: 'red', fillColor: 'red' };
     });
 
-    assert.dom('path').hasAttribute('stroke', 'red', 'Mouseover stroke set');
-    assert.dom('path').hasAttribute('fill', 'red', 'Mouseover fill set');
+    assert.dom('path.leaflet-interactive').hasAttribute('stroke', 'red', 'Mouseover stroke set');
+    assert.dom('path.leaflet-interactive').hasAttribute('fill', 'red', 'Mouseover fill set');
 
     this.set('style', function () {
       return { color: 'blue', fillColor: 'blue' };
     });
 
-    assert.dom('path').hasAttribute('stroke', 'blue', 'Mouseleave stroke set');
-    assert.dom('path').hasAttribute('fill', 'blue', 'Mouseleave fill set');
+    assert.dom('path.leaflet-interactive').hasAttribute('stroke', 'blue', 'Mouseleave stroke set');
+    assert.dom('path.leaflet-interactive').hasAttribute('fill', 'blue', 'Mouseleave fill set');
   });
 });

tests/integration/components/popup-test.js

@@ -161,7 +161,7 @@ module('Integration | Component | popup layer', function (hooks) {
 
     this.set('isVisible', false);
 
-    assert.strictEqual(map._popup, null, 'popup closed');
+    assert.false(map._popup.isOpen(), 'popup closed');
   });
 
   test('popup closes with yielded action', async function (assert) {
@@ -186,7 +186,7 @@ module('Integration | Component | popup layer', function (hooks) {
     await click('#closeEl');
 
     let map = marker._layer._map;
-    assert.strictEqual(map._popup, null, 'popup closed');
+    assert.false(map._popup.isOpen(), 'popup closed');
   });
 
   test('popup options work', async function (assert) {