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

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',
@@ -335,7 +339,7 @@ export const LeafletMap = BaseMap.extend({
         const datalayer = this._umap.datalayers.visible()[0]
         let feature
         if (datalayer) {
-          const feature = datalayer.getFeatureByIndex(-1)
+          const feature = datalayer.features.last()
           if (feature) {
             feature.zoomTo({ callback: this.options.noControl ? null : feature.view })
             return

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)
   },
 
@@ -123,6 +127,7 @@ const PointMixin = {
   },
 
   _enableDragging: function () {
+    if (this._cluster) return
     // TODO: start dragging after 1 second on mouse down
     if (this._map._umap.editEnabled) {
       if (!this.editEnabled()) this.enableEdit()
@@ -238,20 +243,33 @@ export const LeafletMarker = Marker.extend({
     this._redraw()
     this._resetZIndex()
   },
+
+  _resetZIndex() {
+    // Override Leaflet default behaviour, which set the zIndex
+    // according to feature's y coordinate, and group features
+    // zIndex by their datalayer order
+    this._zIndex = this.feature.datalayer.getDOMOrder()
+    this._updateZIndex(0)
+  },
 })
 
 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
@@ -260,20 +278,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)
@@ -285,6 +301,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,
@@ -296,6 +313,11 @@ const PathMixin = {
     if (this._tooltip) this._tooltip.setLatLng(this.getCenter())
   },
 
+  beforeAdd: function (map) {
+    this.options.renderer = this.feature.datalayer.renderer
+    this.parentClass.prototype.beforeAdd.call(this, map)
+  },
+
   onAdd: function (map) {
     this._container = null
     FeatureMixin.onAdd.call(this, map)
@@ -323,17 +345,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)
@@ -444,6 +460,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],

umap/static/umap/js/modules/rules.js

@@ -4,6 +4,8 @@ import { MutatingForm } from './form/builder.js'
 import { translate } from './i18n.js'
 import Orderable from './orderable.js'
 import * as Utils from './utils.js'
+import * as Icon from './rendering/icon.js'
+import { SCHEMA } from './schema.js'
 
 const EMPTY_VALUES = ['', undefined, null]
 
@@ -12,12 +14,16 @@ class Rule {
     return this._condition
   }
 
+  get label() {
+    return this.name || this.condition
+  }
+
   set condition(value) {
     this._condition = value
     this.parse()
   }
 
-  constructor(umap, parent, condition = '', options = {}) {
+  constructor(umap, parent, condition = '', name = '', properties = {}) {
     // TODO make this public properties when browser coverage is ok
     // cf https://caniuse.com/?search=public%20class%20field
     this._condition = null
@@ -32,8 +38,9 @@ class Rule {
     this.parent = parent
     this._umap = umap
     this.active = true
-    this.options = options
+    this.properties = properties
     this.condition = condition
+    this.name = name
   }
 
   render(fields) {
@@ -95,7 +102,7 @@ class Rule {
   }
 
   getOption(option) {
-    return this.options[option]
+    return this.properties[option]
   }
 
   edit() {
@@ -108,23 +115,24 @@ class Rule {
           placeholder: translate('key=value or key!=value'),
         },
       ],
-      'options.color',
-      'options.iconClass',
-      'options.iconUrl',
-      'options.iconOpacity',
-      'options.opacity',
-      'options.weight',
-      'options.fill',
-      'options.fillColor',
-      'options.fillOpacity',
-      'options.smoothFactor',
-      'options.dashArray',
+      'name',
+      'properties.color',
+      'properties.iconClass',
+      'properties.iconUrl',
+      'properties.iconOpacity',
+      'properties.opacity',
+      'properties.weight',
+      'properties.fill',
+      'properties.fillColor',
+      'properties.fillOpacity',
+      'properties.smoothFactor',
+      'properties.dashArray',
     ]
     const builder = new MutatingForm(this, options)
     const container = document.createElement('div')
     container.appendChild(builder.build())
     const autocomplete = new AutocompleteDatalist(builder.helpers.condition.input)
-    const properties = this.parent.allProperties()
+    const properties = this.parent.fieldKeys
     autocomplete.suggestions = properties
     autocomplete.input.addEventListener('input', (event) => {
       const value = event.target.value
@@ -143,7 +151,7 @@ class Rule {
       </button>`)
     backButton.addEventListener('click', () =>
       this.parent.edit().then((panel) => {
-        panel.container.querySelector('details#rules').open = true
+        panel.scrollTo('details#rules')
       })
     )
 
@@ -160,7 +168,7 @@ class Rule {
         <button class="icon icon-16 icon-eye" title="${translate('Toggle rule')}" data-ref=toggle></button>
         <button class="icon icon-16 icon-edit show-on-edit" title="${translate('Edit')}" data-ref=edit></button>
         <button class="icon icon-16 icon-delete show-on-edit" title="${translate('Delete rule')}" data-ref=remove></button>
-        <span>${this.condition || translate('empty rule')}</span>
+        <span>${this.label || translate('empty rule')}</span>
         <i class="icon icon-16 icon-drag" title="${translate('Drag to reorder')}"></i>
       </li>
     `
@@ -171,7 +179,7 @@ class Rule {
     remove.addEventListener('click', () => {
       if (!confirm(translate('Are you sure you want to delete this rule?'))) return
       this._delete()
-      this._umap.editPanel.close()
+      this.parent.edit().then((panel) => panel.scrollTo('details#rules'))
     })
     toggle.addEventListener('click', () => {
       this.active = !this.active
@@ -181,8 +189,11 @@ class Rule {
   }
 
   _delete() {
+    // TODO refactor this call to update
+    const oldRules = Utils.CopyJSON(this.parent.properties.rules || {})
     this.parent.rules.rules = this.parent.rules.rules.filter((rule) => rule !== this)
     this.parent.rules.commit()
+    this.parent.sync.update('properties.rules', this.parent.properties.rules, oldRules)
   }
 
   setter(key, value) {
@@ -191,6 +202,20 @@ class Rule {
     this.parent.rules.commit()
     this.parent.sync.update('properties.rules', this.parent.properties.rules, oldRules)
   }
+
+  renderLegend(ul) {
+    const [li, { colorBox }] = Utils.loadTemplateWithRefs(
+      `<li><span class="color-box" data-ref=colorBox></span>${this.label}</li>`
+    )
+    const bgcolor = this.properties.color || this.parent.getColor()
+    const symbol = this.properties.iconUrl
+    colorBox.style.backgroundColor = bgcolor
+    if (symbol && symbol !== SCHEMA.iconUrl.default) {
+      const icon = Icon.makeElement(symbol, colorBox)
+      Icon.setContrast(icon, colorBox, symbol, bgcolor)
+    }
+    ul.appendChild(li)
+  }
 }
 
 export default class Rules {
@@ -203,9 +228,17 @@ export default class Rules {
   load() {
     this.rules = []
     if (!this.parent.properties.rules?.length) return
-    for (const { condition, options } of this.parent.properties.rules) {
+    for (const { condition, name, properties, options } of this.parent.properties
+      .rules) {
       if (!condition) continue
-      this.rules.push(new Rule(this._umap, this.parent, condition, options))
+      const rule = new Rule(
+        this._umap,
+        this.parent,
+        condition,
+        name,
+        properties || options
+      )
+      this.rules.push(rule)
     }
   }
 
@@ -250,6 +283,19 @@ export default class Rules {
     container.appendChild(body)
   }
 
+  count() {
+    return this.rules.length
+  }
+
+  renderLegend(container, keys = new Set()) {
+    const ul = Utils.loadTemplate('<ul class="rules-caption"></ul>')
+    container.appendChild(ul)
+    for (const rule of this.rules) {
+      if (keys.size && !keys.has(rule.key)) continue
+      rule.renderLegend(ul)
+    }
+  }
+
   addRule() {
     const rule = new Rule(this._umap, this.parent)
     this.rules.push(rule)
@@ -259,17 +305,24 @@ export default class Rules {
   commit() {
     this.parent.properties.rules = this.rules.map((rule) => {
       return {
+        name: rule.name,
         condition: rule.condition,
-        options: rule.options,
+        properties: rule.properties,
       }
     })
   }
 
-  getOption(option, feature) {
+  getOption(name, feature) {
     for (const rule of this.rules) {
       if (rule.match(feature.properties)) {
-        if (Utils.usableOption(rule.options, option)) return rule.options[option]
+        if (Utils.usableOption(rule.properties, name)) return rule.properties[name]
       }
     }
   }
+
+  *[Symbol.iterator]() {
+    for (const rule of this.rules) {
+      yield rule
+    }
+  }
 }

umap/static/umap/js/modules/schema.js

@@ -147,6 +147,9 @@ export const SCHEMA = {
     placeholder: translate('Example: key1,key2|Label 2,key3|Label 3|checkbox'),
     label: translate('Filters keys'),
   },
+  fields: {
+    type: Object,
+  },
   fill: {
     type: Boolean,
     impacts: ['data'],
@@ -215,6 +218,7 @@ export const SCHEMA = {
     choices: [
       ['Default', translate('Default')],
       ['Circle', translate('Circle')],
+      ['LargeCircle', translate('Large Circle')],
       ['Drop', translate('Drop')],
       ['Ball', translate('Ball')],
       ['Raw', translate('None')],
@@ -231,6 +235,17 @@ export const SCHEMA = {
     inheritable: true,
     default: 1,
   },
+  iconSize: {
+    type: Number,
+    impacts: ['data'],
+    min: 12,
+    max: 64,
+    step: 4,
+    label: translate('Icon size'),
+    helpText: translate('Will only affect raw and large circle icons.'),
+    inheritable: true,
+    default: 24,
+  },
   iconUrl: {
     type: String,
     impacts: ['data'],
@@ -435,9 +450,17 @@ export const SCHEMA = {
       ['GeoRSSLink', translate('GeoRSS (only link)')],
       ['OSM', translate('OpenStreetMap')],
       ['Wikipedia', translate('Wikipedia')],
+      ['Route', translate('Route')],
     ],
     default: 'Default',
   },
+  printControl: {
+    type: Boolean,
+    impacts: ['ui'],
+    nullable: true,
+    label: translate('Display the print control'),
+    default: null,
+  },
   rank: {
     type: Number,
     impacts: ['datalayer-rank'],
@@ -450,6 +473,10 @@ export const SCHEMA = {
     type: Object,
     impacts: ['data'],
   },
+  route: {
+    type: Object,
+    impacts: ['data'],
+  },
   scaleControl: {
     type: Boolean,
     impacts: ['ui'],

umap/static/umap/js/modules/share.js

@@ -43,7 +43,7 @@ export default class Share {
     const list = document.createElement('ul')
     list.classList.add('downloads')
     this.container.appendChild(list)
-    for (const format of Object.keys(EXPORT_FORMATS)) {
+    for (const format of Object.keys(EXPORT_FORMATS).concat('jpg', 'png')) {
       const button = Utils.loadTemplate(`
         <li>
           <button class="flat" type="button">
@@ -142,22 +142,29 @@ export default class Share {
 
   async format(mode) {
     const type = EXPORT_FORMATS[mode]
-    const content = await type.formatter(this._umap)
+    const features = this._umap.datalayers
+      .visible()
+      .reduce((acc, dl) => acc.concat(dl.features.visible()), [])
+    const content = await this._umap.formatter.stringify(features, mode)
     const filename = Utils.slugify(this._umap.properties.name) + type.ext
     return { content, filetype: type.filetype, filename }
   }
 
   async download(mode) {
-    const { content, filetype, filename } = await this.format(mode)
-    const blob = new Blob([content], { type: filetype })
-    window.URL = window.URL || window.webkitURL
-    const el = document.createElement('a')
-    el.download = filename
-    el.href = window.URL.createObjectURL(blob)
-    el.style.display = 'none'
-    document.body.appendChild(el)
-    el.click()
-    document.body.removeChild(el)
+    if (!(mode in EXPORT_FORMATS)) {
+      this._umap.openPrinter(mode)
+    } else {
+      const { content, filetype, filename } = await this.format(mode)
+      const blob = new Blob([content], { type: filetype })
+      window.URL = window.URL || window.webkitURL
+      const el = document.createElement('a')
+      el.download = filename
+      el.href = window.URL.createObjectURL(blob)
+      el.style.display = 'none'
+      document.body.appendChild(el)
+      el.click()
+      document.body.removeChild(el)
+    }
   }
 }
 

umap/static/umap/js/modules/slideshow.js

@@ -39,7 +39,7 @@ export default class Slideshow extends WithTemplate {
   get current() {
     if (!this._current) {
       const datalayer = this.defaultDatalayer()
-      if (datalayer) this._current = datalayer.getFeatureByIndex(0)
+      if (datalayer) this._current = datalayer.features.first()
     }
     return this._current
   }