refactor(sync): Sync layers creation with map.createDataLayer utility.

Rather than having it done inside the datalayer itself. This gives us
more control.

umap/static/umap/js/modules/sync/updaters.js

@@ -51,7 +51,7 @@ export class DataLayerUpdater extends BaseUpdater {
   upsert({ value }) {
     // Inserts does not happen (we use multiple updates instead).
     this.map.createDataLayer(value, false)
-    this.map.render()
+    this.map.render([])
   }
 
   update({ key, metadata, value }) {

umap/static/umap/js/umap.forms.js

@@ -943,8 +943,9 @@ L.FormBuilder.MultiChoice = L.FormBuilder.Element.extend({
     }
     const choices = this.getChoices().map(([value, label]) => value)
     if (choices.includes(value)) {
-      this.container.querySelector(`input[type="radio"][value="${value}"]`).checked =
-        true
+      this.container.querySelector(
+        `input[type="radio"][value="${value}"]`
+      ).checked = true
     }
   },
 

umap/static/umap/js/umap.js

@@ -808,7 +808,12 @@ U.Map = L.Map.extend({
     datalayer = datalayer || {
       name: `${L._('Layer')} ${this.datalayers_index.length + 1}`,
     }
-    return new U.DataLayer(this, datalayer, sync)
+    const dl = new U.DataLayer(this, datalayer, sync)
+
+    if (sync !== false) {
+      dl.sync.upsert(dl.options)
+    }
+    return dl
   },
 
   newDataLayer: function () {

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

@@ -606,18 +606,13 @@ U.DataLayer = L.Evented.extend({
     // be in the "forced visibility" mode
     if (this.autoLoaded()) this.map.on('zoomend', this.onZoomEnd, this)
     this.on('datachanged', this.map.onDataLayersChanged, this.map)
-
-    if (sync !== false) {
-      const { engine, subject, metadata } = this.getSyncMetadata()
-      engine.upsert(subject, metadata, this.options)
-    }
   },
 
   getSyncMetadata: function () {
     return {
       subject: 'datalayer',
       metadata: {
-        id: this.umap_id,
+        id: this.umap_id || null,
       },
     }
   },