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

umap/static/umap/js/modules/managers.js

@@ -63,6 +63,14 @@ export class FeatureManager extends Map {
     this.set(feature.id, feature)
   }
 
+  all() {
+    return Array.from(this.values())
+  }
+
+  visible() {
+    return this.all().filter((feature) => !feature.isFiltered())
+  }
+
   del(feature) {
     this.delete(feature.id)
   }
@@ -72,7 +80,7 @@ export class FeatureManager extends Map {
   }
 
   sort(by) {
-    const features = Array.from(this.values())
+    const features = this.all()
     Utils.sortFeatures(features, by, U.lang)
     this.clear()
     for (const feature of features) {
@@ -90,16 +98,16 @@ export class FeatureManager extends Map {
   }
 
   last() {
-    return Array.from(this.values())[this.size - 1]
+    return this.all()[this.size - 1]
   }
 
   next(feature) {
     const index = this.getIndex(feature)
-    return Array.from(this.values())[index + 1]
+    return this.all()[index + 1]
   }
 
   prev(feature) {
     const index = this.getIndex(feature)
-    return Array.from(this.values())[index - 1]
+    return this.all()[index - 1]
   }
 }

umap/static/umap/js/modules/printer.js

@@ -0,0 +1,107 @@
+import { translate } from './i18n.js'
+import * as Utils from './utils.js'
+
+export default class Printer {
+  constructor(umap) {
+    this.umap = umap
+    this.dialog = this.umap.dialog
+  }
+
+  build() {
+    const [container, { format, mode, scale }] = Utils.loadTemplateWithRefs(`
+      <div>
+        <h3>${translate('Print map')}</h3>
+        <div class="formbox">
+          <label>${translate('Choose a format')}
+            <select name="format" data-ref="format">
+              <option value="a4">A4</option>
+              <option value="usletter">US Letter</option>
+            </select>
+          </label>
+          <label>${translate('Scale map')}
+            <input type="range" min="50" max="150" name="scale" data-ref="scale" />
+          </label>
+          <div class="umap-multiplechoice by2" data-ref="mode">
+              <input type="radio" name="mode" id="mode.0" value="portrait"><label for="mode.0">${translate('portrait')}</label>
+              <input type="radio" name="mode" id="mode.1" value="landscape" checked=""><label for="mode.1">${translate('landscape')}</label>
+          </div>
+        </div>
+      </div>
+    `)
+    this.container = container
+    format.addEventListener('change', () => this.resizeMap())
+    mode.addEventListener('change', () => this.resizeMap())
+    scale.addEventListener('change', () => this.resizeMap())
+  }
+
+  resetSize() {
+    const map = this.umap._leafletMap
+    for (const name of Array.from(map._container.classList)) {
+      if (name.startsWith('print-')) {
+        map._container.classList.remove(name)
+      }
+    }
+    map._container.removeAttribute('style')
+    map.invalidateSize()
+  }
+
+  resizeMap() {
+    const form = this.dialog.collectFormData()
+    this.resetSize()
+    const map = this.umap._leafletMap
+    if (form.format && form.mode) {
+      map._container.classList.add(`print-${form.format}`)
+      map._container.classList.add(`print-${form.mode}`)
+      map._container.style.width = `${form.scale}%`
+      map.invalidateSize()
+    }
+  }
+
+  open(action = 'print') {
+    if (!this.container) this.build()
+    this.action = action
+    const acceptLabel = action === 'print' ? translate('Print') : translate('Download')
+    this.dialog.on(
+      'close',
+      (event) => {
+        if (event.target.returnValue !== 'accept') {
+          this.resetSize()
+        }
+      },
+      { once: true }
+    )
+    this.dialog
+      .open({ template: this.container, cancel: false, accept: acceptLabel })
+      .then((form) => this.onSubmit(form))
+    this.resizeMap()
+  }
+
+  async onSubmit(form) {
+    this.umap.fire('dataloading', { id: 'screenshot' })
+    if (this.action === 'print') {
+      const win = window.open('', '_blank')
+      // Using document.body.appendChild here will end with black font
+      // on a black blackground, no idea why.
+      win.document.write(`<span>${translate('Preparing the print…')}</span>`)
+      // screenshot must be called after window.open, no idea why,
+      // otherwise window.open sometimes fails and returns null.
+      const screenshot = await this.umap.screenshot()
+      const img = await screenshot.toPng()
+      img.addEventListener('load', () => {
+        win.print()
+        win.close()
+      })
+      win.document.querySelector('span').remove()
+      win.document.body.appendChild(img)
+      win.focus()
+    } else {
+      const screenshot = await this.umap.screenshot()
+      await screenshot.download({
+        format: this.action,
+        filename: Utils.slugify(this.umap.properties.name),
+      })
+    }
+    this.resetSize()
+    this.umap.fire('dataload', { id: 'screenshot' })
+  }
+}

umap/static/umap/js/modules/rendering/controls.js

@@ -138,11 +138,21 @@ const BaseButton = Control.extend({
     button.addEventListener('dblclick', (event) => {
       event.stopPropagation()
     })
-    this.afterAdd(container)
+    if (this.options.icon) {
+      button.appendChild(
+        Utils.loadTemplate(`<i class="icon icon-24 ${this.options.icon}"></i>`)
+      )
+    }
+    this.afterAdd(container, map)
     return container
   },
 
-  afterAdd: (container) => {},
+  onRemove(map) {
+    this.afterRemove(map)
+  },
+
+  afterAdd: (container, map) => {},
+  afterRemove: (map) => {},
 })
 
 export const DataLayersControl = BaseButton.extend({
@@ -150,6 +160,7 @@ export const DataLayersControl = BaseButton.extend({
     position: 'topleft',
     className: 'umap-control-browse',
     title: translate('Open browser'),
+    icon: 'icon-layers',
   },
 
   afterAdd: function (container) {
@@ -166,6 +177,7 @@ export const CaptionControl = BaseButton.extend({
     position: 'topleft',
     className: 'umap-control-caption',
     title: translate('About'),
+    icon: 'icon-caption',
   },
 
   onClick: function () {
@@ -178,6 +190,7 @@ export const EmbedControl = BaseButton.extend({
     position: 'topleft',
     title: translate('Share and download'),
     className: 'leaflet-control-embed',
+    icon: 'icon-share',
   },
 
   onClick: function () {
@@ -185,6 +198,69 @@ export const EmbedControl = BaseButton.extend({
   },
 })
 
+export const PrintControl = BaseButton.extend({
+  options: {
+    position: 'topleft',
+    title: translate('Print'),
+    icon: 'icon-print',
+  },
+
+  onClick: function () {
+    this._umap.openPrinter('print')
+  },
+})
+
+export const SearchControl = BaseButton.extend({
+  options: {
+    position: 'topleft',
+    title: translate('Search location'),
+    className: 'leaflet-control-search',
+    icon: 'icon-search',
+  },
+
+  afterAdd(container, map) {
+    this.layer = L.layerGroup().addTo(map)
+    this.photonOptions = {
+      limit: 10,
+      noResultLabel: translate('No results'),
+    }
+    if (map.options.photonUrl) this.photonOptions.url = map.options.photonUrl
+  },
+
+  afterRemove: function (map) {
+    this.layer.remove()
+  },
+
+  onClick: function () {
+    const template = `
+      <div>
+        <h3><i class="icon icon-16 icon-search"></i>${translate('Search location')}</h3>
+        <input class="photon-input" data-ref=input />
+        <div class="photon-autocomplete" data-ref=resultsContainer></div>
+      </div>
+    `
+    const [container, { input, resultsContainer }] =
+      Utils.loadTemplateWithRefs(template)
+    const id = Math.random()
+    this._umap.panel.open({ content: container }).then(() => {
+      this.search = new U.Search(
+        this._umap._leafletMap,
+        input,
+        this.layer,
+        this.photonOptions
+      )
+      this.search.on('ajax:send', () => {
+        this._umap.fire('dataloading', { id: id })
+      })
+      this.search.on('ajax:return', () => {
+        this._umap.fire('dataload', { id: id })
+      })
+      this.search.resultsContainer = resultsContainer
+      input.focus()
+    })
+  },
+})
+
 export const AttributionControl = Control.Attribution.extend({
   options: {
     prefix: '',

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
   },
 })