Merge pull request #1289 from umap-project/load-remotedata

Fix remote data not fetched on first save and add a button to manually fetch data

umap/static/umap/js/umap.core.js

@@ -285,6 +285,15 @@ L.DomUtil.createFieldset = (container, legend, options) => {
   return fieldsEl
 }
 
+L.DomUtil.createButton = (className, container, content, callback, context) => {
+  const el = L.DomUtil.add('a', className, container, content)
+  el.href = '#'
+  if (callback) {
+    L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', callback, context)
+  }
+  return el
+}
+
 L.DomUtil.classIf = (el, className, bool) => {
   if (bool) L.DomUtil.addClass(el, className)
   else L.DomUtil.removeClass(el, className)

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

@@ -201,6 +201,8 @@ L.U.DataLayer = L.Evented.extend({
     this._layers = {}
     this._geojson = null
     this._propertiesIndex = []
+    this._loaded = false  // Are layer metadata loaded
+    this._dataloaded = false  // Are layer data loaded
 
     this.parentPane = this.map.getPane('overlayPane')
     this.pane = this.map.createPane(`datalayer${L.stamp(this)}`, this.parentPane)
@@ -346,6 +348,7 @@ L.U.DataLayer = L.Evented.extend({
         this.backupOptions()
         this.fire('loaded')
         this._loading = false
+        this._dataloaded = true
       },
       context: this,
     })
@@ -398,10 +401,10 @@ L.U.DataLayer = L.Evented.extend({
     return !((!isNaN(from) && zoom < from) || (!isNaN(to) && zoom > to))
   },
 
-  fetchRemoteData: function () {
+  fetchRemoteData: function (force) {
     if (!this.isRemoteLayer()) return
     if (!this.showAtZoom()) return
-    if (!this.options.remoteData.dynamic && this.hasDataLoaded()) return
+    if (!this.options.remoteData.dynamic && this.hasDataLoaded() && !force) return
     if (!this.isVisible()) return
     let url = this.map.localizeUrl(this.options.remoteData.url)
     if (this.options.remoteData.proxy)
@@ -411,6 +414,7 @@ L.U.DataLayer = L.Evented.extend({
       verb: 'GET',
       callback: (raw) => {
         this.clear()
+        this._dataloaded = true
         this.rawToGeoJSON(raw, this.options.remoteData.format, (geojson) =>
           this.fromGeoJSON(geojson)
         )
@@ -435,7 +439,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   hasDataLoaded: function () {
-    return this._geojson !== null
+    return !this.umap_id || this._dataloaded
   },
 
   setUmapId: function (id) {
@@ -800,6 +804,7 @@ L.U.DataLayer = L.Evented.extend({
     this.off()
     this.clear()
     delete this._loaded
+    delete this._dataloaded
   },
 
   reset: function () {
@@ -961,6 +966,13 @@ L.U.DataLayer = L.Evented.extend({
     const remoteDataContainer = L.DomUtil.createFieldset(container, L._('Remote data'))
     builder = new L.U.FormBuilder(this, remoteDataFields)
     remoteDataContainer.appendChild(builder.build())
+    L.DomUtil.createButton(
+      'button umap-verify',
+      remoteDataContainer,
+      L._('Verify remote URL'),
+      () => this.fetchRemoteData(true),
+      this
+    )
 
     if (this.map.options.urls.datalayer_versions) this.buildVersionsFieldset(container)