umap-project 3.3.2__py3-none-any.whl → 3.4.0__py3-none-any.whl

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

@@ -7,7 +7,7 @@ export class DataLayerManager extends Object {
   active() {
     return Object.values(this)
       .filter((datalayer) => !datalayer.isDeleted)
-      .sort((a, b) => a.rank > b.rank)
+      .sort((a, b) => a.rank - b.rank)
   }
   reverse() {
     return this.active().reverse()
@@ -59,6 +59,7 @@ export class FeatureManager extends Map {
     if (this.has(feature.id)) {
       console.error('Duplicate id', feature, this.get(feature.id))
       feature.id = Utils.generateId()
+      feature.datalayer._migrated = true
     }
     this.set(feature.id, feature)
   }

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

@@ -3,6 +3,7 @@ import { uMapAlert as Alert } from '../components/alerts/alert.js'
 import { MutatingForm } from './form/builder.js'
 import { translate } from './i18n.js'
 import * as Utils from './utils.js'
+import * as DOMUtils from './domutils.js'
 
 // Dedicated object so we can deal with a separate dirty status, and thus
 // call the endpoint only when needed, saving one call at each save.
@@ -42,12 +43,42 @@ export class MapPermissions {
   }
 
   isAnonymousMap() {
-    return !this._umap.properties.permissions.owner
+    return !this.properties.owner
+  }
+
+  isDraft() {
+    return this.properties.share_status === 0
+  }
+
+  userIsAuth() {
+    return Boolean(this._umap.properties.user?.id)
   }
 
   _editAnonymous(container) {
-    const fields = []
     if (this.isOwner()) {
+      // We have a user, and this user has come through here, so they can edit the map, so let's allow to own the map.
+      // Note: real check is made on the back office anyway.
+      const template = `
+          <div class="anonymous soft-round aplat">
+            <h4><i class="icon icon-16 icon-anonymous"></i> ${translate('Anonymous map')}</h4>
+            <div data-ref="copiableInput"></div>
+            <p data-ref="p" hidden><button type="button" data-ref="button">${translate('Attach the map to my account')}</button></p>
+          </div>
+        `
+      const [root, { button, copiableInput, p }] = Utils.loadTemplateWithRefs(template)
+      container.appendChild(root)
+      if (this.properties.anonymous_edit_url) {
+        DOMUtils.copiableInput(
+          copiableInput,
+          translate('Secret edit link:'),
+          this.properties.anonymous_edit_url
+        )
+      }
+      if (this.userIsAuth()) {
+        button.addEventListener('click', () => this.attach())
+        p.hidden = false
+      }
+      const fields = []
       fields.push([
         'properties.edit_status',
         {
@@ -67,31 +98,6 @@ export class MapPermissions {
       const builder = new MutatingForm(this, fields)
       const form = builder.build()
       container.appendChild(form)
-
-      if (this.properties.anonymous_edit_url) {
-        DomUtil.createCopiableInput(
-          container,
-          translate('Secret edit link:'),
-          this.properties.anonymous_edit_url
-        )
-      }
-
-      if (this._umap.properties.user?.id) {
-        // We have a user, and this user has come through here, so they can edit the map, so let's allow to own the map.
-        // Note: real check is made on the back office anyway.
-        const advancedActions = DomUtil.createFieldset(
-          container,
-          translate('Advanced actions')
-        )
-        const advancedButtons = DomUtil.create('div', 'button-bar', advancedActions)
-        DomUtil.createButton(
-          'button',
-          advancedButtons,
-          translate('Attach the map to my account'),
-          this.attach,
-          this
-        )
-      }
     }
   }
 
@@ -187,6 +193,8 @@ export class MapPermissions {
     const [data, response, error] = await this._umap.server.post(this.getAttachUrl())
     if (!error) {
       this.properties.owner = this._umap.properties.user
+      this._umap.properties.user.is_owner = true
+      this.render()
       Alert.success(translate('Map has been attached to your account'))
       this._umap.editPanel.close()
     }
@@ -238,6 +246,10 @@ export class MapPermissions {
     )
   }
 
+  pull() {
+    this.setProperties(this._umap.properties.permissions)
+  }
+
   getShareStatusDisplay() {
     if (this._umap.properties.share_statuses) {
       return Object.fromEntries(this._umap.properties.share_statuses)[
@@ -245,10 +257,6 @@ export class MapPermissions {
       ]
     }
   }
-
-  isDraft() {
-    return this.properties.share_status === 0
-  }
 }
 
 export class DataLayerPermissions {

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

@@ -112,7 +112,9 @@ export const PermanentCreditsControl = Control.extend({
     const container = Utils.loadTemplate(
       `<div class="umap-permanent-credits-container text">${Utils.toHTML(map.options.permanentCredit)}</div>`
     )
-    const background = map.options.permanentCreditBackground ? '#FFFFFFB0' : ''
+    const background = map._umap.getProperty('permanentCreditBackground')
+      ? '#FFFFFFB0'
+      : ''
     container.style.backgroundColor = background
     return container
   },
@@ -164,7 +166,7 @@ export const DataLayersControl = BaseButton.extend({
   },
 
   afterAdd: function (container) {
-    Utils.toggleBadge(container, this._umap.browser?.hasFilters())
+    Utils.toggleBadge(container, this._umap.browser?.hasActiveFilters())
   },
 
   onClick: function () {
@@ -177,7 +179,7 @@ export const CaptionControl = BaseButton.extend({
     position: 'topleft',
     className: 'umap-control-caption',
     title: translate('About'),
-    icon: 'icon-caption',
+    icon: 'icon-info',
   },
 
   onClick: function () {
@@ -242,13 +244,13 @@ export const SearchControl = BaseButton.extend({
     const [container, { input, resultsContainer }] =
       Utils.loadTemplateWithRefs(template)
     const id = Math.random()
+    this.search = new U.Search(
+      this._umap._leafletMap,
+      input,
+      this.layer,
+      this.photonOptions
+    )
     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 })
       })

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

@@ -1,12 +1,7 @@
-import {
-  DivIcon,
-  DomEvent,
-  DomUtil,
-  Icon,
-  Point,
-} from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { DivIcon, Icon, Point } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { SCHEMA } from '../schema.js'
 import * as Utils from '../utils.js'
+import * as DOMUtils from '../domutils.js'
 
 export function getClass(name) {
   switch (name) {
@@ -299,7 +294,7 @@ export function setContrast(icon, parent, src, bgcolor) {
    */
   if (!icon) return
 
-  if (DomUtil.contrastedColor(parent, bgcolor)) {
+  if (DOMUtils.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 (src.endsWith('.svg') && src !== SCHEMA.iconUrl.default) {

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

@@ -6,7 +6,7 @@ export const LayerMixin = {
   browsable: true,
 
   onInit: function (leafletMap) {
-    if (this.datalayer.autoLoaded()) leafletMap.on('zoomend', this.onZoomEnd, this)
+    leafletMap.on('zoomend', this.onZoomEnd, this)
   },
 
   onDelete: function (leafletMap) {
@@ -48,12 +48,12 @@ export const LayerMixin = {
 
   onMoveEnd: function () {
     if (this.datalayer.hasDynamicData() && this.datalayer.showAtZoom()) {
-      this.datalayer.fetchRemoteData()
+      this.datalayer.fetchData()
     }
   },
 
   onZoomEnd() {
-    if (this.datalayer._forcedVisibility) return
+    if (!this.datalayer.autoVisibility) return
     if (!this.datalayer.showAtZoom() && this.datalayer.isVisible()) {
       this.datalayer.hide()
     }

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

@@ -2,11 +2,12 @@ import colorbrewer from '../../../../vendors/colorbrewer/colorbrewer.js'
 import { DomUtil, FeatureGroup } from '../../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../../i18n.js'
 import * as Utils from '../../utils.js'
+import * as DOMUtils from '../../domutils.js'
 import { CircleMarker } from '../ui.js'
 import { LayerMixin } from './base.js'
 
 // Layer where each feature color is relative to the others,
-// so we need all features before behing able to set one
+// so we need all features before being able to set one
 // feature layer
 const ClassifiedMixin = {
   initialize: function (datalayer) {
@@ -76,15 +77,21 @@ const ClassifiedMixin = {
 
   renderLegend: function (container) {
     if (!this.datalayer.isLoaded()) return
-    const parent = DomUtil.create('ul', '', container)
+    const ul = Utils.loadTemplate('<ul></ul>')
     const items = this.getLegendItems()
     for (const [color, label] of items) {
-      const li = DomUtil.create('li', '', parent)
-      const colorEl = DomUtil.create('span', 'datalayer-color', li)
-      colorEl.style.backgroundColor = color
-      const labelEl = DomUtil.create('span', '', li)
-      labelEl.textContent = label
+      const rgbColor = DOMUtils.hexToRGB(color)
+      const opacity = this.datalayer.getOption('fillOpacity')
+      const bgColor = `rgba(${rgbColor.join(',')}, ${opacity})`
+      const li = Utils.loadTemplate(`
+        <li>
+          <span class="datalayer-color" style="background-color: ${bgColor};"></span>
+          <span>${label}</span>
+        </li>
+      `)
+      ul.appendChild(li)
     }
+    container.appendChild(ul)
   },
 
   getColorSchemes: function (classes) {
@@ -198,7 +205,7 @@ export const Choropleth = FeatureGroup.extend({
         'properties.choropleth.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.fieldKeys,
+          selectOptions: this.datalayer.fields.keys(),
           label: translate('Choropleth property value'),
         },
       ],
@@ -307,7 +314,7 @@ export const Circles = FeatureGroup.extend({
         'properties.circles.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.fieldKeys,
+          selectOptions: this.datalayer.fields.keys(),
           label: translate('Property name to compute circles'),
         },
       ],
@@ -384,7 +391,7 @@ export const Categorized = FeatureGroup.extend({
 
   _getValue: function (feature) {
     const key =
-      this.datalayer.properties.categorized.property || this.datalayer.fieldKeys[0]
+      this.datalayer.properties.categorized.property || this.datalayer.fields.keys()[0]
     return feature.properties[key]
   },
 
@@ -437,7 +444,7 @@ export const Categorized = FeatureGroup.extend({
         'properties.categorized.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.fieldKeys,
+          selectOptions: this.datalayer.fields.keys(),
           label: translate('Category property'),
         },
       ],

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

@@ -5,11 +5,11 @@ import {
   Marker,
   Rectangle,
   Polyline,
-  DomUtil,
   latLngBounds,
 } from '../../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../../i18n.js'
 import * as Utils from '../../utils.js'
+import * as DOMUtils from '../../domutils.js'
 import { Cluster as ClusterIcon } from '../icon.js'
 import { LayerMixin } from './base.js'
 
@@ -21,7 +21,7 @@ const MarkerCluster = Marker.extend({
     const bgColor = this.options.icon.options.color
     const textColor = this.options.icon.options.textColor
     counter.style.color =
-      textColor || DomUtil.TextColorFromBackgroundColor(counter, bgColor)
+      textColor || DOMUtils.textColorFromBackgroundColor(counter, bgColor)
   },
 
   computeCoverage() {
@@ -186,22 +186,24 @@ export const Cluster = FeatureGroup.extend({
     return this
   },
 
+  removeLayer: function (layer) {
+    if (!layer.getLatLng) return FeatureGroup.prototype.removeLayer.call(this, layer)
+    this._bucket = this._bucket.filter((el) => el !== 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)
@@ -212,12 +214,18 @@ export const Cluster = FeatureGroup.extend({
   },
 
   onZoomEnd: function () {
+    LayerMixin.onZoomEnd.call(this)
     this.removeClusters()
   },
 
   onMoveEnd: function () {
-    this.compute()
-    this.addClusters()
+    LayerMixin.onMoveEnd.call(this)
+    // In case of dynamic data, the LayerMixin.onMoveEnd
+    // call with fetch the data and then call the compute
+    if (!this.datalayer.hasDynamicData()) {
+      this.compute()
+      this.addClusters()
+    }
   },
 
   showCoverage(cluster) {
@@ -228,7 +236,9 @@ export const Cluster = FeatureGroup.extend({
   },
 
   hideCoverage() {
-    if (this._shownCoverage) this._map.removeLayer(this._shownCoverage)
+    if (this._shownCoverage && this._map) {
+      this._map.removeLayer(this._shownCoverage)
+    }
   },
 
   onMouseOver(event) {
@@ -253,7 +263,7 @@ export const Cluster = FeatureGroup.extend({
       'properties.cluster.radius',
       {
         handler: 'Range',
-        min: 40,
+        min: 10,
         max: 200,
         step: 10,
         placeholder: translate('Clustering radius'),
@@ -271,6 +281,8 @@ export const Cluster = FeatureGroup.extend({
   ],
 
   onEdit: function (field, builder) {
-    if (field === 'properties.cluster.radius') this.redraw()
+    if (field === 'properties.cluster.radius' || field === 'properties.color') {
+      this.redraw()
+    }
   },
 })

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

@@ -68,27 +68,32 @@ export const Heat = L.HeatLayer.extend({
     return latLngBounds(this._latlngs)
   },
 
-  getEditableProperties: () => [
-    [
-      'properties.heat.radius',
-      {
-        handler: 'Range',
-        min: 10,
-        max: 100,
-        step: 5,
-        label: translate('Heatmap radius'),
-        helpText: translate('Override heatmap radius (default 25)'),
-      },
-    ],
-    [
-      'properties.heat.intensityProperty',
-      {
-        handler: 'BlurInput',
-        placeholder: translate('Heatmap intensity property'),
-        helpText: translate('Optional intensity property for heatmap'),
-      },
-    ],
-  ],
+  getEditableProperties: function () {
+    return [
+      [
+        'properties.heat.radius',
+        {
+          handler: 'Range',
+          min: 10,
+          max: 100,
+          step: 5,
+          label: translate('Heatmap radius'),
+          helpText: translate('Override heatmap radius (default 25)'),
+        },
+      ],
+      [
+        'properties.heat.intensityProperty',
+        {
+          handler: 'Select',
+          selectOptions: [
+            ['', translate('Select field to compute intensity')],
+            ...this.datalayer.fields.keys(),
+          ],
+          helpText: translate('Optional intensity field to compute heatmap'),
+        },
+      ],
+    ]
+  },
 
   onEdit: function (field, builder) {
     if (field === 'properties.heat.intensityProperty') {
@@ -97,6 +102,7 @@ export const Heat = L.HeatLayer.extend({
     }
     if (field === 'properties.heat.radius') {
       this.options.radius = this.datalayer.properties.heat.radius
+      this.redraw()
     }
     this._updateOptions()
   },

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

@@ -154,6 +154,7 @@ const ControlsMixin = {
 
 const ManageTilelayerMixin = {
   initTileLayers: function () {
+    this.pullProperties()
     this.tilelayers = []
     for (const props of this.options.tilelayers) {
       const layer = this.createTileLayer(props)

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

@@ -6,6 +6,7 @@ import {
 import { getLocale, translate } from '../i18n.js'
 import { Request } from '../request.js'
 import * as Utils from '../utils.js'
+import * as DOMUtils from '../domutils.js'
 import * as Icon from './icon.js'
 
 export default async function loadTemplate(name, feature, container) {
@@ -107,29 +108,20 @@ export const TitleMixin = (Base) =>
   }
 
 class Table extends TitleMixin(PopupTemplate) {
-  getValue(feature, key) {
-    // TODO, manage links (url, mailto, wikipedia...)
-    const value = Utils.escapeHTML(feature.properties[key]).trim()
-    if (value.indexOf('http') === 0) {
-      return `<a href="${value}" target="_blank">${value}</a>`
-    }
-    return value
-  }
-
-  makeRow(feature, key) {
+  makeRow(feature, field) {
     return Utils.loadTemplate(
-      `<tr><th>${key}</th><td>${this.getValue(feature, key)}</td></tr>`
+      `<tr><th>${field.key}</th><td>${field.render(feature.properties[field.key])}</td></tr>`
     )
   }
 
   async renderBody(feature) {
     const table = document.createElement('table')
 
-    for (const key in feature.properties) {
-      if (typeof feature.properties[key] === 'object' || U.LABEL_KEYS.includes(key)) {
+    for (const field of feature.fields) {
+      if (U.LABEL_KEYS.includes(field.key)) {
         continue
       }
-      table.appendChild(this.makeRow(feature, key))
+      table.appendChild(this.makeRow(feature, field))
     }
     return table
   }
@@ -171,7 +163,7 @@ class OSM extends PopupTemplate {
     const icon = Icon.makeElement(iconUrl, title)
     DomUtil.addClass(icon, 'icon')
     Icon.setContrast(icon, title, iconUrl, color)
-    if (DomUtil.contrastedColor(title, color)) title.style.color = 'white'
+    if (DOMUtils.contrastedColor(title, color)) title.style.color = 'white'
     DomUtil.add('span', '', title, this.getName(feature))
     return title
   }
@@ -180,7 +172,7 @@ class OSM extends PopupTemplate {
     const props = feature.properties
     const locale = getLocale()
     if (locale && props[`name:${locale}`]) return props[`name:${locale}`]
-    return props.name
+    return props.name || feature.getDisplayName()
   }
 
   async renderBody(feature) {
@@ -192,7 +184,7 @@ class OSM extends PopupTemplate {
       const row = DomUtil.add('address', 'address', body)
       const number = props['addr:housenumber']
       if (number) {
-        // Poor way to deal with international forms of writting addresses
+        // Poor way to deal with international forms of writing addresses
         DomUtil.add('span', '', row, `${translate('No.')}: ${number}`)
         DomUtil.add('span', '', row, `${translate('Street')}: ${street}`)
       } else {
@@ -230,11 +222,31 @@ class OSM extends PopupTemplate {
         )
       )
     }
+    if (props.image) {
+      body.appendChild(
+        Utils.loadTemplate(`<div><img src="${props.image}" alt="" /></div>`)
+      )
+    }
+    if (props.mapillary) {
+      body.appendChild(
+        Utils.loadTemplate(
+          `<div><a href="https://www.mapillary.com/app/?focus=photo&pKey=${props.mapillary}" target="_blank">${translate('Mapillary')}<i class="icon icon-16 icon-external-link"></i></a></div>`
+        )
+      )
+    }
     const wikipedia = props[`wikipedia:${locale}`] || props.wikipedia
     if (wikipedia) {
       body.appendChild(
         Utils.loadTemplate(
-          `<div class="wikipedia-link"><a href="https://wikipedia.org/wiki/${wikipedia}" target="_blank">${translate('Wikipedia')}</a></div>`
+          `<div><a href="https://wikipedia.org/wiki/${wikipedia}" target="_blank">${translate('Wikipedia')}<i class="icon icon-16 icon-external-link"></i></a></div>`
+        )
+      )
+    }
+    const wikidata = props[`wikidata:${locale}`] || props.wikidata
+    if (wikidata) {
+      body.appendChild(
+        Utils.loadTemplate(
+          `<div><a href="https://www.wikidata.org/wiki/${wikidata}" target="_blank">${translate('Wikidata')}<i class="icon icon-16 icon-external-link"></i></a></div>`
         )
       )
     }
@@ -242,7 +254,7 @@ class OSM extends PopupTemplate {
     if (id) {
       body.appendChild(
         Utils.loadTemplate(
-          `<div class="osm-link"><a href="https://www.openstreetmap.org/${id}">${translate('See on OpenStreetMap')}</a></div>`
+          `<div class="osm-link"><a href="https://www.openstreetmap.org/${id}">${translate('See on OpenStreetMap')}<i class="icon icon-16 icon-external-link"></i></a></div>`
         )
       )
     }
@@ -257,7 +269,7 @@ class Wikipedia extends PopupTemplate {
     if (wikipedia && _WIKIPEDIA_CACHE[wikipedia]) return _WIKIPEDIA_CACHE[wikipedia]
     // Wikipedia value should be in form of "{locale}:{title}", according to https://wiki.openstreetmap.org/wiki/Key:wikipedia
     const [locale, page] = wikipedia.split(':')
-    const url = `https://${locale}.wikipedia.org/w/api.php?action=query&format=json&origin=*&pithumbsize=500&prop=extracts|pageimages&titles=${page}`
+    const url = `https://${locale}.wikipedia.org/w/api.php?action=query&format=json&origin=*&pithumbsize=500&exintro=1&prop=extracts|pageimages&titles=${page}`
     const request = new Request()
     const response = await request.get(url)
     if (response?.ok) {
@@ -277,9 +289,21 @@ class Wikipedia extends PopupTemplate {
       const title = page.title || feature.getDisplayName()
       const extract = page.extract || ''
       const thumbnail = page.thumbnail?.source
-      const [content, { image }] = Utils.loadTemplateWithRefs(
-        `<div><h3>${Utils.escapeHTML(title)}</h3><img data-ref="image" hidden src="" />${Utils.escapeHTML(extract)}</div>`
-      )
+      const [content, { image }] = Utils.loadTemplateWithRefs(`
+      <div>
+        <h3>${Utils.escapeHTML(title)}</h3>
+        <img data-ref="image" hidden src="" />
+        <p>
+          ${Utils.escapeHTML(extract)}
+        </p>
+        <p>
+          © ${translate('Wikipedia contributors')} •
+          <a href="https://wikipedia.org/wiki/${wikipedia}" target="_blank">
+            ${translate('See on Wikipedia')}
+            <i class="icon icon-16 icon-external-link"></i>
+          </a>
+        </p>
+      </div>`)
       if (thumbnail) {
         image.src = thumbnail
         image.hidden = false
@@ -349,6 +373,9 @@ class Route extends TitleMixin(PopupTemplate) {
         color: 'orange',
       }).addTo(map)
     })
+    if (feature.properties.description) {
+      root.appendChild(Utils.loadTemplate(`<p>${feature.properties.description}</p>`))
+    }
     return root
   }
 }