umap-project 2.4.1__py3-none-any.whl → 2.5.0__py3-none-any.whl

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

@@ -15,11 +15,9 @@ U.Layer = {
     return this._layers
   },
 
-  getEditableOptions: function () {
-    return []
-  },
+  getEditableOptions: () => [],
 
-  onEdit: function () {},
+  onEdit: () => {},
 
   hasDataVisible: function () {
     return !!Object.keys(this._layers).length
@@ -67,11 +65,9 @@ U.Layer.Cluster = L.MarkerClusterGroup.extend({
       polygonOptions: {
         color: this.datalayer.getColor(),
       },
-      iconCreateFunction: function (cluster) {
-        return new U.Icon.Cluster(datalayer, cluster)
-      },
+      iconCreateFunction: (cluster) => new U.Icon.Cluster(datalayer, cluster),
     }
-    if (this.datalayer.options.cluster && this.datalayer.options.cluster.radius) {
+    if (this.datalayer.options.cluster?.radius) {
       options.maxClusterRadius = this.datalayer.options.cluster.radius
     }
     L.MarkerClusterGroup.prototype.initialize.call(this, options)
@@ -99,26 +95,24 @@ U.Layer.Cluster = L.MarkerClusterGroup.extend({
     return L.MarkerClusterGroup.prototype.removeLayer.call(this, layer)
   },
 
-  getEditableOptions: function () {
-    return [
-      [
-        'options.cluster.radius',
-        {
-          handler: 'BlurIntInput',
-          placeholder: L._('Clustering radius'),
-          helpText: L._('Override clustering radius (default 80)'),
-        },
-      ],
-      [
-        'options.cluster.textColor',
-        {
-          handler: 'TextColorPicker',
-          placeholder: L._('Auto'),
-          helpText: L._('Text color for the cluster label'),
-        },
-      ],
-    ]
-  },
+  getEditableOptions: () => [
+    [
+      'options.cluster.radius',
+      {
+        handler: 'BlurIntInput',
+        placeholder: L._('Clustering radius'),
+        helpText: L._('Override clustering radius (default 80)'),
+      },
+    ],
+    [
+      'options.cluster.textColor',
+      {
+        handler: 'TextColorPicker',
+        placeholder: L._('Auto'),
+        helpText: L._('Text color for the cluster label'),
+      },
+    ],
+  ],
 
   onEdit: function (field, builder) {
     if (field === 'options.cluster.radius') {
@@ -132,7 +126,77 @@ U.Layer.Cluster = L.MarkerClusterGroup.extend({
   },
 })
 
-U.Layer.Choropleth = L.FeatureGroup.extend({
+// Layer where each feature color is relative to the others,
+// so we need all features before behing able to set one
+// feature layer
+U.RelativeColorLayer = L.FeatureGroup.extend({
+  initialize: function (datalayer) {
+    this.datalayer = datalayer
+    this.colorSchemes = Object.keys(colorbrewer)
+      .filter((k) => k !== 'schemeGroups')
+      .sort()
+    const key = this.getType().toLowerCase()
+    if (!U.Utils.isObject(this.datalayer.options[key])) {
+      this.datalayer.options[key] = {}
+    }
+    L.FeatureGroup.prototype.initialize.call(this, [], this.datalayer.options[key])
+    this.datalayer.onceDataLoaded(() => {
+      this.redraw()
+      this.datalayer.on('datachanged', this.redraw, this)
+    })
+  },
+
+  redraw: function () {
+    this.compute()
+    if (this._map) this.eachLayer(this._map.addLayer, this._map)
+  },
+
+  getOption: function (option, feature) {
+    if (feature && option === feature.staticOptions.mainColor) {
+      return this.getColor(feature)
+    }
+  },
+
+  addLayer: function (layer) {
+    // Do not add yet the layer to the map
+    // wait for datachanged event, so we can compute breaks only once
+    const id = this.getLayerId(layer)
+    this._layers[id] = layer
+    return this
+  },
+
+  onAdd: function (map) {
+    this.compute()
+    L.FeatureGroup.prototype.onAdd.call(this, map)
+  },
+
+  getValues: function () {
+    const values = []
+    this.datalayer.eachLayer((layer) => {
+      const value = this._getValue(layer)
+      if (value !== undefined) values.push(value)
+    })
+    return values
+  },
+
+  renderLegend: function (container) {
+    const parent = L.DomUtil.create('ul', '', container)
+    const items = this.getLegendItems()
+    for (const [color, label] of items) {
+      const li = L.DomUtil.create('li', '', parent)
+      const colorEl = L.DomUtil.create('span', 'datalayer-color', li)
+      colorEl.style.backgroundColor = color
+      const labelEl = L.DomUtil.create('span', '', li)
+      labelEl.textContent = label
+    }
+  },
+
+  getColorSchemes: function (classes) {
+    return this.colorSchemes.filter((scheme) => Boolean(colorbrewer[scheme][classes]))
+  },
+})
+
+U.Layer.Choropleth = U.RelativeColorLayer.extend({
   statics: {
     NAME: L._('Choropleth'),
     TYPE: 'Choropleth',
@@ -153,42 +217,13 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
     manual: L._('Manual'),
   },
 
-  initialize: function (datalayer) {
-    this.datalayer = datalayer
-    if (!U.Utils.isObject(this.datalayer.options.choropleth)) {
-      this.datalayer.options.choropleth = {}
-    }
-    L.FeatureGroup.prototype.initialize.call(
-      this,
-      [],
-      this.datalayer.options.choropleth
-    )
-    this.datalayer.onceDataLoaded(() => {
-      this.redraw()
-      this.datalayer.on('datachanged', this.redraw, this)
-    })
-  },
-
-  redraw: function () {
-    this.computeBreaks()
-    if (this._map) this.eachLayer(this._map.addLayer, this._map)
-  },
-
   _getValue: function (feature) {
     const key = this.datalayer.options.choropleth.property || 'value'
-    return +feature.properties[key] // TODO: should we catch values non castable to int ?
+    const value = +feature.properties[key]
+    if (!Number.isNaN(value)) return value
   },
 
-  getValues: function () {
-    const values = []
-    this.datalayer.eachLayer((layer) => {
-      let value = this._getValue(layer)
-      if (!isNaN(value)) values.push(value)
-    })
-    return values
-  },
-
-  computeBreaks: function () {
+  compute: function () {
     const values = this.getValues()
 
     if (!values.length) {
@@ -196,9 +231,9 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
       this.options.colors = []
       return
     }
-    let mode = this.datalayer.options.choropleth.mode,
-      classes = +this.datalayer.options.choropleth.classes || 5,
-      breaks
+    const mode = this.datalayer.options.choropleth.mode
+    let classes = +this.datalayer.options.choropleth.classes || 5
+    let breaks
     classes = Math.min(classes, values.length)
     if (mode === 'manual') {
       const manualBreaks = this.datalayer.options.choropleth.breaks
@@ -206,7 +241,7 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
         breaks = manualBreaks
           .split(',')
           .map((b) => +b)
-          .filter((b) => !isNaN(b))
+          .filter((b) => !Number.isNaN(b))
       }
     } else if (mode === 'equidistant') {
       breaks = ss.equalIntervalBreaks(values, classes)
@@ -230,7 +265,7 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
   },
 
   getColor: function (feature) {
-    if (!feature) return // FIXME shold not happen
+    if (!feature) return // FIXME should not happen
     const featureValue = this._getValue(feature)
     // Find the bucket/step/limit that this value is less than and give it that color
     for (let i = 1; i < this.options.breaks.length; i++) {
@@ -240,25 +275,6 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
     }
   },
 
-  getOption: function (option, feature) {
-    if (feature && option === feature.staticOptions.mainColor) {
-      return this.getColor(feature)
-    }
-  },
-
-  addLayer: function (layer) {
-    // Do not add yet the layer to the map
-    // wait for datachanged event, so we want compute breaks once
-    var id = this.getLayerId(layer)
-    this._layers[id] = layer
-    return this
-  },
-
-  onAdd: function (map) {
-    this.computeBreaks()
-    L.FeatureGroup.prototype.onAdd.call(this, map)
-  },
-
   onEdit: function (field, builder) {
     // Only compute the breaks if we're dealing with choropleth
     if (!field.startsWith('options.choropleth')) return
@@ -267,7 +283,7 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
       this.datalayer.options.choropleth.mode = 'manual'
       if (builder) builder.helpers['options.choropleth.mode'].fetch()
     }
-    this.computeBreaks()
+    this.compute()
     // If user changes the mode or the number of classes,
     // then update the breaks input value
     if (field === 'options.choropleth.mode' || field === 'options.choropleth.classes') {
@@ -276,10 +292,6 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
   },
 
   getEditableOptions: function () {
-    const brewerSchemes = Object.keys(colorbrewer)
-      .filter((k) => k !== 'schemeGroups')
-      .sort()
-
     return [
       [
         'options.choropleth.property',
@@ -294,7 +306,7 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
         {
           handler: 'Select',
           label: L._('Choropleth color palette'),
-          selectOptions: brewerSchemes,
+          selectOptions: this.colorSchemes,
         },
       ],
       [
@@ -330,18 +342,139 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
     ]
   },
 
-  renderLegend: function (container) {
-    const parent = L.DomUtil.create('ul', '', container)
-    let li, color, label
-
-    this.options.breaks.slice(0, -1).forEach((limit, index) => {
-      li = L.DomUtil.create('li', '', parent)
-      color = L.DomUtil.create('span', 'datalayer-color', li)
-      color.style.backgroundColor = this.options.colors[index]
-      label = L.DomUtil.create('span', '', li)
-      label.textContent = `${+this.options.breaks[index].toFixed(
-        1
-      )} - ${+this.options.breaks[index + 1].toFixed(1)}`
+  getLegendItems: function () {
+    return this.options.breaks.slice(0, -1).map((el, index) => {
+      const from = +this.options.breaks[index].toFixed(1)
+      const to = +this.options.breaks[index + 1].toFixed(1)
+      return [this.options.colors[index], `${from} - ${to}`]
+    })
+  },
+})
+
+U.Layer.Categorized = U.RelativeColorLayer.extend({
+  statics: {
+    NAME: L._('Categorized'),
+    TYPE: 'Categorized',
+  },
+  includes: [U.Layer],
+  MODES: {
+    manual: L._('Manual'),
+    alpha: L._('Alphabetical'),
+  },
+  defaults: {
+    color: 'white',
+    fillColor: 'red',
+    fillOpacity: 0.7,
+    weight: 2,
+  },
+
+  _getValue: function (feature) {
+    const key =
+      this.datalayer.options.categorized.property || this.datalayer._propertiesIndex[0]
+    return feature.properties[key]
+  },
+
+  getColor: function (feature) {
+    if (!feature) return // FIXME should not happen
+    const featureValue = this._getValue(feature)
+    for (let i = 0; i < this.options.categories.length; i++) {
+      if (featureValue === this.options.categories[i]) {
+        return this.options.colors[i]
+      }
+    }
+  },
+
+  compute: function () {
+    const values = this.getValues()
+
+    if (!values.length) {
+      this.options.categories = []
+      this.options.colors = []
+      return
+    }
+    const mode = this.datalayer.options.categorized.mode
+    let categories = []
+    if (mode === 'manual') {
+      const manualCategories = this.datalayer.options.categorized.categories
+      if (manualCategories) {
+        categories = manualCategories.split(',')
+      }
+    } else {
+      categories = values
+        .filter((val, idx, arr) => arr.indexOf(val) === idx)
+        .sort(U.Utils.naturalSort)
+    }
+    this.options.categories = categories
+    this.datalayer.options.categorized.categories = this.options.categories.join(',')
+    const fillColor = this.datalayer.getOption('fillColor') || this.defaults.fillColor
+    const colorScheme = this.datalayer.options.categorized.brewer
+    this._classes = this.options.categories.length
+    if (colorbrewer[colorScheme]?.[this._classes]) {
+      this.options.colors = colorbrewer[colorScheme][this._classes]
+    } else {
+      this.options.colors = colorbrewer?.Accent[this._classes]
+        ? colorbrewer?.Accent[this._classes]
+        : U.COLORS
+    }
+  },
+
+  getEditableOptions: function () {
+    return [
+      [
+        'options.categorized.property',
+        {
+          handler: 'Select',
+          selectOptions: this.datalayer._propertiesIndex,
+          label: L._('Category property'),
+        },
+      ],
+      [
+        'options.categorized.brewer',
+        {
+          handler: 'Select',
+          label: L._('Color palette'),
+          selectOptions: this.getColorSchemes(this._classes),
+        },
+      ],
+      [
+        'options.categorized.categories',
+        {
+          handler: 'BlurInput',
+          label: L._('Categories'),
+          helpText: L._('Comma separated list of categories.'),
+        },
+      ],
+      [
+        'options.categorized.mode',
+        {
+          handler: 'MultiChoice',
+          default: 'alpha',
+          choices: Object.entries(this.MODES),
+          label: L._('Categories mode'),
+        },
+      ],
+    ]
+  },
+
+  onEdit: function (field, builder) {
+    // Only compute the categories if we're dealing with categorized
+    if (!field.startsWith('options.categorized')) return
+    // If user touches the categories, then force manual mode
+    if (field === 'options.categorized.categories') {
+      this.datalayer.options.categorized.mode = 'manual'
+      if (builder) builder.helpers['options.categorized.mode'].fetch()
+    }
+    this.compute()
+    // If user changes the mode
+    // then update the categories input value
+    if (field === 'options.categorized.mode') {
+      if (builder) builder.helpers['options.categorized.categories'].fetch()
+    }
+  },
+
+  getLegendItems: function () {
+    return this.options.categories.map((limit, index) => {
+      return [this.options.colors[index], this.options.categories[index]]
     })
   },
 })
@@ -364,13 +497,10 @@ U.Layer.Heat = L.HeatLayer.extend({
 
   addLayer: function (layer) {
     if (layer instanceof L.Marker) {
-      let latlng = layer.getLatLng(),
-        alt
-      if (
-        this.datalayer.options.heat &&
-        this.datalayer.options.heat.intensityProperty
-      ) {
-        alt = parseFloat(
+      let latlng = layer.getLatLng()
+      let alt
+      if (this.datalayer.options.heat?.intensityProperty) {
+        alt = Number.parseFloat(
           layer.properties[this.datalayer.options.heat.intensityProperty || 0]
         )
         latlng = new L.LatLng(latlng.lat, latlng.lng, alt)
@@ -383,37 +513,33 @@ U.Layer.Heat = L.HeatLayer.extend({
     this.setLatLngs([])
   },
 
-  getFeatures: function () {
-    return {}
-  },
+  getFeatures: () => ({}),
 
   getBounds: function () {
     return L.latLngBounds(this._latlngs)
   },
 
-  getEditableOptions: function () {
-    return [
-      [
-        'options.heat.radius',
-        {
-          handler: 'Range',
-          min: 10,
-          max: 100,
-          step: 5,
-          label: L._('Heatmap radius'),
-          helpText: L._('Override heatmap radius (default 25)'),
-        },
-      ],
-      [
-        'options.heat.intensityProperty',
-        {
-          handler: 'BlurInput',
-          placeholder: L._('Heatmap intensity property'),
-          helpText: L._('Optional intensity property for heatmap'),
-        },
-      ],
-    ]
-  },
+  getEditableOptions: () => [
+    [
+      'options.heat.radius',
+      {
+        handler: 'Range',
+        min: 10,
+        max: 100,
+        step: 5,
+        label: L._('Heatmap radius'),
+        helpText: L._('Override heatmap radius (default 25)'),
+      },
+    ],
+    [
+      'options.heat.intensityProperty',
+      {
+        handler: 'BlurInput',
+        placeholder: L._('Heatmap intensity property'),
+        helpText: L._('Optional intensity property for heatmap'),
+      },
+    ],
+  ],
 
   onEdit: function (field, builder) {
     if (field === 'options.heat.intensityProperty') {
@@ -440,23 +566,23 @@ U.Layer.Heat = L.HeatLayer.extend({
     if (!this._map) {
       return
     }
-    var data = [],
-      r = this._heat._r,
-      size = this._map.getSize(),
-      bounds = new L.Bounds(L.point([-r, -r]), size.add([r, r])),
-      cellSize = r / 2,
-      grid = [],
-      panePos = this._map._getMapPanePos(),
-      offsetX = panePos.x % cellSize,
-      offsetY = panePos.y % cellSize,
-      i,
-      len,
-      p,
-      cell,
-      x,
-      y,
-      j,
-      len2
+    const data = []
+    const r = this._heat._r
+    const size = this._map.getSize()
+    const bounds = new L.Bounds(L.point([-r, -r]), size.add([r, r]))
+    const cellSize = r / 2
+    const grid = []
+    const panePos = this._map._getMapPanePos()
+    const offsetX = panePos.x % cellSize
+    const offsetY = panePos.y % cellSize
+    let i
+    let len
+    let p
+    let cell
+    let x
+    let y
+    let j
+    let len2
 
     this._max = 1
 
@@ -465,7 +591,7 @@ U.Layer.Heat = L.HeatLayer.extend({
       x = Math.floor((p.x - offsetX) / cellSize) + 2
       y = Math.floor((p.y - offsetY) / cellSize) + 2
 
-      var alt =
+      const alt =
         this._latlngs[i].alt !== undefined
           ? this._latlngs[i].alt
           : this._latlngs[i][2] !== undefined
@@ -538,23 +664,20 @@ U.DataLayer = L.Evented.extend({
 
     let isDirty = false
     let isDeleted = false
-    const self = this
     try {
       Object.defineProperty(this, 'isDirty', {
-        get: function () {
-          return isDirty
-        },
-        set: function (status) {
-          if (!isDirty && status) self.fire('dirty')
+        get: () => isDirty,
+        set: (status) => {
+          if (!isDirty && status) this.fire('dirty')
           isDirty = status
           if (status) {
-            self.map.addDirtyDatalayer(self)
+            this.map.addDirtyDatalayer(this)
             // A layer can be made dirty by indirect action (like dragging layers)
             // we need to have it loaded before saving it.
-            if (!self.isLoaded()) self.fetchData()
+            if (!this.isLoaded()) this.fetchData()
           } else {
-            self.map.removeDirtyDatalayer(self)
-            self.isDeleted = false
+            this.map.removeDirtyDatalayer(this)
+            this.isDeleted = false
           }
         },
       })
@@ -563,13 +686,11 @@ U.DataLayer = L.Evented.extend({
     }
     try {
       Object.defineProperty(this, 'isDeleted', {
-        get: function () {
-          return isDeleted
-        },
-        set: function (status) {
-          if (!isDeleted && status) self.fire('deleted')
+        get: () => isDeleted,
+        set: (status) => {
+          if (!isDeleted && status) this.fire('deleted')
           isDeleted = status
-          if (status) self.isDirty = status
+          if (status) this.isDirty = status
         },
       })
     } catch (e) {
@@ -582,11 +703,11 @@ U.DataLayer = L.Evented.extend({
       this.options.remoteData = {}
     }
     // Retrocompat
-    if (this.options.remoteData && this.options.remoteData.from) {
+    if (this.options.remoteData?.from) {
       this.options.fromZoom = this.options.remoteData.from
       delete this.options.remoteData.from
     }
-    if (this.options.remoteData && this.options.remoteData.to) {
+    if (this.options.remoteData?.to) {
       this.options.toZoom = this.options.remoteData.to
       delete this.options.remoteData.to
     }
@@ -618,9 +739,9 @@ U.DataLayer = L.Evented.extend({
   },
 
   render: function (fields, builder) {
-    let impacts = U.Utils.getImpactsFromSchema(fields)
+    const impacts = U.Utils.getImpactsFromSchema(fields)
 
-    for (let impact of impacts) {
+    for (const impact of impacts) {
       switch (impact) {
         case 'ui':
           this.map.onDataLayersChanged()
@@ -630,9 +751,9 @@ U.DataLayer = L.Evented.extend({
             this.resetLayer()
           }
           this.hide()
-          fields.forEach((field) => {
+          for (const field of fields) {
             this.layer.onEdit(field, builder)
-          })
+          }
           this.redraw()
           this.show()
           break
@@ -745,19 +866,19 @@ U.DataLayer = L.Evented.extend({
     }
   },
 
-  fromGeoJSON: function (geojson) {
-    this.addData(geojson)
+  fromGeoJSON: function (geojson, sync = true) {
+    this.addData(geojson, sync)
     this._geojson = geojson
     this._dataloaded = true
-    this.fire('dataloaded')
     this.fire('datachanged')
+    this.fire('dataloaded')
   },
 
   fromUmapGeoJSON: async function (geojson) {
     if (geojson._storage) geojson._umap_options = geojson._storage // Retrocompat
     if (geojson._umap_options) this.setOptions(geojson._umap_options)
     if (this.isRemoteLayer()) await this.fetchRemoteData()
-    else this.fromGeoJSON(geojson)
+    else this.fromGeoJSON(geojson, false)
     this._loaded = true
   },
 
@@ -787,14 +908,14 @@ U.DataLayer = L.Evented.extend({
   },
 
   showAtZoom: function () {
-    const from = parseInt(this.options.fromZoom, 10),
-      to = parseInt(this.options.toZoom, 10),
-      zoom = this.map.getZoom()
-    return !((!isNaN(from) && zoom < from) || (!isNaN(to) && zoom > to))
+    const from = Number.parseInt(this.options.fromZoom, 10)
+    const to = Number.parseInt(this.options.toZoom, 10)
+    const zoom = this.map.getZoom()
+    return !((!Number.isNaN(from) && zoom < from) || (!Number.isNaN(to) && zoom > to))
   },
 
   hasDynamicData: function () {
-    return !!(this.options.remoteData && this.options.remoteData.dynamic)
+    return !!this.options.remoteData?.dynamic
   },
 
   fetchRemoteData: async function (force) {
@@ -806,13 +927,11 @@ U.DataLayer = L.Evented.extend({
       url = this.map.proxyUrl(url, this.options.remoteData.ttl)
     }
     const response = await this.map.request.get(url)
-    if (response && response.ok) {
+    if (response?.ok) {
       this.clear()
-      this.rawToGeoJSON(
-        await response.text(),
-        this.options.remoteData.format,
-        (geojson) => this.fromGeoJSON(geojson)
-      )
+      this.map.formatter
+        .parse(await response.text(), this.options.remoteData.format)
+        .then((geojson) => this.fromGeoJSON(geojson))
     }
   },
 
@@ -884,11 +1003,7 @@ U.DataLayer = L.Evented.extend({
   },
 
   isRemoteLayer: function () {
-    return Boolean(
-      this.options.remoteData &&
-        this.options.remoteData.url &&
-        this.options.remoteData.format
-    )
+    return Boolean(this.options.remoteData?.url && this.options.remoteData.format)
   },
 
   isClustered: function () {
@@ -911,14 +1026,15 @@ U.DataLayer = L.Evented.extend({
     if (this.hasDataLoaded()) this.fire('datachanged')
   },
 
-  removeLayer: function (feature) {
+  removeLayer: function (feature, sync) {
     const id = L.stamp(feature)
+    if (sync !== false) feature.sync.delete()
     this.layer.removeLayer(feature)
     feature.disconnectFromDataLayer(this)
     this._index.splice(this._index.indexOf(id), 1)
     delete this._layers[id]
     delete this.map.features_index[feature.getSlug()]
-    if (this.hasDataLoaded()) this.fire('datachanged')
+    if (this.hasDataLoaded() && this.isVisible()) this.fire('datachanged')
   },
 
   indexProperties: function (feature) {
@@ -931,6 +1047,7 @@ U.DataLayer = L.Evented.extend({
     if (name.indexOf('_') === 0) return
     if (L.Util.indexOf(this._propertiesIndex, name) !== -1) return
     this._propertiesIndex.push(name)
+    this._propertiesIndex.sort()
   },
 
   deindexProperty: function (name) {
@@ -938,100 +1055,30 @@ U.DataLayer = L.Evented.extend({
     if (idx !== -1) this._propertiesIndex.splice(idx, 1)
   },
 
-  addData: function (geojson) {
+  sortedValues: function (property) {
+    return Object.values(this._layers)
+      .map((feature) => feature.properties[property])
+      .filter((val, idx, arr) => arr.indexOf(val) === idx)
+      .sort(U.Utils.naturalSort)
+  },
+
+  addData: function (geojson, sync) {
     try {
       // Do not fail if remote data is somehow invalid,
       // otherwise the layer becomes uneditable.
-      this.geojsonToFeatures(geojson)
+      this.geojsonToFeatures(geojson, sync)
     } catch (err) {
       console.log('Error with DataLayer', this.umap_id)
       console.error(err)
     }
   },
 
-  addRawData: function (c, type) {
-    this.rawToGeoJSON(c, type, (geojson) => this.addData(geojson))
-  },
-
-  rawToGeoJSON: function (c, type, callback) {
-    const toDom = (x) => {
-      const doc = new DOMParser().parseFromString(x, 'text/xml')
-      const errorNode = doc.querySelector('parsererror')
-      if (errorNode) {
-        U.Alert.error(L._('Cannot parse data'))
-      }
-      return doc
-    }
-
-    // TODO add a duck typing guessType
-    if (type === 'csv') {
-      csv2geojson.csv2geojson(
-        c,
-        {
-          delimiter: 'auto',
-          includeLatLon: false,
-        },
-        (err, result) => {
-          // csv2geojson fallback to null geometries when it cannot determine
-          // lat or lon columns. This is valid geojson, but unwanted from a user
-          // point of view.
-          if (result && result.features.length) {
-            if (result.features[0].geometry === null) {
-              err = {
-                type: 'Error',
-                message: L._('Cannot determine latitude and longitude columns.'),
-              }
-            }
-          }
-          if (err) {
-            let message
-            if (err.type === 'Error') {
-              message = err.message
-            } else {
-              message = L._('{count} errors during import: {message}', {
-                count: err.length,
-                message: err[0].message,
-              })
-            }
-            U.Alert.error(message, 10000)
-            console.error(err)
-          }
-          if (result && result.features.length) {
-            callback(result)
-          }
-        }
-      )
-    } else if (type === 'gpx') {
-      callback(toGeoJSON.gpx(toDom(c)))
-    } else if (type === 'georss') {
-      callback(GeoRSSToGeoJSON(toDom(c)))
-    } else if (type === 'kml') {
-      callback(toGeoJSON.kml(toDom(c)))
-    } else if (type === 'osm') {
-      let d
-      try {
-        d = JSON.parse(c)
-      } catch (e) {
-        d = toDom(c)
-      }
-      callback(osmtogeojson(d, { flatProperties: true }))
-    } else if (type === 'geojson') {
-      try {
-        const gj = JSON.parse(c)
-        callback(gj)
-      } catch (err) {
-        U.Alert.error(`Invalid JSON file: ${err}`)
-        return
-      }
-    }
-  },
-
   // The choice of the name is not ours, because it is required by Leaflet.
   // It is misleading, as the returned objects are uMap objects, and not
   // GeoJSON features.
-  geojsonToFeatures: function (geojson) {
+  geojsonToFeatures: function (geojson, sync) {
     if (!geojson) return
-    const features = geojson instanceof Array ? geojson : geojson.features
+    const features = Array.isArray(geojson) ? geojson : geojson.features
     let i
     let len
 
@@ -1045,10 +1092,10 @@ U.DataLayer = L.Evented.extend({
 
     const geometry = geojson.type === 'Feature' ? geojson.geometry : geojson
 
-    let feature = this.geoJSONToLeaflet({ geometry, geojson })
+    const feature = this.geoJSONToLeaflet({ geometry, geojson })
     if (feature) {
       this.addLayer(feature)
-      feature.onCommit()
+      if (sync) feature.onCommit()
       return feature
     }
   },
@@ -1077,7 +1124,8 @@ U.DataLayer = L.Evented.extend({
   } = {}) {
     if (!geometry) return // null geometry is valid geojson.
     const coords = geometry.coordinates
-    let latlng, latlngs
+    let latlng
+    let latlngs
 
     // Create a default geojson if none is provided
     if (geojson === undefined) geojson = { type: 'Feature', geometry: geometry }
@@ -1154,10 +1202,12 @@ U.DataLayer = L.Evented.extend({
     return new U.Polygon(this.map, latlngs, { geojson: geojson, datalayer: this }, id)
   },
 
-  importRaw: function (raw, type) {
-    this.addRawData(raw, type)
+  importRaw: async function (raw, format) {
+    this.map.formatter
+      .parse(raw, format)
+      .then((geojson) => this.addData(geojson))
+      .then(() => this.zoomTo())
     this.isDirty = true
-    this.zoomTo()
   },
 
   importFromFiles: function (files, type) {
@@ -1176,7 +1226,7 @@ U.DataLayer = L.Evented.extend({
   importFromUrl: async function (uri, type) {
     uri = this.map.localizeUrl(uri)
     const response = await this.map.request.get(uri)
-    if (response && response.ok) {
+    if (response?.ok) {
       this.importRaw(await response.text(), type)
     }
   },
@@ -1222,8 +1272,8 @@ U.DataLayer = L.Evented.extend({
     const options = U.Utils.CopyJSON(this.options)
     options.name = L._('Clone of {name}', { name: this.options.name })
     delete options.id
-    const geojson = U.Utils.CopyJSON(this._geojson),
-      datalayer = this.map.createDataLayer(options)
+    const geojson = U.Utils.CopyJSON(this._geojson)
+    const datalayer = this.map.createDataLayer(options)
     datalayer.fromGeoJSON(geojson)
     return datalayer
   },
@@ -1272,28 +1322,28 @@ U.DataLayer = L.Evented.extend({
     if (!this.map.editEnabled || !this.isLoaded()) {
       return
     }
-    const container = L.DomUtil.create('div', 'umap-layer-properties-container'),
-      metadataFields = [
-        'options.name',
-        'options.description',
-        ['options.type', { handler: 'LayerTypeChooser', label: L._('Type of layer') }],
-        ['options.displayOnLoad', { label: L._('Display on load'), handler: 'Switch' }],
-        [
-          'options.browsable',
-          {
-            label: L._('Data is browsable'),
-            handler: 'Switch',
-            helpEntries: 'browsable',
-          },
-        ],
-        [
-          'options.inCaption',
-          {
-            label: L._('Show this layer in the caption'),
-            handler: 'Switch',
-          },
-        ],
-      ]
+    const container = L.DomUtil.create('div', 'umap-layer-properties-container')
+    const metadataFields = [
+      'options.name',
+      'options.description',
+      ['options.type', { handler: 'LayerTypeChooser', label: L._('Type of layer') }],
+      ['options.displayOnLoad', { label: L._('Display on load'), handler: 'Switch' }],
+      [
+        'options.browsable',
+        {
+          label: L._('Data is browsable'),
+          handler: 'Switch',
+          helpEntries: 'browsable',
+        },
+      ],
+      [
+        'options.inCaption',
+        {
+          label: L._('Show this layer in the caption'),
+          handler: 'Switch',
+        },
+      ],
+    ]
     L.DomUtil.createTitle(container, L._('Layer properties'), 'icon-layers')
     let builder = new U.FormBuilder(this, metadataFields, {
       callback: function (e) {
@@ -1318,7 +1368,7 @@ U.DataLayer = L.Evented.extend({
       layerProperties.appendChild(builder.build())
     }
 
-    let shapeOptions = [
+    const shapeOptions = [
       'options.color',
       'options.iconClass',
       'options.iconUrl',
@@ -1337,7 +1387,7 @@ U.DataLayer = L.Evented.extend({
     const shapeProperties = L.DomUtil.createFieldset(container, L._('Shape properties'))
     shapeProperties.appendChild(builder.build())
 
-    let optionsFields = [
+    const optionsFields = [
       'options.smoothFactor',
       'options.dashArray',
       'options.zoomTo',
@@ -1484,23 +1534,23 @@ U.DataLayer = L.Evented.extend({
   },
 
   getOption: function (option, feature) {
-    if (this.layer && this.layer.getOption) {
+    if (this.layer?.getOption) {
       const value = this.layer.getOption(option, feature)
       if (typeof value !== 'undefined') return value
     }
     if (typeof this.getOwnOption(option) !== 'undefined') {
       return this.getOwnOption(option)
-    } else if (this.layer && this.layer.defaults && this.layer.defaults[option]) {
+    }
+    if (this.layer?.defaults?.[option]) {
       return this.layer.defaults[option]
-    } else {
-      return this.map.getOption(option, feature)
     }
+    return this.map.getOption(option, feature)
   },
 
   buildVersionsFieldset: async function (container) {
     const appendVersion = (data) => {
-      const date = new Date(parseInt(data.at, 10))
-      const content = `${date.toLocaleString(L.lang)} (${parseInt(data.size) / 1000}Kb)`
+      const date = new Date(Number.parseInt(data.at, 10))
+      const content = `${date.toLocaleString(L.lang)} (${Number.parseInt(data.size) / 1000}Kb)`
       const el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
       const button = L.DomUtil.createButton(
         '',
@@ -1576,7 +1626,7 @@ U.DataLayer = L.Evented.extend({
 
   // Is this layer type browsable in theorie
   isBrowsable: function () {
-    return this.layer && this.layer.browsable
+    return this.layer?.browsable
   },
 
   // Is this layer browsable in theorie
@@ -1753,9 +1803,9 @@ U.DataLayer = L.Evented.extend({
   },
 
   tableEdit: function () {
-    if (this.isRemoteLayer() || !this.isVisible()) return
+    if (!this.isVisible()) return
     const editor = new U.TableEditor(this)
-    editor.edit()
+    editor.open()
   },
 
   getFilterKeys: function () {
@@ -1763,9 +1813,9 @@ U.DataLayer = L.Evented.extend({
     // By default, it will we use the "name" property, which is also the one used as label in the features list.
     // When map owner has configured another label or sort key, we try to be smart and search in the same keys.
     if (this.map.options.filterKey) return this.map.options.filterKey
-    else if (this.options.labelKey) return this.options.labelKey
-    else if (this.map.options.sortKey) return this.map.options.sortKey
-    else return 'name'
+    if (this.options.labelKey) return this.options.labelKey
+    if (this.map.options.sortKey) return this.map.options.sortKey
+    return 'name'
   },
 })