umap-project 3.4.0b3__py3-none-any.whl → 3.6.0__py3-none-any.whl

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

@@ -1,8 +1,3 @@
-import {
-  DomUtil,
-  Util as LeafletUtil,
-  latLngBounds,
-} from '../../vendors/leaflet/leaflet-src.esm.js'
 import {
   uMapAlert as Alert,
   uMapAlertCreation as AlertCreation,
@@ -36,6 +31,8 @@ import * as Utils from './utils.js'
 import * as DOMUtils from './domutils.js'
 import { DataLayerManager } from './managers.js'
 import { Importer as OpenRouteService } from './importers/openrouteservice.js'
+import Loader from './ui/loader.js'
+import Hash from './ui/hash.js'
 
 export default class Umap {
   constructor(element, geojson) {
@@ -115,6 +112,10 @@ export default class Umap {
       this.properties.homeControl = false
     }
 
+    this.loader = new Loader(this._leafletMap._container)
+    if (this.properties.hash) {
+      this.hash = new Hash()
+    }
     this._leafletMap.setup()
 
     this.panel = new Panel(this, this._leafletMap)
@@ -261,15 +262,6 @@ export default class Umap {
     return window.self !== window.top
   }
 
-  get fieldKeys() {
-    return Array.from(
-      new Set([
-        ...this.fields.keys(),
-        ...this.datalayers.active().reduce((acc, dl) => acc.concat(dl.fieldKeys), []),
-      ])
-    )
-  }
-
   setPropertiesFromQueryString() {
     const asBoolean = (key) => {
       const value = this.searchParams.get(key)
@@ -681,7 +673,7 @@ export default class Umap {
     const parent = this._leafletMap.getPane('overlayPane')
     const datalayers = Object.values(this.datalayers)
       .filter((datalayer) => !datalayer._isDeleted)
-      .sort((datalayer1, datalayer2) => datalayer1.rank > datalayer2.rank)
+      .sort((datalayer1, datalayer2) => datalayer1.rank - datalayer2.rank)
     for (const datalayer of datalayers) {
       const child = parent.querySelector(`[data-id="${datalayer.id}"]`)
       parent.appendChild(child)
@@ -773,14 +765,19 @@ export default class Umap {
   editCaption() {
     if (!this.editEnabled) return
     if (this.properties.editMode !== 'advanced') return
-    const container = DomUtil.create('div')
+    const container = DOMUtils.loadTemplate(`
+      <div>
+        <h3>
+          <i class="icon icon-16 icon-info"></i>
+          ${translate('Edit map details')}
+        </h3>
+      </div>
+    `)
     const metadataFields = [
       'properties.name',
       'properties.description',
       'properties.is_template',
     ]
-
-    DomUtil.createTitle(container, translate('Edit map details'), 'icon-info')
     const builder = new MutatingForm(this, metadataFields, {
       className: 'map-metadata',
       umap: this,
@@ -788,13 +785,13 @@ export default class Umap {
     const form = builder.build()
     container.appendChild(form)
 
-    const tags = DomUtil.createFieldset(container, translate('Tags'))
+    const tags = DOMUtils.createFieldset(container, translate('Tags'))
     const tagsFields = ['properties.tags']
     const tagsBuilder = new MutatingForm(this, tagsFields, {
       umap: this,
     })
     tags.appendChild(tagsBuilder.build())
-    const credits = DomUtil.createFieldset(container, translate('Credits'))
+    const credits = DOMUtils.createFieldset(container, translate('Credits'))
     const creditsFields = [
       'properties.licence',
       'properties.shortCredit',
@@ -810,7 +807,11 @@ export default class Umap {
   editCenter() {
     if (!this.editEnabled) return
     if (this.properties.editMode !== 'advanced') return
-    const container = DomUtil.create('div')
+    const container = DOMUtils.loadTemplate(`
+      <div>
+        <h3><i class="icon icon-16 icon-zoom"></i>${translate('Edit map default view')}</h3>
+      </div>
+    `)
     const metadataFields = [
       ['properties.zoom', { handler: 'IntInput', label: translate('Default zoom') }],
       [
@@ -824,13 +825,12 @@ export default class Umap {
       'properties.defaultView',
     ]
 
-    DomUtil.createTitle(container, translate('Edit map default view'), 'icon-zoom')
     const builder = new MutatingForm(this, metadataFields, {
       className: 'map-metadata',
       umap: this,
     })
     const form = builder.build()
-    const button = Utils.loadTemplate(
+    const button = DOMUtils.loadTemplate(
       `<button type="button">${translate('Use current center and zoom')}</button>`
     )
     button.addEventListener('click', () => {
@@ -859,7 +859,7 @@ export default class Umap {
       'properties.layerSwitcher',
     ])
     const builder = new MutatingForm(this, UIFields, { umap: this })
-    const controlsOptions = DomUtil.createFieldset(
+    const controlsOptions = DOMUtils.createFieldset(
       container,
       translate('User interface options')
     )
@@ -883,7 +883,7 @@ export default class Umap {
     ]
 
     const builder = new MutatingForm(this, shapeOptions, { umap: this })
-    const defaultShapeProperties = DomUtil.createFieldset(
+    const defaultShapeProperties = DOMUtils.createFieldset(
       container,
       translate('Default shape properties')
     )
@@ -901,7 +901,7 @@ export default class Umap {
     ]
 
     const builder = new MutatingForm(this, shapeOptions, { umap: this })
-    const defaultShapeProperties = DomUtil.createFieldset(
+    const defaultShapeProperties = DOMUtils.createFieldset(
       container,
       translate('Default properties')
     )
@@ -919,7 +919,7 @@ export default class Umap {
       'properties.outlinkTarget',
     ]
     const builder = new MutatingForm(this, popupFields, { umap: this })
-    const popupFieldset = DomUtil.createFieldset(
+    const popupFieldset = DOMUtils.createFieldset(
       container,
       translate('Default interaction options')
     )
@@ -971,7 +971,7 @@ export default class Umap {
         { handler: 'Switch', label: translate('TMS format') },
       ],
     ]
-    const customTilelayer = DomUtil.createFieldset(
+    const customTilelayer = DOMUtils.createFieldset(
       container,
       translate('Custom background')
     )
@@ -1022,7 +1022,7 @@ export default class Umap {
       ],
       ['properties.overlay.tms', { handler: 'Switch', label: translate('TMS format') }],
     ]
-    const overlay = DomUtil.createFieldset(container, translate('Custom overlay'))
+    const overlay = DOMUtils.createFieldset(container, translate('Custom overlay'))
     const builder = new MutatingForm(this, overlayFields, { umap: this })
     overlay.appendChild(builder.build())
   }
@@ -1031,7 +1031,7 @@ export default class Umap {
     if (!Utils.isObject(this.properties.limitBounds)) {
       this.properties.limitBounds = {}
     }
-    const limitBounds = DomUtil.createFieldset(container, translate('Limit bounds'))
+    const limitBounds = DOMUtils.createFieldset(container, translate('Limit bounds'))
     const boundsFields = [
       [
         'properties.limitBounds.south',
@@ -1052,28 +1052,29 @@ export default class Umap {
     ]
     const boundsBuilder = new MutatingForm(this, boundsFields, { umap: this })
     limitBounds.appendChild(boundsBuilder.build())
-    const boundsButtons = DomUtil.create('div', 'button-bar half', limitBounds)
-    DomUtil.createButton(
-      'button',
-      boundsButtons,
-      translate('Use current bounds'),
-      () => {
-        const bounds = this._leafletMap.getBounds()
-        const oldLimitBounds = { ...this.properties.limitBounds }
-        this.properties.limitBounds.south = LeafletUtil.formatNum(bounds.getSouth())
-        this.properties.limitBounds.west = LeafletUtil.formatNum(bounds.getWest())
-        this.properties.limitBounds.north = LeafletUtil.formatNum(bounds.getNorth())
-        this.properties.limitBounds.east = LeafletUtil.formatNum(bounds.getEast())
-        boundsBuilder.fetchAll()
-        this.sync.update(
-          'properties.limitBounds',
-          this.properties.limitBounds,
-          oldLimitBounds
-        )
-        this._leafletMap.handleLimitBounds()
-      }
-    )
-    DomUtil.createButton('button', boundsButtons, translate('Empty'), () => {
+    const [boundsButtons, { current, empty }] = DOMUtils.loadTemplateWithRefs(`
+      <div class="button-bar half">
+        <button type="button" data-ref="current">${translate('Use current bounds')}</button>
+        <button type="button" data-ref="empty">${translate('Empty')}</button>
+      </div>
+    `)
+    limitBounds.appendChild(boundsButtons)
+    current.addEventListener('click', () => {
+      const bounds = this._leafletMap.getBounds()
+      const oldLimitBounds = { ...this.properties.limitBounds }
+      this.properties.limitBounds.south = bounds.getSouth().toFixed(6)
+      this.properties.limitBounds.west = bounds.getWest().toFixed(6)
+      this.properties.limitBounds.north = bounds.getNorth().toFixed(6)
+      this.properties.limitBounds.east = bounds.getEast().toFixed(6)
+      boundsBuilder.fetchAll()
+      this.sync.update(
+        'properties.limitBounds',
+        this.properties.limitBounds,
+        oldLimitBounds
+      )
+      this._leafletMap.handleLimitBounds()
+    })
+    empty.addEventListener('click', () => {
       const oldLimitBounds = { ...this.properties.limitBounds }
       this.properties.limitBounds.south = null
       this.properties.limitBounds.west = null
@@ -1090,7 +1091,7 @@ export default class Umap {
   }
 
   _editSlideshow(container) {
-    const slideshow = DomUtil.createFieldset(container, translate('Slideshow'))
+    const slideshow = DOMUtils.createFieldset(container, translate('Slideshow'))
     const slideshowFields = [
       [
         'properties.slideshow.active',
@@ -1123,7 +1124,10 @@ export default class Umap {
   }
 
   _editSync(container) {
-    const sync = DomUtil.createFieldset(container, translate('Real-time collaboration'))
+    const sync = DOMUtils.createFieldset(
+      container,
+      translate('Real-time collaboration')
+    )
     const builder = new MutatingForm(this, ['properties.syncEnabled'], {
       umap: this,
     })
@@ -1131,7 +1135,7 @@ export default class Umap {
   }
 
   _advancedActions(container) {
-    const advancedActions = DomUtil.createFieldset(
+    const advancedActions = DOMUtils.createFieldset(
       container,
       translate('Advanced actions')
     )
@@ -1155,7 +1159,7 @@ export default class Umap {
     </div>
     `
     const [bar, { del, clear, empty, clone, download }] =
-      Utils.loadTemplateWithRefs(tpl)
+      DOMUtils.loadTemplateWithRefs(tpl)
     advancedActions.appendChild(bar)
     if (this.permissions.isOwner()) {
       del.hidden = false
@@ -1172,12 +1176,11 @@ export default class Umap {
   edit() {
     if (!this.editEnabled) return
     if (this.properties.editMode !== 'advanced') return
-    const container = DomUtil.create('div')
-    DomUtil.createTitle(
-      container,
-      translate('Map advanced properties'),
-      'icon-settings'
-    )
+    const container = DOMUtils.loadTemplate(`
+      <div>
+        <h3><i class="icon icon-16 icon-settings"></i>${translate('Map advanced properties')}</h3>
+      </div>
+    `)
     this._editControls(container)
     this._editShapeProperties(container)
     this._editDefaultKeys(container)
@@ -1609,9 +1612,11 @@ export default class Umap {
       else if (finalIndex > initialIndex) movedLayer.insertBefore(targetLayer)
       else movedLayer.insertAfter(targetLayer)
       this.sync.startBatch()
-      this.datalayers.reverse().map((datalayer) => {
+      this.datalayers.reverse().map(async (datalayer) => {
         const rank = datalayer.getDOMOrder()
         if (rank >= minIndex && rank <= maxIndex) {
+          // TODO allow to save only metadata instead of force loading data
+          if (!datalayer.isLoaded()) await datalayer.fetchData()
           const oldRank = datalayer.rank
           datalayer.rank = rank
           datalayer.sync.update('options.rank', rank, oldRank)
@@ -1623,14 +1628,13 @@ export default class Umap {
     }
     const orderable = new Orderable(ul, onReorder)
 
-    const bar = DomUtil.create('div', 'button-bar', container)
-    DomUtil.createButton(
-      'show-on-edit block add-datalayer button',
-      bar,
-      translate('Add a layer'),
-      this.newDataLayer,
-      this
-    )
+    const [bar, { button }] = DOMUtils.loadTemplateWithRefs(`
+      <div class="button-bar">
+        <button type="button" class="show-on-edit block add-datalayer" data-ref="button">${translate('Add a layer')}</button>
+      </div>
+    `)
+    button.addEventListener('click', () => this.newDataLayer())
+    container.appendChild(bar)
 
     this.editPanel.open({ content: container, highlight: 'layers' })
   }
@@ -1738,6 +1742,7 @@ export default class Umap {
     const fields = Object.keys(importedData.properties).map(
       (field) => `properties.${field}`
     )
+    this.fields.pull()
     this.filters.load()
     this.render(fields)
     this._leafletMap._setDefaultCenter()
@@ -1790,16 +1795,12 @@ export default class Umap {
     await this.server.post(sendLink, {}, formData)
   }
 
-  getLayersBounds() {
-    const bounds = new latLngBounds()
-    this.datalayers.browsable().map((d) => {
-      if (d.isVisible()) bounds.extend(d.layer.getBounds())
-    })
-    return bounds
-  }
-
   fitDataBounds() {
-    const bounds = this.getLayersBounds()
+    const layers = this.datalayers
+      .browsable()
+      .filter((d) => d.isVisible())
+      .map((d) => d.layer)
+    const bounds = this._leafletMap.getLayersBounds(layers)
     if (!this.hasData() || !bounds.isValid()) return false
     this._leafletMap.fitBounds(bounds)
   }

umap/static/umap/js/modules/utils.js

@@ -177,15 +177,15 @@ export function toHTML(r, options) {
   // iframe
   r = r.replace(
     /{{{(https?[^|{]*)}}}/g,
-    '<div><iframe frameborder="0" src="$1" width="100%" height="300px"></iframe></div>'
+    '<div><iframe allowfullscreen src="$1" style="width: 100%; height: 300px; border: 0;"></iframe></div>'
   )
   r = r.replace(
     /{{{(https?[^|{]*)\|(\d*)(px)?}}}/g,
-    '<div><iframe frameborder="0" src="$1" width="100%" height="$2px"></iframe></div>'
+    '<div><iframe allowfullscreen src="$1" style="width: 100%; height: $2px; border: 0;"></iframe></div>'
   )
   r = r.replace(
     /{{{(https?[^|{]*)\|(\d*)(px)?\*(\d*)(px)?}}}/g,
-    '<div><iframe frameborder="0" src="$1" width="$4px" height="$2px"></iframe></div>'
+    '<div><iframe allowfullscreen src="$1" style="width: $4px; height: $2px; border: 0;"></iframe></div>'
   )
 
   // images
@@ -681,3 +681,13 @@ export const COLORS = [
   'Ivory',
   'White',
 ]
+
+export const LatLngIsValid = (latlng) => {
+  const [lat, lng] = Array.isArray(latlng) ? latlng : [latlng.lat, latlng.lng]
+  return (
+    Number.isFinite(lat) &&
+    Math.abs(lat) <= 90 &&
+    Number.isFinite(lng) &&
+    Math.abs(lng) <= 180
+  )
+}

umap/static/umap/js/umap.controls.js

@@ -45,171 +45,17 @@ U.TileLayerControl = L.Control.IconLayers.extend({
     const lastRow = this._container.querySelector(
       '.leaflet-iconLayers-layersRow:last-child'
     )
-    const button = L.DomUtil.element({
-      tagName: 'button',
-      className:
-        'leaflet-iconLayers-layerCell leaflet-iconLayers-layerCell-plus button',
-      textContent: '+',
-      parent: lastRow,
-    })
-    L.DomEvent.on(button, 'click', () =>
+    const button = document.createElement('button')
+    button.className =
+      'leaflet-iconLayers-layerCell leaflet-iconLayers-layerCell-plus button'
+    button.textContent = '+'
+    lastRow.appendChild(button)
+    button.addEventListener('click', () =>
       this.map._controls.tilelayersChooser.openSwitcher()
     )
   },
 })
 
-/*
- * Take control over L.Control.Locate to be able to
- * call start() before adding the control (and thus the button) to the map.
- */
-U.Locate = L.Control.Locate.extend({
-  initialize: function (map, options) {
-    // When calling start(), it will try to add a location marker
-    // on the layer, which is normally added in the addTo/onAdd method
-    this._layer = this.options.layer = new L.LayerGroup()
-    // When calling start(), it will call _activate(), which then adds
-    // location related event listeners on the map
-    this.map = map
-    L.Control.Locate.prototype.initialize.call(this, options)
-  },
-
-  onAdd: function (map) {
-    const active = this._active
-    const container = L.Control.Locate.prototype.onAdd.call(this, map)
-    this._active = active
-    return container
-  },
-
-  _activate: function () {
-    this._map = this.map
-    L.Control.Locate.prototype._activate.call(this)
-  },
-
-  remove: function () {
-    // Prevent to call remove if the control is not really added to the map
-    // This occurs because we do create the control and call its activate
-    // method before adding the control button itself to the map, in the
-    // case where the map defaultView is set to "location"
-    if (!this._container || !this._container.parentNode) return
-    return L.Control.Locate.prototype.remove.call(this)
-  },
-})
-
-U.Search = L.PhotonSearch.extend({
-  initialize: function (map, input, layer, options) {
-    this.options.placeholder = L._('Type a place name or coordinates')
-    this.options.location_bias_scale = 0.5
-    L.PhotonSearch.prototype.initialize.call(this, map, input, options)
-    this.options.url = map.options.urls.search
-    if (map.options.maxBounds) this.options.bbox = map.options.maxBounds.toBBoxString()
-    this.reverse = new L.PhotonReverse({
-      handleResults: (geojson) => {
-        this.handleResultsWithReverse(geojson)
-      },
-    })
-    this.layer = layer
-  },
-
-  handleResultsWithReverse: function (geojson) {
-    const latlng = this.reverse.latlng
-    geojson.features.unshift({
-      type: 'Feature',
-      geometry: { type: 'Point', coordinates: [latlng.lng, latlng.lat] },
-      properties: {
-        name: L._('Go to "{coords}"', { coords: `${latlng.lat} ${latlng.lng}` }),
-      },
-    })
-
-    this.handleResults(geojson)
-  },
-
-  search: function () {
-    this.layer.clearLayers()
-    const pattern = /^(?<lat>[-+]?\d{1,2}[.,]\d+)\s*[ ,]\s*(?<lng>[-+]?\d{1,3}[.,]\d+)$/
-    if (pattern.test(this.input.value)) {
-      this.hide()
-      const { lat, lng } = pattern.exec(this.input.value).groups
-      const latlng = L.latLng(lat, lng)
-      if (latlng.isValid()) {
-        this.reverse.doReverse(latlng)
-      } else {
-        U.Alert.error(L._('Invalid latitude or longitude'))
-      }
-      return
-    }
-    // Only numbers, abort.
-    if (/^[\d .,]*$/.test(this.input.value)) return
-    // Do normal search
-    this.options.includePosition = this.map.getZoom() > 10
-    L.PhotonSearch.prototype.search.call(this)
-  },
-
-  onBlur: function (e) {
-    // Overrided because we don't want to hide the results on blur.
-    this.fire('blur')
-  },
-
-  formatResult: function (feature, el) {
-    const [tools, { point, geom }] = U.Utils.loadTemplateWithRefs(`
-      <span class="search-result-tools">
-        <button type="button" title="${L._('Add this geometry to my map')}" data-ref=geom><i class="icon icon-16 icon-polygon-plus"></i></button>
-        <button type="button" title="${L._('Add this place to my map')}" data-ref=point><i class="icon icon-16 icon-marker-plus"></i></button>
-      </span>
-    `)
-    geom.hidden = !['R', 'W'].includes(feature.properties.osm_type)
-    point.addEventListener('mousedown', (event) => {
-      event.stopPropagation()
-      const datalayer = this.map._umap.defaultEditDataLayer()
-      const marker = datalayer.makeFeature(feature)
-      marker.edit()
-    })
-    geom.addEventListener('mousedown', async (event) => {
-      event.stopPropagation()
-      const osm_id = feature.properties.osm_id
-      const types = {
-        R: 'relation',
-        W: 'way',
-        N: 'node',
-      }
-      const osm_type = types[feature.properties.osm_type]
-      if (!osm_type || !osm_id) return
-      const importer = this.map._umap.importer
-      importer.build()
-      importer.format = 'osm'
-      importer.url = `https://www.openstreetmap.org/api/0.6/${osm_type}/${osm_id}/full`
-      importer.submit()
-    })
-    el.appendChild(tools)
-    this._formatResult(feature, el)
-    const path = this.map._umap.getStaticPathFor('target.svg')
-    const icon = L.icon({
-      iconUrl: path,
-      iconSize: [24, 24],
-      iconAnchor: [12, 12],
-    })
-    const coords = feature.geometry.coordinates
-    const target = L.marker([coords[1], coords[0]], { icon })
-    el.addEventListener('mouseover', (event) => {
-      target.addTo(this.layer)
-    })
-    el.addEventListener('mouseout', (event) => {
-      target.removeFrom(this.layer)
-    })
-  },
-
-  setChoice: function (choice) {
-    choice = choice || this.RESULTS[this.CURRENT]
-    if (choice) {
-      const feature = choice.feature
-      const zoom = Math.max(this.map.getZoom(), 14) // Never unzoom.
-      this.map.setView(
-        [feature.geometry.coordinates[1], feature.geometry.coordinates[0]],
-        zoom
-      )
-    }
-  },
-})
-
 L.Control.MiniMap.include({
   initialize: function (layer, options) {
     L.Util.setOptions(this, options)
@@ -228,23 +74,6 @@ L.Control.MiniMap.include({
   _cloneLayer: (layer) => new L.TileLayer(layer._url, L.Util.extend({}, layer.options)),
 })
 
-L.Control.Loading.include({
-  onAdd: function (map) {
-    this._container = L.DomUtil.create('div', 'umap-loader', map._controlContainer)
-    map.on('baselayerchange', this._layerAdd, this)
-    this._addMapListeners(map)
-    this._map = map
-  },
-
-  _showIndicator: function () {
-    this._map._container.classList.add('umap-loading')
-  },
-
-  _hideIndicator: function () {
-    this._map._container.classList.remove('umap-loading')
-  },
-})
-
 U.Editable = L.Editable.extend({
   initialize: function (umap, options) {
     this._umap = umap
@@ -252,9 +81,10 @@ U.Editable = L.Editable.extend({
     this.on('editable:drawing:click editable:drawing:move', this.drawingTooltip)
     // Layer for items added by users
     this.on('editable:drawing:cancel', (event) => {
-      if (event.layer instanceof U.LeafletMarker) event.layer.feature.del()
+      this.resetButtons()
     })
     this.on('editable:drawing:commit', function (event) {
+      this.resetButtons()
       if (this._umap.editedFeature !== event.layer) {
         const promise = event.layer.feature.edit(event)
         if (event.layer.feature.isRoute?.()) {
@@ -278,6 +108,13 @@ U.Editable = L.Editable.extend({
     this.on('editable:vertex:rawclick', this.onVertexRawClick)
   },
 
+  resetButtons: () => {
+    const buttons = document.querySelectorAll('.umap-edit-bar .drawing-tool')
+    for (const button of buttons) {
+      button.classList.remove('on')
+    }
+  },
+
   startRoute: function (latlng) {
     const feature = this.createLineString()
     feature.askForRouteSettings().then(async () => {
@@ -402,7 +239,7 @@ U.Editable = L.Editable.extend({
       // (eg. line has only one drawn point)
       // So let's check if the layer has no more shape
       event.layer.feature.pullGeometry(false)
-      if (!event.layer.feature.hasGeom()) {
+      if (!event.layer.feature.hasGeom() || event.layer instanceof U.LeafletMarker) {
         event.layer.feature.del()
       } else {
         event.layer.feature.onCommit()