umap-project 3.2.0__py3-none-any.whl → 3.3.1__py3-none-any.whl

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,65 +103,159 @@ export const Cluster = L.MarkerClusterGroup.extend({
 
   initialize: function (datalayer) {
     this.datalayer = datalayer
+    this._bucket = []
+    this._group = new LayerGroup()
     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()
+    for (const layer of this._bucket) {
+      delete layer._cluster
     }
-    if (this.datalayer.properties.cluster?.radius) {
-      options.maxClusterRadius = this.datalayer.properties.cluster.radius
+    if (this._map) {
+      this._group.clearLayers()
+    }
+  },
+
+  addClusters() {
+    if (this._map) {
+      for (const cluster of this._clusters) {
+        const layer = cluster._layers.length === 1 ? cluster._layers[0] : cluster
+        this._group.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
+    this._bounds = map.getBounds().pad(0.1)
+    const CRS = map.options.crs
+    for (const layer of this._bucket) {
+      if (layer._cluster) continue
+      if (!this._bounds.contains(layer._latlng)) continue
+      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('moveend', this.onMoveEnd, this)
+    leafletMap.on('zoomend', this.onZoomEnd, this)
+    this.addClusters()
+    leafletMap.addLayer(this._group)
+    return FeatureGroup.prototype.onAdd.call(this, leafletMap)
+  },
+
+  onRemove: function (leafletMap) {
+    leafletMap.off('zoomend', this.onZoomEnd, this)
+    leafletMap.off('moveend', this.onMoveEnd, this)
+    this.off('click', this.onClick)
+    this.off('mouseover', this.onMouseOver)
+    this.off('mouseout', this.onMouseOut)
+    LayerMixin.onRemove.call(this, leafletMap)
+    this.removeClusters()
+    leafletMap.removeLayer(this._group)
+    return FeatureGroup.prototype.onRemove.call(this, leafletMap)
+  },
+
+  onZoomEnd: function () {
+    this.removeClusters()
+  },
+
+  onMoveEnd: function () {
+    this.compute()
+    this.addClusters()
+  },
+
+  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: () => [
     [
       'properties.cluster.radius',
       {
-        handler: 'BlurIntInput',
+        handler: 'Range',
+        min: 40,
+        max: 200,
+        step: 10,
         placeholder: translate('Clustering radius'),
         helpText: translate('Override clustering radius (default 80)'),
       },
@@ -101,20 +271,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()
   },
 })

umap/static/umap/js/modules/rendering/map.js

@@ -22,6 +22,8 @@ import {
   PermanentCreditsControl,
   TileLayerChooser,
   LoadTemplateControl,
+  PrintControl,
+  SearchControl,
 } from './controls.js'
 import * as Utils from '../utils.js'
 import * as Icon from './icon.js'
@@ -45,6 +47,7 @@ const ControlsMixin = {
     'locate',
     'measure',
     'editinosm',
+    'print',
     'tilelayers',
   ],
 
@@ -84,8 +87,9 @@ const ControlsMixin = {
         true: translate('Exit Fullscreen'),
       },
     })
-    this._controls.search = new U.SearchControl()
+    this._controls.search = new SearchControl(this._umap)
     this._controls.embed = new EmbedControl(this._umap)
+    this._controls.print = new PrintControl(this._umap)
     this._controls.tilelayersChooser = new TileLayerChooser(this._umap)
     this._controls.editinosm = new Control.EditInOSM({
       position: 'topleft',

umap/static/umap/js/modules/rendering/template.js

@@ -1,4 +1,8 @@
-import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import {
+  DomEvent,
+  DomUtil,
+  CircleMarker,
+} from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { getLocale, translate } from '../i18n.js'
 import { Request } from '../request.js'
 import * as Utils from '../utils.js'
@@ -22,6 +26,9 @@ export default async function loadTemplate(name, feature, container) {
     case 'Wikipedia':
       klass = Wikipedia
       break
+    case 'Route':
+      klass = Route
+      break
   }
   const content = new klass()
   return await content.render(feature, container)
@@ -282,3 +289,66 @@ class Wikipedia extends PopupTemplate {
     return body
   }
 }
+
+class Route extends TitleMixin(PopupTemplate) {
+  async renderBody(feature) {
+    if (feature.type !== 'LineString' || feature.isMulti()) {
+      return super.renderBody(feature)
+    }
+    let prev
+    let dist = 0
+    const data = []
+    const latlngs = feature.ui.getLatLngs()
+    const map = feature._umap._leafletMap
+    const properties = feature.extendedProperties()
+    for (const latlng of latlngs) {
+      if (!latlng.alt) {
+        continue
+      }
+      if (prev) {
+        dist = map.distance(latlng, prev)
+      }
+      data.push([latlng.alt, dist])
+      prev = latlng
+    }
+    const [root, { altitude, chart }] = Utils.loadTemplateWithRefs(`
+      <div>
+        <p>
+          ${translate('Distance:')} ${properties.measure} •
+          ${translate('Gain:')} ${properties.gain} m ↗ •
+          ${translate('Loss:')} ${properties.loss} m ↘ •
+          ${translate('Altitude:')} <span data-ref="altitude">—</span> m
+        </p>
+        <object width="100%"
+          data="${feature._umap.getStaticPathFor('../vendors/simple-elevation-chart/elevation.svg')}"
+          data-elevation="${JSON.stringify(data)}"
+          data-ref="chart"
+          type="image/svg+xml">
+      </div>
+    `)
+    let marker
+    function removeMarker() {
+      if (marker) {
+        marker.remove()
+      }
+    }
+    chart.addEventListener('mouseout', removeMarker)
+    map.on('popupclose', removeMarker)
+    chart.addEventListener('chart:over', (event) => {
+      const dataset = event.detail.element.dataset
+      if (dataset.ele) {
+        altitude.textContent = dataset.ele
+      }
+      removeMarker()
+      const latlng = latlngs[dataset.index]
+      if (!latlng) return
+      marker = new CircleMarker(latlng, {
+        radius: 8,
+        fillColor: 'white',
+        fillOpacity: 1,
+        color: 'orange',
+      }).addTo(map)
+    })
+    return root
+  }
+}

umap/static/umap/js/modules/rendering/ui.js

@@ -3,6 +3,7 @@ import {
   CircleMarker as BaseCircleMarker,
   DomEvent,
   DomUtil,
+  GeoJSON,
   LatLng,
   LatLngBounds,
   LineUtil,
@@ -45,26 +46,29 @@ const FeatureMixin = {
     this.on('contextmenu editable:vertex:contextmenu', this.onContextMenu)
     this.on('click', this.onClick)
     this.on('editable:edited', this.onCommit)
+    this.on('mouseover', this.onMouseOver)
+  },
+
+  onMouseOver: function () {
+    if (this._map._umap.editEnabled && !this._map._umap.editedFeature) {
+      this._map._umap.tooltip.open({
+        content: translate('Right-click to edit'),
+        anchor: this,
+      })
+    }
   },
 
   onClick: function (event) {
     if (this._map.measureTools?.enabled()) return
     this._popupHandlersAdded = true // Prevent leaflet from managing event
-    if (!this._map._umap.editEnabled) {
-      this.feature.view(event)
-    } else if (!this.feature.isReadOnly()) {
-      if (event.originalEvent.shiftKey) {
-        if (event.originalEvent.ctrlKey || event.originalEvent.metaKey) {
-          this.feature.datalayer.edit(event)
-        } else {
-          this.feature.toggleEditing(event)
-        }
-      } else if (!this._map.editTools?.drawing()) {
-        this._map._umap.editContextmenu.open(
-          event.originalEvent,
-          this.feature.getInplaceEditMenu(event)
-        )
+    if (event.originalEvent.shiftKey) {
+      if (event.originalEvent.ctrlKey || event.originalEvent.metaKey) {
+        this.feature.datalayer.edit(event)
+      } else if (!this.feature.isReadOnly()) {
+        this.feature.toggleEditing(event)
       }
+    } else if (!this._map.editTools?.drawing()) {
+      this.feature.view(event)
     }
     DomEvent.stop(event)
   },
@@ -91,8 +95,8 @@ const FeatureMixin = {
   onContextMenu: function (event) {
     DomEvent.stop(event)
     const items = this.feature
-      .getContextMenuItems(event)
-      .concat(this._map._umap.getSharedContextMenuItems(event))
+      .getContextMenu(event)
+      .concat(this._map._umap.getSharedContextMenu(event))
     this._map._umap.contextmenu.open(event.originalEvent, items)
   },
 
@@ -110,6 +114,10 @@ const PointMixin = {
     FeatureMixin.addInteractions.call(this)
     this.on('dragend', (event) => {
       this.feature.edit(event)
+      if (this._cluster) {
+        delete this._originalLatLng
+        this.feature.datalayer.dataChanged()
+      }
     })
     if (!this.feature.isReadOnly()) this.on('mouseover', this._enableDragging)
     this.on('mouseout', this._onMouseOut)
@@ -249,17 +257,22 @@ export const LeafletMarker = Marker.extend({
 })
 
 const PathMixin = {
-  _onMouseOver: function () {
+  maxVertex: 100,
+  onMouseOver: function () {
     if (this._map.measureTools?.enabled()) {
       this._map._umap.tooltip.open({ content: this.getMeasure(), anchor: this })
-    } else if (this._map._umap.editEnabled && !this._map._umap.editedFeature) {
-      this._map._umap.tooltip.open({
-        content: translate('Click to edit'),
-        anchor: this,
-      })
+    } else {
+      FeatureMixin.onMouseOver.call(this)
     }
   },
 
+  shouldAllowGeometryEdit: function () {
+    const pointsCount = this._parts.reduce((acc, part) => acc + part.length, 0)
+    return (
+      pointsCount < this.maxVertex || this._map.getZoom() === this._map.getMaxZoom()
+    )
+  },
+
   makeGeometryEditable: function () {
     // Feature has been removed since then?
     if (!this._map) return
@@ -268,20 +281,18 @@ const PathMixin = {
       return
     }
     this._map.once('moveend', this.makeGeometryEditable, this)
-    const pointsCount = this._parts.reduce((acc, part) => acc + part.length, 0)
-    if (pointsCount > 100 && this._map.getZoom() < this._map.getMaxZoom()) {
+    if (this.shouldAllowGeometryEdit()) {
+      this.enableEdit()
+    } else {
       this._map._umap.tooltip.open({
         content: L._('Please zoom in to edit the geometry'),
       })
       this.disableEdit()
-    } else {
-      this.enableEdit()
     }
   },
 
   addInteractions: function () {
     FeatureMixin.addInteractions.call(this)
-    this.on('mouseover', this._onMouseOver)
     this.on('drag editable:drag', this._onDrag)
     this.on('popupopen', this.highlightPath)
     this.on('popupclose', this._redraw)
@@ -293,6 +304,7 @@ const PathMixin = {
   },
 
   highlightPath: function () {
+    this.feature.activate()
     this.parentClass.prototype.setStyle.call(this, {
       fillOpacity: Math.sqrt(this.feature.getDynamicOption('fillOpacity', 1.0)),
       opacity: 1.0,
@@ -336,17 +348,11 @@ const PathMixin = {
   },
 
   _redraw: function () {
+    this.feature.deactivate()
     this.setStyle()
     this.resetTooltip()
   },
 
-  onVertexRawClick: function (event) {
-    this._map._umap.editContextmenu.open(
-      event.originalEvent,
-      this.feature.getInplaceEditVertexMenu(event)
-    )
-  },
-
   isolateShape: function (atLatLng) {
     if (!this.feature.isMulti()) return
     const shape = this.enableEdit().deleteShapeAt(atLatLng)
@@ -457,6 +463,67 @@ export const LeafletPolyline = Polyline.extend({
   },
 })
 
+export const RouteEditor = L.Editable.PolylineEditor.extend({
+  options: {
+    skipMiddleMarkers: true,
+    draggable: false,
+  },
+
+  getLatLngs: function () {
+    return this.feature._route
+  },
+})
+
+export const LeafletRoute = LeafletPolyline.extend({
+  initialize: function (feature, latlngs) {
+    this._route = GeoJSON.coordsToLatLngs(
+      feature.properties._umap_options.route?.coordinates
+    )
+    FeatureMixin.initialize.call(this, feature, latlngs)
+    delete this.dragging
+  },
+
+  addInteractions: function () {
+    PathMixin.addInteractions.call(this)
+    this.on('editable:drawing:clicked', this.onDrawingClick)
+    this.on('editable:vertex:dragend editable:vertex:deleted', this.onDrawingMoved)
+  },
+
+  getEditorClass: (tools) => {
+    return RouteEditor
+  },
+
+  getClass: () => LeafletRoute,
+
+  syncRoute() {
+    this.feature.properties._umap_options.route.coordinates = GeoJSON.latLngsToCoords(
+      this._route
+    )
+  },
+
+  onDrawingMoved: function (event) {
+    this.syncRoute()
+    if (this._route.length >= 2) {
+      this.feature.computeRoute()
+    }
+  },
+
+  onDrawingClick: function (event) {
+    this._route.push(event.latlng)
+    this.syncRoute()
+    if (this._route.length >= 2) {
+      this.feature.computeRoute()
+    }
+  },
+
+  shouldAllowGeometryEdit: function () {
+    return (
+      this._route.length < this.maxVertex ||
+      this._map.getZoom() === this._map.getMaxZoom()
+    )
+  },
+})
+
 export const LeafletPolygon = Polygon.extend({
   parentClass: Polygon,
   includes: [FeatureMixin, PathMixin],