umap-project 2.7.3__py3-none-any.whl → 2.8.0a0__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 () {
+    const callback = (tilelayer) => {
+      this.options.tilelayer = tilelayer.toJSON()
+      this._umap.isDirty = true
+    }
+    if (this._controls.tilelayersChooser) {
+      this._controls.tilelayersChooser.openSwitcher({ callback, 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', (e) => this.fire('dataloading', e))
+      DomEvent.on(document.body, 'dataload', (e) => this.fire('dataload', e))
+      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

@@ -44,7 +44,8 @@ const Popup = BasePopup.extend({
     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 +62,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 +79,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

@@ -35,6 +35,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 +60,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 +68,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())
@@ -114,7 +115,9 @@ class Table extends TitleMixin(PopupTemplate) {
     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
@@ -149,6 +152,19 @@ class GeoRSSLink extends PopupTemplate {
 }
 
 class OSM extends TitleMixin(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()
@@ -159,15 +175,7 @@ class OSM extends TitleMixin(PopupTemplate) {
   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 +212,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(

umap/static/umap/js/modules/rendering/ui.js

@@ -52,7 +52,7 @@ const FeatureMixin = {
   onClick: function (event) {
     if (this._map.measureTools?.enabled()) return
     this._popupHandlersAdded = true // Prevent leaflet from managing event
-    if (!this._map.editEnabled) {
+    if (!this._map._umap.editEnabled) {
       this.feature.view(event)
     } else if (!this.feature.isReadOnly()) {
       if (event.originalEvent.shiftKey) {
@@ -75,7 +75,7 @@ const FeatureMixin = {
 
   resetTooltip: function () {
     if (!this.feature.hasGeom()) return
-    const displayName = this.feature.getDisplayName(null)
+    const displayName = this.feature.getDisplayName()
     let showLabel = this.feature.getOption('showLabel')
     const oldLabelHover = this.feature.getOption('labelHover')
 
@@ -96,8 +96,8 @@ const FeatureMixin = {
     DomEvent.stop(event)
     const items = this.feature
       .getContextMenuItems(event)
-      .concat(this._map.getContextMenuItems(event))
-    this._map.contextmenu.open(event.originalEvent, items)
+      .concat(this._map._umap.getSharedContextMenuItems(event))
+    this._map._umap.contextmenu.open(event.originalEvent, items)
   },
 
   onCommit: function () {
@@ -134,7 +134,7 @@ const PointMixin = {
 
   _enableDragging: function () {
     // TODO: start dragging after 1 second on mouse down
-    if (this._map.editEnabled) {
+    if (this._map._umap.editEnabled) {
       if (!this.editEnabled()) this.enableEdit()
       // Enabling dragging on the marker override the Draggable._OnDown
       // event, which, as it stopPropagation, refrain the call of
@@ -146,7 +146,7 @@ const PointMixin = {
   },
 
   _disableDragging: function () {
-    if (this._map.editEnabled) {
+    if (this._map._umap.editEnabled) {
       if (this.editor?.drawing) return // when creating a new marker, the mouse can trigger the mouseover/mouseout event
       // do not listen to them
       this.disableEdit()
@@ -253,21 +253,26 @@ export const LeafletMarker = Marker.extend({
 const PathMixin = {
   _onMouseOver: function () {
     if (this._map.measureTools?.enabled()) {
-      this._map.tooltip.open({ content: this.getMeasure(), anchor: this })
-    } else if (this._map.editEnabled && !this._map.editedFeature) {
-      this._map.tooltip.open({ content: translate('Click to edit'), anchor: this })
+      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,
+      })
     }
   },
 
   makeGeometryEditable: function () {
-    if (this._map.editedFeature !== this.feature) {
+    if (this._map._umap.editedFeature !== this.feature) {
       this.disableEdit()
       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()) {
-      this._map.tooltip.open({ content: L._('Please zoom in to edit the geometry') })
+      this._map._umap.tooltip.open({
+        content: L._('Please zoom in to edit the geometry'),
+      })
       this.disableEdit()
     } else {
       this.enableEdit()
@@ -380,10 +385,50 @@ export const LeafletPolyline = Polyline.extend({
   },
 
   getMeasure: function (shape) {
+    let shapes
+    if (shape) {
+      shapes = [shape]
+    } else if (LineUtil.isFlat(this._latlngs)) {
+      shapes = [this._latlngs]
+    } else {
+      shapes = this._latlngs
+    }
     // FIXME: compute from data in feature (with TurfJS)
-    const length = L.GeoUtil.lineLength(this._map, shape || this._defaultShape())
+    const length = shapes.reduce(
+      (acc, shape) => acc + L.GeoUtil.lineLength(this._map, shape),
+      0
+    )
     return L.GeoUtil.readableDistance(length, this._map.measureTools.getMeasureUnit())
   },
+
+  getElevation: function () {
+    const lineElevation = (latlngs) => {
+      let gain = 0
+      let loss = 0
+      for (let i = 0, n = latlngs.length - 1; i < n; i++) {
+        const fromAlt = latlngs[i].alt
+        const toAlt = latlngs[i + 1].alt
+        if (fromAlt === undefined || toAlt === undefined) continue
+        if (fromAlt > toAlt) loss += fromAlt - toAlt
+        else gain += toAlt - fromAlt
+      }
+      return [gain, loss]
+    }
+    let shapes
+    if (LineUtil.isFlat(this._latlngs)) {
+      shapes = [this._latlngs]
+    } else {
+      shapes = this._latlngs
+    }
+    let totalGain = 0
+    let totalLoss = 0
+    for (const shape of shapes) {
+      const [gain, loss] = lineElevation(shape)
+      totalGain += gain
+      totalLoss += loss
+    }
+    return [Math.round(totalGain), Math.round(totalLoss)]
+  },
 })
 
 export const LeafletPolygon = Polygon.extend({