umap-project 2.7.3__py3-none-any.whl → 2.8.0__py3-none-any.whl

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

@@ -0,0 +1,390 @@
+// Goes here all code related to Leaflet, DOM and user interactions.
+import {
+  Map as BaseMap,
+  DomUtil,
+  DomEvent,
+  latLngBounds,
+  latLng,
+  Control,
+  setOptions,
+} from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from '../i18n.js'
+import { uMapAlert as Alert } from '../../components/alerts/alert.js'
+import * as Utils from '../utils.js'
+import * as Icon from './icon.js'
+
+// Those options are not saved on the server, so they can live here
+// instead of in umap.properties
+BaseMap.mergeOptions({
+  demoTileInfos: { s: 'a', z: 9, x: 265, y: 181, '-y': 181, r: '' },
+  attributionControl: false,
+})
+
+const ControlsMixin = {
+  HIDDABLE_CONTROLS: [
+    'zoom',
+    'search',
+    'fullscreen',
+    'embed',
+    'datalayers',
+    'caption',
+    'locate',
+    'measure',
+    'editinosm',
+    'star',
+    'tilelayers',
+  ],
+
+  initControls: function () {
+    this._controls = {}
+
+    if (this._umap.hasEditMode() && !this.options.noControl) {
+      new U.EditControl(this).addTo(this)
+
+      new U.DrawToolbar({ map: this }).addTo(this)
+      const editActions = [
+        U.EditCaptionAction,
+        U.ImportAction,
+        U.EditLayersAction,
+        U.ChangeTileLayerAction,
+        U.UpdateExtentAction,
+        U.UpdatePermsAction,
+        U.EditPropertiesAction,
+      ]
+      if (this.options.editMode === 'advanced') {
+        new U.SettingsToolbar({ actions: editActions }).addTo(this)
+      }
+    }
+    this._controls.zoom = new Control.Zoom({
+      zoomInTitle: translate('Zoom in'),
+      zoomOutTitle: translate('Zoom out'),
+    })
+    this._controls.datalayers = new U.DataLayersControl(this._umap)
+    this._controls.caption = new U.CaptionControl(this._umap)
+    this._controls.locate = new U.Locate(this, {
+      strings: {
+        title: translate('Center map on your location'),
+      },
+      showPopup: false,
+      // We style this control in our own CSS for consistency with other controls,
+      // but the control breaks if we don't specify a class here, so a fake class
+      // will do.
+      icon: 'umap-fake-class',
+      iconLoading: 'umap-fake-class',
+      flyTo: this.options.easing,
+      onLocationError: (err) => U.Alert.error(err.message),
+    })
+    this._controls.fullscreen = new Control.Fullscreen({
+      title: {
+        false: translate('View Fullscreen'),
+        true: translate('Exit Fullscreen'),
+      },
+    })
+    this._controls.search = new U.SearchControl()
+    this._controls.embed = new Control.Embed(this._umap)
+    this._controls.tilelayersChooser = new U.TileLayerChooser(this)
+    if (this.options.user?.id) this._controls.star = new U.StarControl(this._umap)
+    this._controls.editinosm = new Control.EditInOSM({
+      position: 'topleft',
+      widgetOptions: {
+        helpText: translate(
+          'Open this map extent in a map editor to provide more accurate data to OpenStreetMap'
+        ),
+      },
+    })
+    this._controls.measure = new L.MeasureControl().initHandler(this)
+    this._controls.more = new U.MoreControls()
+    this._controls.scale = L.control.scale()
+    this._controls.permanentCredit = new U.PermanentCreditsControl(this)
+    this._umap.drop = new U.DropControl(this)
+    this._controls.tilelayers = new U.TileLayerControl(this)
+  },
+
+  renderControls: function () {
+    for (const control of Object.values(this._controls)) {
+      this.removeControl(control)
+    }
+    if (this.options.noControl) return
+
+    this._controls.attribution = new U.AttributionControl().addTo(this)
+    if (this.options.miniMap) {
+      this.whenReady(function () {
+        if (this.selectedTilelayer) {
+          this._controls.miniMap = new Control.MiniMap(this.selectedTilelayer, {
+            aimingRectOptions: {
+              color: this._umap.getProperty('color'),
+              fillColor: this._umap.getProperty('fillColor'),
+              stroke: this._umap.getProperty('stroke'),
+              fill: this._umap.getProperty('fill'),
+              weight: this._umap.getProperty('weight'),
+              opacity: this._umap.getProperty('opacity'),
+              fillOpacity: this._umap.getProperty('fillOpacity'),
+            },
+          }).addTo(this)
+          this._controls.miniMap._miniMap.invalidateSize()
+        }
+      })
+    }
+    for (const name of this.HIDDABLE_CONTROLS) {
+      const status = this._umap.getProperty(`${name}Control`)
+      if (status === false) continue
+      const control = this._controls[name]
+      if (!control) continue
+      control.addTo(this)
+      if (status === undefined || status === null) {
+        DomUtil.addClass(control._container, 'display-on-more')
+      } else {
+        DomUtil.removeClass(control._container, 'display-on-more')
+      }
+    }
+    if (this._umap.getProperty('permanentCredit'))
+      this._controls.permanentCredit.addTo(this)
+    if (this._umap.getProperty('moreControl')) this._controls.more.addTo(this)
+    if (this._umap.getProperty('scaleControl')) this._controls.scale.addTo(this)
+    this._controls.tilelayers.setLayers()
+  },
+}
+
+const ManageTilelayerMixin = {
+  initTileLayers: function () {
+    this.tilelayers = []
+    for (const props of this.options.tilelayers) {
+      const layer = this.createTileLayer(props)
+      this.tilelayers.push(layer)
+      if (
+        this.options.tilelayer &&
+        this.options.tilelayer.url_template === props.url_template
+      ) {
+        // Keep control over the displayed attribution for non custom tilelayers
+        this.options.tilelayer.attribution = props.attribution
+      }
+    }
+    if (this.options.tilelayer?.url_template && this.options.tilelayer.attribution) {
+      this.customTilelayer = this.createTileLayer(this.options.tilelayer)
+      this.selectTileLayer(this.customTilelayer)
+    } else {
+      this.selectTileLayer(this.tilelayers[0])
+    }
+    if (this._controls) this._controls.tilelayers.setLayers()
+  },
+
+  createTileLayer: (tilelayer) => new L.TileLayer(tilelayer.url_template, tilelayer),
+
+  selectTileLayer: function (tilelayer) {
+    if (tilelayer === this.selectedTilelayer) {
+      return
+    }
+    try {
+      this.addLayer(tilelayer)
+      this.fire('baselayerchange', { layer: tilelayer })
+      if (this.selectedTilelayer) {
+        this.removeLayer(this.selectedTilelayer)
+      }
+      this.selectedTilelayer = tilelayer
+      if (
+        !Number.isNaN(this.selectedTilelayer.options.minZoom) &&
+        this.getZoom() < this.selectedTilelayer.options.minZoom
+      ) {
+        this.setZoom(this.selectedTilelayer.options.minZoom)
+      }
+      if (
+        !Number.isNaN(this.selectedTilelayer.options.maxZoom) &&
+        this.getZoom() > this.selectedTilelayer.options.maxZoom
+      ) {
+        this.setZoom(this.selectedTilelayer.options.maxZoom)
+      }
+    } catch (e) {
+      console.error(e)
+      this.removeLayer(tilelayer)
+      Alert.error(`${translate('Error in the tilelayer URL')}: ${tilelayer._url}`)
+      // Users can put tilelayer URLs by hand, and if they add wrong {variable},
+      // Leaflet throw an error, and then the map is no more editable
+    }
+    this.setOverlay()
+  },
+
+  eachTileLayer: function (callback, context) {
+    const urls = []
+    const callOne = (layer) => {
+      // Prevent adding a duplicate background,
+      // while adding selected/custom on top of the list
+      const url = layer.options.url_template
+      if (urls.indexOf(url) !== -1) return
+      callback.call(context, layer)
+      urls.push(url)
+    }
+    if (this.selectedTilelayer) callOne(this.selectedTilelayer)
+    if (this.customTilelayer) callOne(this.customTilelayer)
+    this.tilelayers.forEach(callOne)
+  },
+
+  setOverlay: function () {
+    if (!this.options.overlay || !this.options.overlay.url_template) return
+    const overlay = this.createTileLayer(this.options.overlay)
+    try {
+      this.addLayer(overlay)
+      if (this.overlay) this.removeLayer(this.overlay)
+      this.overlay = overlay
+    } catch (e) {
+      this.removeLayer(overlay)
+      console.error(e)
+      Alert.error(`${translate('Error in the overlay URL')}: ${overlay._url}`)
+    }
+  },
+
+  updateTileLayers: function () {
+    if (this._controls.tilelayersChooser) {
+      this._controls.tilelayersChooser.openSwitcher({ edit: true })
+    }
+  },
+}
+
+export const LeafletMap = BaseMap.extend({
+  includes: [ControlsMixin, ManageTilelayerMixin],
+
+  // The initialize and the setup method might seem similar, but they
+  // serve two different purposes:
+  // initialize is for Leaflet internal, when we do "new LeafletMap",
+  // while setup is the public API for the LeafletMap to actually
+  // render to the DOM.
+  initialize: function (umap, element) {
+    this._umap = umap
+    const options = this._umap.properties
+
+    BaseMap.prototype.initialize.call(this, element, options)
+
+    // After calling parent initialize, as we are doing initCenter our-selves
+
+    this.loader = new Control.Loading()
+    this.loader.onAdd(this)
+
+    if (!this.options.noControl) {
+      DomEvent.on(document.body, 'dataloading', (event) =>
+        this.fire('dataloading', event.detail)
+      )
+      DomEvent.on(document.body, 'dataload', (event) =>
+        this.fire('dataload', event.detail)
+      )
+      this.on('click', this.closeInplaceToolbar)
+    }
+
+    this.on('baselayerchange', (e) => {
+      if (this._controls.miniMap) this._controls.miniMap.onMainMapBaseLayerChange(e)
+    })
+  },
+
+  setup: function () {
+    this.initControls()
+    // Needs locate control and hash to exist
+    this.initCenter()
+    this.initTileLayers()
+    this.renderUI()
+  },
+
+  renderUI: function () {
+    setOptions(this, this._umap.properties)
+    if (this.options.scrollWheelZoom) {
+      this.scrollWheelZoom.enable()
+      this.dragging.enable()
+    } else {
+      this.scrollWheelZoom.disable()
+      // In mobile, do not let the user move the map
+      // when scrolling the main page and touching the
+      // map in an iframe. May be a bit dumb, but let's
+      // try like this for now.
+      if (L.Browser.mobile) this.dragging.disable()
+    }
+    // Needs tilelayer to exist for minimap
+    this.renderControls()
+    this.handleLimitBounds()
+  },
+
+  closeInplaceToolbar: function () {
+    const toolbar = this._toolbars[L.Toolbar.Popup._toolbar_class_id]
+    if (toolbar) toolbar.remove()
+  },
+
+  latLng: (a, b, c) => {
+    // manage geojson case and call original method
+    if (!(a instanceof L.LatLng) && a.coordinates) {
+      // Guess it's a geojson
+      a = [a.coordinates[1], a.coordinates[0]]
+    }
+    return latLng(a, b, c)
+  },
+
+  _setDefaultCenter: function () {
+    this.options.center = this.latLng(this.options.center)
+    this.setView(this.options.center, this.options.zoom)
+  },
+
+  initCenter: function () {
+    this._setDefaultCenter()
+    if (this.options.hash) this.addHash()
+    if (this.options.hash && this._hash.parseHash(location.hash)) {
+      // FIXME An invalid hash will cause the load to fail
+      this._hash.update()
+    } else if (this.options.defaultView === 'locate' && !this.options.noControl) {
+      this._controls.locate.start()
+    } else if (this.options.defaultView === 'data') {
+      this._umap.onceDataLoaded(this._umap.fitDataBounds)
+    } else if (this.options.defaultView === 'latest') {
+      this._umap.onceDataLoaded(() => {
+        if (!this._umap.hasData()) return
+        const datalayer = this._umap.firstVisibleDatalayer()
+        let feature
+        if (datalayer) {
+          const feature = datalayer.getFeatureByIndex(-1)
+          if (feature) {
+            feature.zoomTo({ callback: this.options.noControl ? null : feature.view })
+            return
+          }
+        }
+      })
+    }
+  },
+
+  handleLimitBounds: function () {
+    const south = Number.parseFloat(this.options.limitBounds.south)
+    const west = Number.parseFloat(this.options.limitBounds.west)
+    const north = Number.parseFloat(this.options.limitBounds.north)
+    const east = Number.parseFloat(this.options.limitBounds.east)
+    if (
+      !Number.isNaN(south) &&
+      !Number.isNaN(west) &&
+      !Number.isNaN(north) &&
+      !Number.isNaN(east)
+    ) {
+      const bounds = latLngBounds([
+        [south, west],
+        [north, east],
+      ])
+      this.options.minZoom = this.getBoundsZoom(bounds, false)
+      try {
+        this.setMaxBounds(bounds)
+      } catch (e) {
+        // Unusable bounds, like -2 -2 -2 -2?
+        console.error('Error limiting bounds', e)
+      }
+    } else {
+      this.options.minZoom = 0
+      this.setMaxBounds()
+    }
+  },
+
+  setMaxBounds: function (bounds) {
+    // Hack. Remove me when fix is released:
+    // https://github.com/Leaflet/Leaflet/pull/4494
+    bounds = latLngBounds(bounds)
+
+    if (!bounds.isValid()) {
+      this.options.maxBounds = null
+      return this.off('moveend', this._panInsideMaxBounds)
+    }
+    return BaseMap.prototype.setMaxBounds.call(this, bounds)
+  },
+
+  initEditTools: function () {
+    this.editTools = new U.Editable(this._umap)
+  },
+})

umap/static/umap/js/modules/rendering/popup.js

@@ -21,30 +21,30 @@ export default function loadPopup(name) {
 const Popup = BasePopup.extend({
   initialize: function (feature) {
     this.feature = feature
-    this.container = DomUtil.create('div', 'umap-popup')
-    this.format()
-    BasePopup.prototype.initialize.call(this, {}, feature)
-    this.setContent(this.container)
+    BasePopup.prototype.initialize.call(this, {}, feature.ui)
   },
 
-  format: function () {
+  loadContent: async function () {
+    const container = DomUtil.create('div', 'umap-popup')
     const name = this.feature.getOption('popupTemplate')
-    this.content = loadTemplate(name, this.feature, this.container)
-    const elements = this.container.querySelectorAll('img,iframe')
+    this.content = await loadTemplate(name, this.feature, container)
+    const elements = container.querySelectorAll('img,iframe')
     for (const element of elements) {
       this.onElementLoaded(element)
     }
-    if (!elements.length && this.container.textContent.replace('\n', '') === '') {
-      this.container.innerHTML = ''
-      DomUtil.add('h3', '', this.container, this.feature.getDisplayName())
+    if (!elements.length && container.textContent.replace('\n', '') === '') {
+      container.innerHTML = ''
+      DomUtil.add('h3', '', container, this.feature.getDisplayName())
     }
+    this.setContent(container)
   },
 
   onElementLoaded: function (el) {
     DomEvent.on(el, 'load', () => {
       this._updateLayout()
       this._updatePosition()
-      this._adjustPan()
+      // Do not call when feature is in cluster.
+      if (this._map) this._adjustPan()
     })
   },
 })
@@ -61,15 +61,15 @@ const Panel = Popup.extend({
     zoomAnimation: false,
   },
 
-  onAdd: function (map) {
-    map.panel.setDefaultMode('expanded')
-    map.panel.open({
+  onAdd: function (leafletMap) {
+    leafletMap._umap.panel.setDefaultMode('expanded')
+    leafletMap._umap.panel.open({
       content: this._content,
-      actions: [Browser.backButton(map)],
+      actions: [Browser.backButton(leafletMap._umap)],
     })
 
     // fire events as in base class Popup.js:onAdd
-    map.fire('popupopen', { popup: this })
+    leafletMap.fire('popupopen', { popup: this })
     if (this._source) {
       this._source.fire('popupopen', { popup: this }, true)
       if (!(this._source instanceof Path)) {
@@ -78,11 +78,11 @@ const Panel = Popup.extend({
     }
   },
 
-  onRemove: function (map) {
-    map.panel.close()
+  onRemove: function (leafletMap) {
+    leafletMap._umap.panel.close()
 
     // fire events as in base class Popup.js:onRemove
-    map.fire('popupclose', { popup: this })
+    leafletMap.fire('popupclose', { popup: this })
     if (this._source) {
       this._source.fire('popupclose', { popup: this }, true)
       if (!(this._source instanceof Path)) {

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

@@ -2,8 +2,9 @@ import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate, getLocale } from '../i18n.js'
 import * as Utils from '../utils.js'
 import * as Icon from './icon.js'
+import { Request } from '../request.js'
 
-export default function loadTemplate(name, feature, container) {
+export default async function loadTemplate(name, feature, container) {
   let klass = PopupTemplate
   switch (name) {
     case 'GeoRSSLink':
@@ -18,9 +19,12 @@ export default function loadTemplate(name, feature, container) {
     case 'OSM':
       klass = OSM
       break
+    case 'Wikipedia':
+      klass = Wikipedia
+      break
   }
   const content = new klass()
-  return content.render(feature, container)
+  return await content.render(feature, container)
 }
 
 class PopupTemplate {
@@ -35,6 +39,7 @@ class PopupTemplate {
       feature.properties.description || '',
       properties
     )
+    properties.name = properties.name ?? feature.getDisplayName()
     let content = Utils.greedyTemplate(template, properties)
     content = Utils.toHTML(content, { target: target })
     return Utils.loadTemplate(`<div class="umap-popup-container text">${content}</div>`)
@@ -59,7 +64,7 @@ class PopupTemplate {
           feature: nextFeature.properties.name || translate('next'),
         })
         DomEvent.on(next, 'click', () => {
-          nextFeature.zoomTo({ callback: nextFeature.view })
+          nextFeature.zoomTo({ callback: (event) => nextFeature.view(event) })
         })
       }
       if (previousFeature) {
@@ -67,7 +72,7 @@ class PopupTemplate {
           feature: previousFeature.properties.name || translate('previous'),
         })
         DomEvent.on(previous, 'click', () => {
-          previousFeature.zoomTo({ callback: previousFeature.view })
+          previousFeature.zoomTo({ callback: (event) => previousFeature.view(event) })
         })
       }
       DomEvent.on(zoom, 'click', () => feature.zoomTo())
@@ -75,10 +80,10 @@ class PopupTemplate {
     }
   }
 
-  render(feature, container) {
+  async render(feature, container) {
     const title = this.renderTitle(feature)
     if (title) container.appendChild(title)
-    const body = this.renderBody(feature)
+    const body = await this.renderBody(feature)
     if (body) DomUtil.add('div', 'umap-popup-content', container, body)
     const footer = this.renderFooter(feature)
     if (footer) container.appendChild(footer)
@@ -110,11 +115,13 @@ class Table extends TitleMixin(PopupTemplate) {
     )
   }
 
-  renderBody(feature) {
+  async renderBody(feature) {
     const table = document.createElement('table')
 
     for (const key in feature.properties) {
-      if (typeof feature.properties[key] === 'object' || key === 'name') continue
+      if (typeof feature.properties[key] === 'object' || U.LABEL_KEYS.includes(key)) {
+        continue
+      }
       table.appendChild(this.makeRow(feature, key))
     }
     return table
@@ -122,7 +129,7 @@ class Table extends TitleMixin(PopupTemplate) {
 }
 
 class GeoRSSImage extends TitleMixin(PopupTemplate) {
-  renderBody(feature) {
+  async renderBody(feature) {
     const body = DomUtil.create('a')
     body.href = feature.properties.link
     body.target = '_blank'
@@ -139,7 +146,7 @@ class GeoRSSImage extends TitleMixin(PopupTemplate) {
 }
 
 class GeoRSSLink extends PopupTemplate {
-  renderBody(feature) {
+  async renderBody(feature) {
     if (feature.properties.link) {
       return Utils.loadTemplate(
         `<a href="${feature.properties.link}" target="_blank"><h3>${feature.getDisplayName()}</h3></a>`
@@ -148,7 +155,20 @@ class GeoRSSLink extends PopupTemplate {
   }
 }
 
-class OSM extends TitleMixin(PopupTemplate) {
+class OSM extends PopupTemplate {
+  renderTitle(feature) {
+    const title = DomUtil.add('h3', 'popup-title')
+    const color = feature.getPreviewColor()
+    title.style.backgroundColor = color
+    const iconUrl = feature.getDynamicOption('iconUrl')
+    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'
+    DomUtil.add('span', '', title, this.getName(feature))
+    return title
+  }
+
   getName(feature) {
     const props = feature.properties
     const locale = getLocale()
@@ -156,18 +176,10 @@ class OSM extends TitleMixin(PopupTemplate) {
     return props.name
   }
 
-  renderBody(feature) {
+  async renderBody(feature) {
     const props = feature.properties
     const body = document.createElement('div')
-    const title = DomUtil.add('h3', 'popup-title', container)
-    const color = feature.getPreviewColor()
-    title.style.backgroundColor = color
-    const iconUrl = feature.getDynamicOption('iconUrl')
-    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'
-    DomUtil.add('span', '', title, this.getName(feature))
+    const locale = getLocale()
     const street = props['addr:street']
     if (street) {
       const row = DomUtil.add('address', 'address', body)
@@ -204,6 +216,21 @@ class OSM extends TitleMixin(PopupTemplate) {
         Utils.loadTemplate(`<div><a href="mailto:${email}">${email}</a></div>`)
       )
     }
+    if (props.panoramax) {
+      body.appendChild(
+        Utils.loadTemplate(
+          `<div><img src="https://api.panoramax.xyz/api/pictures/${props.panoramax}/sd.jpg" /></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>`
+        )
+      )
+    }
     const id = props['@id'] || props.id
     if (id) {
       body.appendChild(
@@ -215,3 +242,43 @@ class OSM extends TitleMixin(PopupTemplate) {
     return body
   }
 }
+
+const _WIKIPEDIA_CACHE = {}
+
+class Wikipedia extends PopupTemplate {
+  async callWikipedia(wikipedia) {
+    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 request = new Request()
+    const response = await request.get(url)
+    if (response?.ok) {
+      const data = await response.json()
+      _WIKIPEDIA_CACHE[wikipedia] = data
+      return data
+    }
+  }
+
+  async renderBody(feature) {
+    const body = document.createElement('div')
+    const wikipedia = feature.properties.wikipedia
+    if (!wikipedia) return ''
+    const data = await this.callWikipedia(wikipedia)
+    if (data) {
+      const page = Object.values(data.query.pages)[0]
+      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>`
+      )
+      if (thumbnail) {
+        image.src = thumbnail
+        image.hidden = false
+      }
+      body.appendChild(content)
+    }
+    return body
+  }
+}