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

umap/static/umap/js/umap.js

@@ -29,7 +29,7 @@ L.Map.mergeOptions({
 U.Map = L.Map.extend({
   includes: [ControlsMixin],
 
-  initialize: function (el, geojson) {
+  initialize: async function (el, geojson) {
     this.sync_engine = new U.SyncEngine(this)
     this.sync = this.sync_engine.proxy(this)
     // Locale name (pt_PT, en_US…)
@@ -56,8 +56,8 @@ U.Map = L.Map.extend({
     this.urls = new U.URLs(this.options.urls)
 
     this.panel = new U.Panel(this)
+    this.dialog = new U.Dialog({ className: 'dark' })
     this.tooltip = new U.Tooltip(this._controlContainer)
-    this.dialog = new U.Dialog(this._controlContainer)
     if (this.hasEditMode()) {
       this.editPanel = new U.EditPanel(this)
       this.fullPanel = new U.FullPanel(this)
@@ -116,6 +116,8 @@ U.Map = L.Map.extend({
     // Needed for actions labels
     this.help = new U.Help(this)
 
+    this.formatter = new U.Formatter(this)
+
     this.initControls()
     // Needs locate control and hash to exist
     this.initCenter()
@@ -174,23 +176,7 @@ U.Map = L.Map.extend({
       }
       this._default_extent = true
       this.options.name = L._('Untitled map')
-      let data = L.Util.queryString('data', null)
-      const url = new URL(window.location.href)
-      const dataUrls = new URLSearchParams(url.search).getAll('dataUrl')
-      const dataFormat = L.Util.queryString('dataFormat', 'geojson')
-      if (dataUrls.length) {
-        for (let dataUrl of dataUrls) {
-          dataUrl = decodeURIComponent(dataUrl)
-          dataUrl = this.localizeUrl(dataUrl)
-          dataUrl = this.proxyUrl(dataUrl)
-          const datalayer = this.createDataLayer()
-          datalayer.importFromUrl(dataUrl, dataFormat)
-        }
-      } else if (data) {
-        data = decodeURIComponent(data)
-        const datalayer = this.createDataLayer()
-        datalayer.importRaw(data, dataFormat)
-      }
+      await this.loadDataFromQueryString()
     }
 
     this.slideshow = new U.Slideshow(this, this.options.slideshow)
@@ -201,6 +187,7 @@ U.Map = L.Map.extend({
     }
 
     this.initShortcuts()
+    if (!this.options.noControl) this.initCaptionBar()
     this.onceDataLoaded(this.setViewFromQueryString)
 
     window.onbeforeunload = () => (this.editEnabled && this.isDirty) || null
@@ -295,9 +282,28 @@ U.Map = L.Map.extend({
     }
   },
 
-  setViewFromQueryString: function () {
+  loadDataFromQueryString: async function () {
+    let data = L.Util.queryString('data', null)
+    const url = new URL(window.location.href)
+    const dataUrls = new URLSearchParams(url.search).getAll('dataUrl')
+    const dataFormat = L.Util.queryString('dataFormat', 'geojson')
+    if (dataUrls.length) {
+      for (let dataUrl of dataUrls) {
+        dataUrl = decodeURIComponent(dataUrl)
+        dataUrl = this.localizeUrl(dataUrl)
+        dataUrl = this.proxyUrl(dataUrl)
+        const datalayer = this.createDataLayer()
+        await datalayer.importFromUrl(dataUrl, dataFormat)
+      }
+    } else if (data) {
+      data = decodeURIComponent(data)
+      const datalayer = this.createDataLayer()
+      await datalayer.importRaw(data, dataFormat)
+    }
+  },
+
+  setViewFromQueryString: async function () {
     if (this.options.noControl) return
-    this.initCaptionBar()
     if (L.Util.queryString('share')) {
       this.share.open()
     } else if (this.options.onLoadPanel === 'databrowser') {
@@ -539,18 +545,16 @@ U.Map = L.Map.extend({
   initShortcuts: function () {
     const globalShortcuts = function (e) {
       if (e.key === 'Escape') {
-        if (this.dialog.visible) {
-          this.dialog.close()
-        } else if (this.importer.dialog.visible) {
+        if (this.importer.dialog.visible) {
           this.importer.dialog.close()
         } else if (this.editEnabled && this.editTools.drawing()) {
           this.editTools.stopDrawing()
         } else if (this.measureTools.enabled()) {
           this.measureTools.stopDrawing()
-        } else if (this.editPanel?.isOpen()) {
-          this.editPanel?.close()
         } else if (this.fullPanel?.isOpen()) {
           this.fullPanel?.close()
+        } else if (this.editPanel?.isOpen()) {
+          this.editPanel?.close()
         } else if (this.panel.isOpen()) {
           this.panel.close()
         }
@@ -1465,12 +1469,8 @@ U.Map = L.Map.extend({
         { handler: 'Switch', label: L._('Autostart when map is loaded') },
       ],
     ]
-    const slideshowHandler = function () {
-      this.slideshow.setOptions(this.options.slideshow)
-    }
     const slideshowBuilder = new U.FormBuilder(this, slideshowFields, {
-      callback: slideshowHandler,
-      callbackContext: this,
+      callback: () => this.slideshow.setOptions(this.options.slideshow),
     })
     slideshow.appendChild(slideshowBuilder.build())
   },
@@ -1642,9 +1642,12 @@ U.Map = L.Map.extend({
   },
 
   askForReset: function (e) {
-    if (!confirm(L._('Are you sure you want to cancel your changes?'))) return
-    this.reset()
-    this.disableEdit()
+    this.dialog
+      .confirm(L._('Are you sure you want to cancel your changes?'))
+      .then(() => {
+        this.reset()
+        this.disableEdit()
+      })
   },
 
   startMarker: function () {
@@ -1888,4 +1891,15 @@ U.Map = L.Map.extend({
       })
     await this.server.post(sendLink, {}, formData)
   },
+
+  allProperties: function () {
+    return [].concat(...this.datalayers_index.map((dl) => dl._propertiesIndex))
+  },
+
+  sortedValues: function (property) {
+    return []
+      .concat(...this.datalayers_index.map((dl) => dl.sortedValues(property)))
+      .filter((val, idx, arr) => arr.indexOf(val) === idx)
+      .sort(U.Utils.naturalSort)
+  },
 })

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

@@ -126,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',
@@ -147,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 ?
-  },
-
-  getValues: function () {
-    const values = []
-    this.datalayer.eachLayer((layer) => {
-      const value = this._getValue(layer)
-      if (!Number.isNaN(value)) values.push(value)
-    })
-    return values
+    const value = +feature.properties[key]
+    if (!Number.isNaN(value)) return value
   },
 
-  computeBreaks: function () {
+  compute: function () {
     const values = this.getValues()
 
     if (!values.length) {
@@ -224,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++) {
@@ -234,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
-    const 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
@@ -261,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') {
@@ -270,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',
@@ -288,7 +306,7 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
         {
           handler: 'Select',
           label: L._('Choropleth color palette'),
-          selectOptions: brewerSchemes,
+          selectOptions: this.colorSchemes,
         },
       ],
       [
@@ -324,20 +342,139 @@ U.Layer.Choropleth = L.FeatureGroup.extend({
     ]
   },
 
-  renderLegend: function (container) {
-    const parent = L.DomUtil.create('ul', '', container)
-    let li
-    let color
-    let 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]]
     })
   },
 })
@@ -614,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
@@ -733,8 +870,8 @@ U.DataLayer = L.Evented.extend({
     this.addData(geojson, sync)
     this._geojson = geojson
     this._dataloaded = true
-    this.fire('dataloaded')
     this.fire('datachanged')
+    this.fire('dataloaded')
   },
 
   fromUmapGeoJSON: async function (geojson) {
@@ -792,11 +929,9 @@ U.DataLayer = L.Evented.extend({
     const response = await this.map.request.get(url)
     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))
     }
   },
 
@@ -899,7 +1034,7 @@ U.DataLayer = L.Evented.extend({
     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) {
@@ -912,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) {
@@ -919,6 +1055,13 @@ U.DataLayer = L.Evented.extend({
     if (idx !== -1) this._propertiesIndex.splice(idx, 1)
   },
 
+  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,
@@ -930,83 +1073,6 @@ U.DataLayer = L.Evented.extend({
     }
   },
 
-  addRawData: function (c, type) {
-    this.rawToGeoJSON(c, type, (geojson) => this.addData(geojson))
-  },
-
-  rawToGeoJSON: (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?.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?.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.
@@ -1136,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) {
@@ -1735,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 () {

umap/static/umap/js/umap.permissions.js

@@ -116,7 +116,7 @@ U.MapPermissions = L.Class.extend({
         L._('Advanced actions')
       )
       const advancedButtons = L.DomUtil.create('div', 'button-bar', advancedActions)
-      const download = L.DomUtil.createButton(
+      L.DomUtil.createButton(
         'button',
         advancedButtons,
         L._('Attach the map to my account'),

umap/static/umap/js/umap.popup.js

@@ -265,7 +265,7 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
     const props = this.feature.properties
     const container = L.DomUtil.add('div')
     const title = L.DomUtil.add('h3', 'popup-title', container)
-    const color = this.feature.getDynamicOption('color')
+    const color = this.feature.getPreviewColor()
     title.style.backgroundColor = color
     const iconUrl = this.feature.getDynamicOption('iconUrl')
     const icon = U.Icon.makeIconElement(iconUrl, title)