fixup: fix save center and zoom (#2371)

Broken since map split.

umap/static/umap/js/modules/rendering/map.js

@@ -263,8 +263,12 @@ export const LeafletMap = BaseMap.extend({
     this.loader.onAdd(this)
 
     if (!this.options.noControl) {
-      DomEvent.on(document.body, 'dataloading', (e) => this.fire('dataloading', e))
+      DomEvent.on(document.body, 'dataloading', (event) =>
-      DomEvent.on(document.body, 'dataload', (e) => this.fire('dataload', e))
+        this.fire('dataloading', event.detail)
+      )
+      DomEvent.on(document.body, 'dataload', (event) =>
+        this.fire('dataload', event.detail)
+      )
       this.on('click', this.closeInplaceToolbar)
     }
 

umap/static/umap/js/modules/request.js

@@ -47,8 +47,8 @@ class BaseRequest {
 // In case of error, an alert is sent, but non 20X status are not handled
 // The consumer must check the response status by hand
 export class Request extends BaseRequest {
-  fire(name, params) {
+  fire(name, detail) {
-    document.body.dispatchEvent(new CustomEvent(name, params))
+    document.body.dispatchEvent(new CustomEvent(name, { detail }))
   }
 
   async _fetch(method, uri, headers, data) {

umap/static/umap/js/modules/umap.js

@@ -570,9 +570,11 @@ export default class Umap extends ServerStored {
     }
     this.datalayersLoaded = true
     this.fire('datalayersloaded')
+    const toLoad = []
     for (const datalayer of this.datalayersIndex) {
-      if (datalayer.showAtLoad()) await datalayer.show()
+      if (datalayer.showAtLoad()) toLoad.push(datalayer.show())
     }
+    await Promise.all(toLoad)
     this.dataloaded = true
     this.fire('dataloaded')
   }
@@ -1190,7 +1192,7 @@ export default class Umap extends ServerStored {
   geometry() {
     /* Return a GeoJSON geometry Object */
     const latlng = this._leafletMap.latLng(
-      this._leafletMap.options.center || this._leafletMap.getCenter()
+      this.properties.center || this._leafletMap.getCenter()
     )
     return {
       type: 'Point',
@@ -1668,8 +1670,8 @@ export default class Umap extends ServerStored {
   }
 
   _setCenterAndZoom() {
-    this._leafletMap.options.center = this._leafletMap.getCenter()
+    this.properties.center = this._leafletMap.getCenter()
-    this._leafletMap.options.zoom = this._leafletMap.getZoom()
+    this.properties.zoom = this._leafletMap.getZoom()
     this.isDirty = true
     this._defaultExtent = false
   }

umap/static/umap/js/umap.controls.js

@@ -942,11 +942,11 @@ L.Control.Loading.include({
   },
 
   _showIndicator: function () {
-    L.DomUtil.addClass(this._map._container, 'umap-loading')
+    this._map._container.classList.add('umap-loading')
   },
 
   _hideIndicator: function () {
-    L.DomUtil.removeClass(this._map._container, 'umap-loading')
+    this._map._container.classList.remove('umap-loading')
   },
 })
 

umap/static/umap/map.css

@@ -935,173 +935,42 @@ a.umap-control-caption,
 /* ********************************* */
 /*         Ajax loader               */
 /* ********************************* */
-.umap-loading .umap-loader
-{
-    display: block;
-    -webkit-animation: shift-rightwards 3s ease-in-out infinite;
-    -moz-animation: shift-rightwards 3s ease-in-out infinite;
-    -ms-animation: shift-rightwards 3s ease-in-out infinite;
-    -o-animation: shift-rightwards 3s ease-in-out infinite;
-    animation: shift-rightwards 3s ease-in-out infinite;
-    -webkit-animation-delay: .2s;
-    -moz-animation-delay: .2s;
-    -o-animation-delay: .2s;
-    animation-delay: .2s;
-}
 .umap-loader {
-    position: absolute;
+  width: 100%;
-    display: none;
+  height: 6px;
-    top: 0;
+  display: inline-block;
-    left: 0;
+  position: absolute;
-    right: 0;
+  background: var(--color-brightCyan);
-    height: 4px;
+  overflow: hidden;
-    z-index: var(--zindex-loader);
+  display: none;
-    background-color: #79c1c0 !important;
+  top: 0;
-    -webkit-transform: translateX(100%);
+  left: 0;
-    -moz-transform: translateX(100%);
+  right: 0;
-    -o-transform: translateX(100%);
+  height: 4px;
-    transform: translateX(100%);
+  z-index: var(--zindex-loader);
+}
+.umap-loader::after {
+  content: '';
+  box-sizing: border-box;
+  width: 0;
+  height: 4.8px;
+  background: var(--color-darkerGray);
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: animFw 10s linear infinite;
 }
 
-
+@keyframes animFw {
-@-webkit-keyframes shift-rightwards
+  0% {
-{
+    width: 0;
-    0%
+  }
-    {
+  100% {
-        -webkit-transform:translateX(-100%);
+    width: 100%;
-        -moz-transform:translateX(-100%);
+  }
-        -o-transform:translateX(-100%);
-        transform:translateX(-100%);
-    }
-
-    40%
-    {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
-    }
-
-    60%
-    {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
-    }
-
-    100%
-    {
-        -webkit-transform:translateX(100%);
-        -moz-transform:translateX(100%);
-        -o-transform:translateX(100%);
-        transform:translateX(100%);
-    }
-
 }
-@-moz-keyframes shift-rightwards
+.umap-loading .umap-loader {
-{
+  display: block;
-    0%
-    {
-        -webkit-transform:translateX(-100%);
-        -moz-transform:translateX(-100%);
-        -o-transform:translateX(-100%);
-        transform:translateX(-100%);
-    }
-
-    40%
-    {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
-    }
-
-    60%
-    {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
-    }
-
-    100%
-    {
-        -webkit-transform:translateX(100%);
-        -moz-transform:translateX(100%);
-        -o-transform:translateX(100%);
-        transform:translateX(100%);
-    }
-
-}
-@-o-keyframes shift-rightwards
-{
-    0%
-    {
-        -webkit-transform:translateX(-100%);
-        -moz-transform:translateX(-100%);
-        -o-transform:translateX(-100%);
-        transform:translateX(-100%);
-    }
-
-    40%
-    {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
-    }
-
-    60%
-    {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
-    }
-
-    100%
-    {
-        -webkit-transform:translateX(100%);
-        -moz-transform:translateX(100%);
-        -o-transform:translateX(100%);
-        transform:translateX(100%);
-    }
-
-}
-@keyframes shift-rightwards
-{
-    0%
-    {
-        -webkit-transform:translateX(-100%);
-        -moz-transform:translateX(-100%);
-        -o-transform:translateX(-100%);
-        transform:translateX(-100%);
-    }
-
-    40%
-    {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
-    }
-
-    60%
-    {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
-    }
-
-    100%
-    {
-        -webkit-transform:translateX(100%);
-        -moz-transform:translateX(100%);
-        -o-transform:translateX(100%);
-        transform:translateX(100%);
-    }
 }
 
 /* *************************** */