Merge pull request #1283 from umap-project/datalayer-onload-zoomend

Fix datalayers being shown on zoom even if displayOnLoad is false

umap/static/umap/js/umap.layer.js

@@ -263,7 +263,10 @@ L.U.DataLayer = L.Evented.extend({
     this.onceLoaded(function () {
       this.map.on('moveend', this.onMoveEnd, this)
     })
-    this.map.on('zoomend', this.onZoomEnd, this)
+    // Only layers that are displayed on load must be hidden/shown
+    // Automatically, others will be shown manually, and thus will
+    // be in the "forced visibility" mode
+    if (this.displayedOnLoad()) this.map.on('zoomend', this.onZoomEnd, this)
   },
 
   onMoveEnd: function (e) {

umap/static/umap/test/DataLayer.js

@@ -403,6 +403,41 @@ describe('L.U.DataLayer', function () {
       assert.ok(qs('path[fill="DarkGoldenRod"]'))
     })
   })
+
+  describe("#displayOnLoad", function () {
+
+    beforeEach(function () {
+      this.server.respondWith(
+        /\/datalayer\/64\/\?.*/,
+        JSON.stringify(RESPONSES.datalayer64_GET)
+      )
+      this.datalayer = this.map.createDataLayer(RESPONSES.datalayer64_GET._umap_options)
+      // Force fetching the data, so to deal here with fake server
+      this.datalayer.fetchData()
+      this.server.respond()
+      this.map.setZoom(10, {animate: false})
+    });
+
+    afterEach(function () {
+      this.datalayer._delete()
+    })
+
+    it("should not display layer at load", function () {
+      assert.notOk(qs('path[fill="AliceBlue"]'))
+    })
+
+    it("should display on click", function () {
+      happen.click(qs(`[data-id='${L.stamp(this.datalayer)}'] .layer-toggle`))
+      assert.ok(qs('path[fill="AliceBlue"]'))
+    })
+
+    it("should not display on zoom", function () {
+      this.map.setZoom(9, {animate: false})
+      assert.notOk(qs('path[fill="AliceBlue"]'))
+    })
+
+  })
+
   describe('#facet-search()', function () {
     before(function () {
       this.server.respondWith(

umap/static/umap/test/_pre.js

@@ -314,6 +314,58 @@ var RESPONSES = {
       },
     ],
   },
+  // This one is not shown at load
+  datalayer64_GET: {
+    crs: null,
+    type: 'FeatureCollection',
+    _umap_options: defaultDatalayerData({name: 'hidden', id: 64, displayOnLoad: false }),
+    features: [
+      {
+        geometry: {
+          type: 'Polygon',
+          coordinates: [
+            [
+              [5.545478, 45.068383],
+              [5.545907, 45.067277],
+              [5.548439, 45.067565],
+              [5.552516, 45.06752],
+              [5.553288, 45.068217],
+              [5.549405, 45.069247],
+              [5.548224, 45.071005],
+              [5.545907, 45.071096],
+              [5.545478, 45.068383],
+            ],
+          ],
+        },
+        type: 'Feature',
+        id: 76,
+        properties: { name: 'not shown at load 1' },
+      },
+      {
+        type: 'Feature',
+        properties: {
+          _umap_options: {
+            color: 'AliceBlue',
+          },
+          name: 'not shown at load 2',
+        },
+        geometry: {
+          type: 'Polygon',
+          coordinates: [
+            [
+              [5.550542, 45.071717],
+              [5.548182, 45.071051],
+              [5.549426, 45.069232],
+              [5.553331, 45.068171],
+              [5.554812, 45.070869],
+              [5.553396, 45.072384],
+              [5.550542, 45.071717],
+            ],
+          ],
+        },
+      },
+    ],
+  },
 }
 
 sinon.fakeServer.flush = function () {