umap-project 3.1.2__py3-none-any.whl → 3.3.0__py3-none-any.whl

umap/static/umap/js/modules/rendering/icon.js

@@ -3,6 +3,7 @@ import {
   DomEvent,
   DomUtil,
   Icon,
+  Point,
 } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { SCHEMA } from '../schema.js'
 import * as Utils from '../utils.js'
@@ -11,6 +12,8 @@ export function getClass(name) {
   switch (name) {
     case 'Circle':
       return Circle
+    case 'LargeCircle':
+      return LargeCircle
     case 'Ball':
       return Ball
     case 'Drop':
@@ -25,13 +28,13 @@ export function getClass(name) {
 export const RECENT = []
 
 const BaseIcon = DivIcon.extend({
+  default_options: {
+    iconSize: null, // Made in css
+    iconUrl: SCHEMA.iconUrl.default,
+    feature: null,
+  },
   initialize: function (options) {
-    const default_options = {
-      iconSize: null, // Made in css
-      iconUrl: SCHEMA.iconUrl.default,
-      feature: null,
-    }
-    options = L.Util.extend({}, default_options, options)
+    options = { ...this.default_options, ...options }
     Icon.prototype.initialize.call(this, options)
     this.feature = this.options.feature
     if (this.feature?.isReadOnly()) {
@@ -66,6 +69,10 @@ const BaseIcon = DivIcon.extend({
     return color
   },
 
+  _getSize: function () {
+    return this.feature?.getOption('iconSize') || SCHEMA.iconSize.default
+  },
+
   _getOpacity: function () {
     if (this.feature) return this.feature.getOption('iconOpacity')
     return SCHEMA.iconOpacity.default
@@ -77,18 +84,33 @@ const BaseIcon = DivIcon.extend({
     if (this.feature.isActive()) this.options.className += ' umap-icon-active'
     DivIcon.prototype._setIconStyles.call(this, img, name)
   },
+
+  createIcon: function () {
+    const [root, elements] = Utils.loadTemplateWithRefs(this.getTemplate())
+    this.root = root
+    this.elements = elements
+    this.root.dataset.feature = this.feature?.id
+    if (this.elements.container) {
+      const src = this._getIconUrl('icon')
+      if (src) {
+        this.elements.icon = makeElement(src, this.elements.container)
+      }
+    }
+    this._setIconStyles(this.root, 'icon')
+    return this.root
+  },
 })
 
 const DefaultIcon = BaseIcon.extend({
   default_options: {
-    iconAnchor: new L.Point(16, 40),
-    popupAnchor: new L.Point(0, -40),
-    tooltipAnchor: new L.Point(16, -24),
+    iconAnchor: new Point(16, 40),
+    popupAnchor: new Point(0, -40),
+    tooltipAnchor: new Point(16, -24),
     className: 'umap-div-icon',
   },
 
   initialize: function (options) {
-    options = L.Util.extend({}, this.default_options, options)
+    options = { ...this.default_options, ...options }
     BaseIcon.prototype.initialize.call(this, options)
   },
 
@@ -108,92 +130,113 @@ const DefaultIcon = BaseIcon.extend({
     setContrast(this.elements.icon, this.elements.container, src, bgcolor)
   },
 
-  createIcon: function () {
-    this.elements = {}
-    this.elements.main = DomUtil.create('div')
-    this.elements.container = DomUtil.create(
-      'div',
-      'icon_container',
-      this.elements.main
-    )
-    this.elements.main.dataset.feature = this.feature?.id
-    this.elements.arrow = DomUtil.create('div', 'icon_arrow', this.elements.main)
-    const src = this._getIconUrl('icon')
-    if (src) {
-      this.elements.icon = makeElement(src, this.elements.container)
-    }
-    this._setIconStyles(this.elements.main, 'icon')
-    return this.elements.main
+  getTemplate: () => {
+    return `
+      <div>
+        <div class="icon-container" data-ref=container></div>
+        <div class="icon-arrow" data-ref=arrow></div>
+      </div>
+    `
   },
 })
 
 const Circle = BaseIcon.extend({
   initialize: function (options) {
     const default_options = {
-      popupAnchor: new L.Point(0, -6),
-      tooltipAnchor: new L.Point(6, 0),
+      iconSize: new Point(12, 12),
+      popupAnchor: new Point(0, -6),
+      tooltipAnchor: new Point(6, 0),
       className: 'umap-circle-icon',
     }
-    options = L.Util.extend({}, default_options, options)
+    options = { ...default_options, ...(options || {}) }
     BaseIcon.prototype.initialize.call(this, options)
   },
 
   _setIconStyles: function (img, name) {
     BaseIcon.prototype._setIconStyles.call(this, img, name)
-    this.elements.main.style.backgroundColor = this._getColor()
-    this.elements.main.style.opacity = this._getOpacity()
+    this.root.style.backgroundColor = this._getColor()
+    this.root.style.opacity = this._getOpacity()
   },
 
-  createIcon: function () {
-    this.elements = {}
-    this.elements.main = DomUtil.create('div')
-    this.elements.main.innerHTML = '&nbsp;'
-    this._setIconStyles(this.elements.main, 'icon')
-    this.elements.main.dataset.feature = this.feature?.id
-    return this.elements.main
+  getTemplate: () => {
+    return '<div>&nbsp;</div>'
+  },
+})
+
+const LargeCircle = BaseIcon.extend({
+  default_options: {
+    className: 'umap-large-circle-icon',
+  },
+  initialize: function (options) {
+    BaseIcon.prototype.initialize.call(this, options)
+    const size = this._getSize()
+    this.options.popupAnchor = new Point(0, (size / 2) * -1)
+    this.options.tooltipAnchor = new Point(size / 2, 0)
+    this.options.iconAnchor = new Point(size / 2, size / 2)
+  },
+
+  _setIconStyles: function (img, name) {
+    BaseIcon.prototype._setIconStyles.call(this, img, name)
+    this.root.style.opacity = this._getOpacity()
+    this.root.style.borderColor = this._getColor()
+    this.root.style.width = `${this._getSize()}px`
+    this.root.style.height = `${this._getSize()}px`
+  },
+
+  getTemplate: () => {
+    return '<div data-ref=container></div>'
   },
 })
 
 const Raw = DefaultIcon.extend({
   default_options: {
-    iconSize: new L.Point(48, 48),
-    popupAnchor: new L.Point(0, 0),
-    tooltipAnchor: new L.Point(0, 0),
     className: 'umap-raw-icon',
   },
+  initialize: function (options) {
+    DefaultIcon.prototype.initialize.call(this, options)
+    const size = this._getSize()
+    this.options.popupAnchor = new Point(0, (size / 2) * -1)
+    this.options.tooltipAnchor = new Point(size / 2, 0)
+    this.options.iconAnchor = new Point(size / 2, size / 2)
+  },
+
+  _setIconStyles: function (img, name) {
+    BaseIcon.prototype._setIconStyles.call(this, img, name)
+    this.root.style.width = `${this._getSize()}px`
+    this.root.style.height = `${this._getSize()}px`
+  },
 
   _getColor: () => 'transparent',
+
+  getTemplate: () => {
+    return '<div data-ref=container></div>'
+  },
 })
 
 const Drop = DefaultIcon.extend({
   default_options: {
-    iconAnchor: new L.Point(16, 42),
-    popupAnchor: new L.Point(0, -42),
-    tooltipAnchor: new L.Point(16, -24),
+    iconAnchor: new Point(16, 42),
+    popupAnchor: new Point(0, -42),
+    tooltipAnchor: new Point(16, -24),
     className: 'umap-drop-icon',
   },
 })
 
 const Ball = DefaultIcon.extend({
   default_options: {
-    iconAnchor: new L.Point(8, 30),
-    popupAnchor: new L.Point(0, -28),
-    tooltipAnchor: new L.Point(8, -23),
+    iconAnchor: new Point(8, 30),
+    popupAnchor: new Point(0, -28),
+    tooltipAnchor: new Point(8, -23),
     className: 'umap-ball-icon',
   },
 
-  createIcon: function () {
-    this.elements = {}
-    this.elements.main = DomUtil.create('div')
-    this.elements.container = DomUtil.create(
-      'div',
-      'icon_container',
-      this.elements.main
-    )
-    this.elements.main.dataset.feature = this.feature?.id
-    this.elements.arrow = DomUtil.create('div', 'icon_arrow', this.elements.main)
-    this._setIconStyles(this.elements.main, 'icon')
-    return this.elements.main
+  getTemplate: () => {
+    return `
+      <div>
+        <div class="icon-container" data-ref=ball></div>
+        <div class="icon-arrow" data-ref=arrow></div>
+      </div>
+    `
   },
 
   _setIconStyles: function (img, name) {
@@ -207,38 +250,26 @@ const Ball = DefaultIcon.extend({
     } else {
       background = `radial-gradient(circle at 6px 38% , white -4px, ${color} 8px) repeat scroll 0 0 transparent`
     }
-    this.elements.container.style.background = background
-    this.elements.container.style.opacity = this._getOpacity()
+    this.elements.ball.style.background = background
+    this.elements.ball.style.opacity = this._getOpacity()
   },
 })
 
 export const Cluster = DivIcon.extend({
   options: {
     iconSize: [40, 40],
-  },
-
-  initialize: function (datalayer, cluster) {
-    this.datalayer = datalayer
-    this.cluster = cluster
+    className: 'umap-cluster-icon',
   },
 
   createIcon: function () {
-    const container = DomUtil.create('div', 'leaflet-marker-icon marker-cluster')
-    const div = DomUtil.create('div', '', container)
-    const span = DomUtil.create('span', '', div)
-    const backgroundColor = this.datalayer.getColor()
-    span.textContent = this.cluster.getChildCount()
-    div.style.backgroundColor = backgroundColor
-    return container
-  },
-
-  computeTextColor: function (el) {
-    let color
-    const backgroundColor = this.datalayer.getColor()
-    if (this.datalayer.properties.cluster?.textColor) {
-      color = this.datalayer.properties.cluster.textColor
-    }
-    return color || DomUtil.TextColorFromBackgroundColor(el, backgroundColor)
+    const template = '<div><span data-ref=counter></span></div>'
+    const [root, { counter }] = Utils.loadTemplateWithRefs(template)
+    this.root = root
+    this.counter = counter
+    this.counter.textContent = this.options.getCounter()
+    this.root.style.backgroundColor = this.options.color
+    this._setIconStyles(this.root, 'icon')
+    return this.root
   },
 })
 
@@ -249,11 +280,9 @@ export function isImg(src) {
 export function makeElement(src, parent) {
   let icon
   if (isImg(src)) {
-    icon = DomUtil.create('img')
-    icon.src = src
+    icon = Utils.loadTemplate(`<img loading="lazy" src="${src}">`)
   } else {
-    icon = DomUtil.create('span')
-    icon.textContent = src
+    icon = Utils.loadTemplate(`<span>${src}</span>`)
   }
   parent.appendChild(icon)
   return icon
@@ -273,7 +302,7 @@ export function setContrast(icon, parent, src, bgcolor) {
   if (DomUtil.contrastedColor(parent, bgcolor)) {
     // Decide whether to switch svg to white or not, but do it
     // only for internal SVG, as invert could do weird things
-    if (Utils.isPath(src) && src.endsWith('.svg') && src !== SCHEMA.iconUrl.default) {
+    if (src.endsWith('.svg') && src !== SCHEMA.iconUrl.default) {
       // Must be called after icon container is added to the DOM
       // An image
       icon.style.filter = 'invert(1)'

umap/static/umap/js/modules/rendering/layers/classified.js

@@ -67,7 +67,7 @@ const ClassifiedMixin = {
 
   getValues: function () {
     const values = []
-    this.datalayer.eachFeature((feature) => {
+    this.datalayer.features.forEach((feature) => {
       const value = this._getValue(feature)
       if (value !== undefined) values.push(value)
     })
@@ -198,7 +198,7 @@ export const Choropleth = FeatureGroup.extend({
         'properties.choropleth.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.allProperties(),
+          selectOptions: this.datalayer.fieldKeys,
           label: translate('Choropleth property value'),
         },
       ],
@@ -307,7 +307,7 @@ export const Circles = FeatureGroup.extend({
         'properties.circles.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.allProperties(),
+          selectOptions: this.datalayer.fieldKeys,
           label: translate('Property name to compute circles'),
         },
       ],
@@ -384,8 +384,7 @@ export const Categorized = FeatureGroup.extend({
 
   _getValue: function (feature) {
     const key =
-      this.datalayer.properties.categorized.property ||
-      this.datalayer.allProperties()[0]
+      this.datalayer.properties.categorized.property || this.datalayer.fieldKeys[0]
     return feature.properties[key]
   },
 
@@ -438,7 +437,7 @@ export const Categorized = FeatureGroup.extend({
         'properties.categorized.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.allProperties(),
+          selectOptions: this.datalayer.fieldKeys,
           label: translate('Category property'),
         },
       ],
@@ -447,7 +446,7 @@ export const Categorized = FeatureGroup.extend({
         {
           handler: 'Select',
           label: translate('Color palette'),
-          selectOptions: this.getColorSchemes(this._classes),
+          getOptions: () => this.getColorSchemes(this._classes),
         },
       ],
       [
@@ -481,6 +480,8 @@ export const Categorized = FeatureGroup.extend({
       if (builder) builder.helpers['properties.categorized.mode'].fetch()
     }
     this.compute()
+    // Rebuild list of color palettes when aggregation property changes.
+    builder?.helpers['properties.categorized.brewer']?.fetch()
     // If user changes the mode
     // then update the categories input value
     if (field === 'properties.categorized.mode') {

umap/static/umap/js/modules/rendering/layers/cluster.js

@@ -1,24 +1,100 @@
-import { Evented } from '../../../../vendors/leaflet/leaflet-src.esm.js'
-// WARNING must be loaded dynamically, or at least after leaflet.markercluster
-// Uses global L.MarkerCluster and L.MarkerClusterGroup, not exposed as ESM
+import {
+  FeatureGroup,
+  LayerGroup,
+  Point,
+  Marker,
+  Rectangle,
+  Polyline,
+  DomUtil,
+  latLngBounds,
+} from '../../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../../i18n.js'
 import * as Utils from '../../utils.js'
 import { Cluster as ClusterIcon } from '../icon.js'
 import { LayerMixin } from './base.js'
 
-const MarkerCluster = L.MarkerCluster.extend({
-  // Custom class so we can call computeTextColor
-  // when element is already on the DOM.
-
+const MarkerCluster = Marker.extend({
   _initIcon: function () {
-    L.MarkerCluster.prototype._initIcon.call(this)
-    const div = this._icon.querySelector('div')
+    Marker.prototype._initIcon.call(this)
+    const counter = this._icon.querySelector('span')
     // Compute text color only when icon is added to the DOM.
-    div.style.color = this._iconObj.computeTextColor(div)
+    const bgColor = this.options.icon.options.color
+    const textColor = this.options.icon.options.textColor
+    counter.style.color =
+      textColor || DomUtil.TextColorFromBackgroundColor(counter, bgColor)
+  },
+
+  computeCoverage() {
+    if (this._layers.length < 2) return
+    if (!this._coverage) {
+      const latlngs = this._layers.map((layer) => layer._latlng)
+      const bounds = latLngBounds(latlngs)
+      this._coverage = new Rectangle(latlngs, {
+        color: this.options.icon.options.color,
+        stroke: false,
+      })
+      this._latlng = bounds.getCenter()
+    }
+  },
+
+  async zoomToCoverage() {
+    let resolve = undefined
+    const promise = new Promise((r) => {
+      resolve = r
+    })
+    if (this._map && this._coverage) {
+      this._map.once('moveend', () => resolve())
+      this._map.fitBounds(this._coverage.getBounds())
+    }
+    return promise
+  },
+
+  _spiderfyLatLng: function (center, index) {
+    const step = 20
+    const maxRadius = 150
+    const zoom = this._map.getZoom()
+    const angle = (index * step * Math.PI) / 180
+    const progress = index / this._layers.length
+    const radius = maxRadius * (1 - progress) ** 0.4
+    const x = radius * Math.cos(angle)
+    const y = radius * Math.sin(angle)
+    const point = this._map.project([center.lat, center.lng], zoom)
+    const latlng = this._map.unproject(new Point(point.x + x, point.y + y), zoom)
+    return latlng
+  },
+
+  spiderfy() {
+    if (!this._map) return
+    const crs = this._map.options.crs
+    if (this._spider && this._map.hasLayer(this._spider)) this.unspiderfy()
+    this._spider = new LayerGroup()
+    let i = 1
+    const center = this.getLatLng()
+    for (const layer of this._layers) {
+      const latlng = this._spiderfyLatLng(center, i++)
+      layer._originalLatLng = layer._latlng
+      layer.setLatLng(latlng)
+      this._spider.addLayer(layer)
+      const line = new Polyline([center, latlng], { color: 'black', weight: 1 })
+      this._spider.addLayer(line)
+    }
+    this._map.addLayer(this._spider)
+    this._icon.hidden = true
+    this._map.once('click zoomstart', this.unspiderfy, this)
+    this.once('remove', this.unspiderfy, this)
+  },
+
+  unspiderfy() {
+    if (this._icon) this._icon.hidden = false
+    if (this._spider) this._spider.remove()
+    for (const layer of this._layers) {
+      if (layer._originalLatLng) layer.setLatLng(layer._originalLatLng)
+      delete layer._originalLatLng
+    }
   },
 })
 
-export const Cluster = L.MarkerClusterGroup.extend({
+export const Cluster = FeatureGroup.extend({
   statics: {
     NAME: translate('Clustered'),
     TYPE: 'Cluster',
@@ -27,58 +103,132 @@ export const Cluster = L.MarkerClusterGroup.extend({
 
   initialize: function (datalayer) {
     this.datalayer = datalayer
+    this._bucket = []
     if (!Utils.isObject(this.datalayer.properties.cluster)) {
       this.datalayer.properties.cluster = {}
     }
-    const options = {
-      polygonOptions: {
-        color: this.datalayer.getColor(),
-      },
-      iconCreateFunction: (cluster) => new ClusterIcon(datalayer, cluster),
+    FeatureGroup.prototype.initialize.call(this)
+    LayerMixin.onInit.call(this, this.datalayer._leafletMap)
+  },
+
+  dataChanged: function () {
+    this.redraw()
+  },
+
+  removeClusters() {
+    this.hideCoverage()
+    if (this._map) {
+      for (const cluster of this._clusters) {
+        const layer = cluster._layers.length === 1 ? cluster._layers[0] : cluster
+        this._map.removeLayer(layer)
+      }
     }
-    if (this.datalayer.properties.cluster?.radius) {
-      options.maxClusterRadius = this.datalayer.properties.cluster.radius
+  },
+
+  addClusters() {
+    if (this._map) {
+      for (const cluster of this._clusters) {
+        const layer = cluster._layers.length === 1 ? cluster._layers[0] : cluster
+        this._map.addLayer(layer)
+      }
     }
-    L.MarkerClusterGroup.prototype.initialize.call(this, options)
-    LayerMixin.onInit.call(this, this.datalayer._leafletMap)
-    this._markerCluster = MarkerCluster
-    this._layers = []
   },
 
-  onAdd: function (map) {
-    LayerMixin.onAdd.call(this, map)
-    return L.MarkerClusterGroup.prototype.onAdd.call(this, map)
+  redraw: function () {
+    this.removeClusters()
+    this.compute()
+    this.addClusters()
   },
 
-  onRemove: function (map) {
-    // In some situation, the onRemove is called before the layer is really
-    // added to the map: basically when combining a defaultView=data + max/minZoom
-    // and loading the map at a zoom outside of that zoom range.
-    // FIXME: move this upstream (_unbindEvents should accept a map parameter
-    // instead of relying on this._map)
-    this._map = map
-    LayerMixin.onRemove.call(this, map)
-    return L.MarkerClusterGroup.prototype.onRemove.call(this, map)
+  compute() {
+    const radius = this.datalayer.properties.cluster?.radius || 80
+    this._clusters = []
+    const map = this.datalayer._umap._leafletMap
+    const CRS = map.options.crs
+    for (const layer of this._bucket) {
+      layer._xy = CRS.latLngToPoint(layer._latlng, map.getZoom())
+      let cluster = null
+      for (const candidate of this._clusters) {
+        if (candidate._xy.distanceTo(layer._xy) <= radius) {
+          cluster = candidate
+          break
+        }
+      }
+      if (!cluster) {
+        const icon = new ClusterIcon({
+          color: this.datalayer.getColor(),
+          textColor: this.datalayer.properties.cluster?.textColor,
+          getCounter: () => cluster._layers.length,
+        })
+        cluster = new MarkerCluster(layer._latlng, { icon })
+        cluster.addEventParent(this)
+        cluster._xy ??= layer._xy
+        cluster._layers = []
+        this._clusters.push(cluster)
+      }
+      cluster._layers.push(layer)
+      layer._cluster = cluster
+    }
+    for (const cluster of this._clusters) {
+      cluster.computeCoverage()
+    }
   },
 
   addLayer: function (layer) {
-    this._layers.push(layer)
-    try {
-      return L.MarkerClusterGroup.prototype.addLayer.call(this, layer)
-    } catch (error) {
-      console.debug(error)
-      // Certainly a race condition when loading a clustered layer
-      // while zooming (this for example can happen at load, when the
-      // initial zoom is changed by uMap).
-      // FIXME: remove when this is merged:
-      // https://github.com/Leaflet/Leaflet.markercluster/pull/1048/files
-      return this
+    if (!layer.getLatLng) return FeatureGroup.prototype.addLayer.call(this, layer)
+    // Do not add yet the layer to the map
+    // wait for datachanged event, so we can compute breaks only once
+    this._bucket.push(layer)
+    return this
+  },
+
+  onAdd: function (leafletMap) {
+    this.on('click', this.onClick)
+    this.on('mouseover', this.onMouseOver)
+    this.on('mouseout', this.onMouseOut)
+    this.compute()
+    LayerMixin.onAdd.call(this, leafletMap)
+    leafletMap.on('zoomend', this.redraw, this)
+    this.addClusters()
+    return FeatureGroup.prototype.onAdd.call(this, leafletMap)
+  },
+
+  onRemove: function (leafletMap) {
+    leafletMap.off('zoomend', this.redraw, this)
+    this.off('click', this.onClick)
+    this.off('mouseover', this.onMouseOver)
+    this.off('mouseout', this.onMouseOut)
+    LayerMixin.onRemove.call(this, leafletMap)
+    this.removeClusters()
+    return FeatureGroup.prototype.onRemove.call(this, leafletMap)
+  },
+
+  showCoverage(cluster) {
+    if (cluster._coverage) {
+      this._shownCoverage = cluster._coverage
+      this._map.addLayer(this._shownCoverage)
     }
   },
 
-  removeLayer: function (layer) {
-    this._layers.splice(this._layers.indexOf(layer), 1)
-    return L.MarkerClusterGroup.prototype.removeLayer.call(this, layer)
+  hideCoverage() {
+    if (this._shownCoverage) this._map.removeLayer(this._shownCoverage)
+  },
+
+  onMouseOver(event) {
+    event.layer?.computeCoverage?.()
+    this.showCoverage(event.layer)
+  },
+
+  onMouseOut(event) {
+    this.hideCoverage()
+  },
+
+  onClick(event) {
+    if (this._map.getZoom() === this._map.getMaxZoom()) {
+      event.layer.spiderfy?.()
+    } else {
+      event.layer.zoomToCoverage?.()
+    }
   },
 
   getEditableProperties: () => [
@@ -101,20 +251,6 @@ export const Cluster = L.MarkerClusterGroup.extend({
   ],
 
   onEdit: function (field, builder) {
-    if (field === 'properties.cluster.radius') {
-      // No way to reset radius of an already instanciated MarkerClusterGroup...
-      this.datalayer.resetLayer(true)
-      return
-    }
-    if (field === 'properties.color') {
-      this.options.polygonOptions.color = this.datalayer.getColor()
-    }
-  },
-
-  _moveChild: (layer, from, to) => {
-    // Extend parent method, so to remove remove/addLayer,
-    // to let our own dragend event listener be called
-    // cf https://github.com/umap-project/umap/issues/2749
-    layer._latlng = to
+    if (field === 'properties.cluster.radius') this.redraw()
   },
 })