Mercurial > gemma

diff client/src/components/map/Map.vue @ 3181:c122a064fd5e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: map: fixed loading animation for layers Zooming out to the user specific map extent right after the map has been rendered initially interrupts the loading process for layers with a maxResolution that is exceeded by that. This leads to the loading flag of the layer source to be never set to false until you zoom to a resolution where these layers are active again. This is an unexpected behavior that will be reported to upstream. (https://github.com/openlayers/openlayers/issues/9503)
author Markus Kottlaender <markus@intevation.de>
date Tue, 07 May 2019 14:54:16 +0200
parents fc008b32c593
children 77fc44ad05e3
line wrap: on
line diff
--- a/client/src/components/map/Map.vue	Tue May 07 14:06:23 2019 +0200
+++ b/client/src/components/map/Map.vue	Tue May 07 14:54:16 2019 +0200
@@ -160,6 +160,44 @@
           })
         );
       }
+
+      // move to user specific default extent if map loads for the first time
+      // checking initialLoad will be obsolete once we abandoned the separated admin context
+      if (this.initialLoad) {
+        this.$store.commit("map/initialLoad", false);
+        var currentUser = this.$store.state.user.user;
+        HTTP.get("/users/" + currentUser, {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
+        })
+          .then(response => {
+            this.mountMap();
+            this.$store.dispatch("map/moveToBoundingBox", {
+              boundingBox: [
+                response.data.extent.x1,
+                response.data.extent.y1,
+                response.data.extent.x2,
+                response.data.extent.y2
+              ],
+              zoom: 17,
+              preventZoomOut: true,
+              duration: 0
+            });
+          })
+          .catch(error => {
+            const { status, data } = error.response;
+            displayError({
+              title: this.$gettext("Backend Error"),
+              message: `${status}: ${data.message || data}`
+            });
+          });
+      } else {
+        this.mountMap();
+      }
+    },
+    mountMap() {
       this.map = new Map({
         layers: this.layers.config,
         target: "map-" + this.paneId,
@@ -176,10 +214,6 @@
       });
       this.map.getLayer = id => this.layers.get(id);
 
-      this.map.on("rendercomplete", () => {
-        this.$store.commit("map/decreaseMapsLoading");
-      });
-
       // store map position on every move
       // will be obsolete once we abandoned the separated admin context
       this.map.on("moveend", event => {
@@ -191,39 +225,6 @@
         });
       });
       this.$store.dispatch("map/openLayersMap", this.map);
-
-      // move to user specific default extent if map loads for the first time
-      // checking initialLoad will be obsolete once we abandoned the separated admin context
-      if (this.initialLoad) {
-        this.$store.commit("map/initialLoad", false);
-        var currentUser = this.$store.state.user.user;
-        HTTP.get("/users/" + currentUser, {
-          headers: {
-            "X-Gemma-Auth": localStorage.getItem("token"),
-            "Content-type": "text/xml; charset=UTF-8"
-          }
-        })
-          .then(response => {
-            this.$store.dispatch("map/moveToBoundingBox", {
-              boundingBox: [
-                response.data.extent.x1,
-                response.data.extent.y1,
-                response.data.extent.x2,
-                response.data.extent.y2
-              ],
-              zoom: 17,
-              preventZoomOut: true
-            });
-          })
-          .catch(error => {
-            const { status, data } = error.response;
-            displayError({
-              title: this.$gettext("Backend Error"),
-              message: `${status}: ${data.message || data}`
-            });
-          });
-      }
-
       this.$store.dispatch("map/initIdentifyTool", this.map);
     }
   },