umap-project 3.4.2__py3-none-any.whl → 3.6.1__py3-none-any.whl

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

@@ -1,6 +1,17 @@
-import { Control, LayerGroup } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import {
+  Control,
+  LayerGroup,
+  latLng,
+  Icon,
+  Marker,
+} from '../../../vendors/leaflet/leaflet-src.esm.js'
+import {
+  PhotonSearch,
+  PhotonReverse,
+} from '../../../vendors/photon/leaflet.photon.esm.js'
 import * as Utils from '../utils.js'
 import { translate } from '../i18n.js'
+import { uMapAlert as Alert } from '../../components/alerts/alert.js'
 
 export const HomeControl = Control.extend({
   options: {
@@ -9,8 +20,9 @@ export const HomeControl = Control.extend({
 
   onAdd: (map) => {
     const path = map._umap.getStaticPathFor('home.svg')
+    const homeURL = map._umap.urls.get('home')
     const container = Utils.loadTemplate(
-      `<a href="/" class="home-button" title="${translate('Back to home')}"><img src="${path}" alt="${translate('Home logo')}" width="38px" height="38px" /></a>`
+      `<a href="${homeURL}" class="home-button" title="${translate('Back to home')}"><img src="${path}" alt="${translate('Home logo')}" width="38px" height="38px" /></a>`
     )
     return container
   },
@@ -124,6 +136,7 @@ const BaseButton = Control.extend({
   initialize: function (umap, options) {
     this._umap = umap
     Control.prototype.initialize.call(this, options)
+    this.afterInit()
   },
 
   onAdd: function (map) {
@@ -153,6 +166,7 @@ const BaseButton = Control.extend({
     this.afterRemove(map)
   },
 
+  afterInit: () => {},
   afterAdd: (container, map) => {},
   afterRemove: (map) => {},
 })
@@ -244,7 +258,7 @@ export const SearchControl = BaseButton.extend({
     const [container, { input, resultsContainer }] =
       Utils.loadTemplateWithRefs(template)
     const id = Math.random()
-    this.search = new U.Search(
+    this.search = new Search(
       this._umap._leafletMap,
       input,
       this.layer,
@@ -252,10 +266,10 @@ export const SearchControl = BaseButton.extend({
     )
     this._umap.panel.open({ content: container }).then(() => {
       this.search.on('ajax:send', () => {
-        this._umap.fire('dataloading', { id: id })
+        this._umap.loader.start(id)
       })
       this.search.on('ajax:return', () => {
-        this._umap.fire('dataload', { id: id })
+        this._umap.loader.stop(id)
       })
       this.search.resultsContainer = resultsContainer
       input.focus()
@@ -282,19 +296,16 @@ export const AttributionControl = Control.Attribution.extend({
         ${originalCredits}
         <span data-ref="short"> — ${Utils.toHTML(shortCredit)}</span>
         <a  href="#" data-ref="caption"> — ${translate('Open caption')}</a>
-        <a href="/" data-ref="home"> — ${translate('Home')}</a>
         <a href="https://umap-project.org/" data-ref="site"> — ${translate('Powered by uMap')}</a>
         <a href="#" class="attribution-toggle"></a>
       </div>
     `
-    const [container, { short, caption, home, site }] =
-      Utils.loadTemplateWithRefs(template)
+    const [container, { short, caption, site }] = Utils.loadTemplateWithRefs(template)
     caption.addEventListener('click', () => this._map._umap.openCaption())
     this._container.appendChild(container)
     short.hidden = !shortCredit
     caption.hidden = !captionMenus
     site.hidden = !captionMenus
-    home.hidden = this._map._umap.isEmbed || !captionMenus
   },
 })
 
@@ -359,3 +370,185 @@ export const TileLayerChooser = BaseButton.extend({
     return li
   },
 })
+
+export const LocateControl = BaseButton.extend({
+  options: {
+    position: 'topleft',
+    title: translate('Center map on your location'),
+    icon: 'icon-locate',
+  },
+
+  async start() {
+    await this.loadPlugin()
+    this._locate.start()
+  },
+
+  stop() {
+    this._locate?.stop()
+  },
+
+  async loadPlugin() {
+    if (this._locate) return
+    const { LocateControl } = await import(
+      '../../../vendors/locatecontrol/L.Control.Locate.esm.js'
+    )
+    this._locate = new LocateControl({
+      strings: {
+        title: translate('Center map on your location'),
+      },
+      showPopup: false,
+      flyTo: this.options.easing,
+      onLocationError: (err) => Alert.error(err.message),
+    })
+    this._locate._map = this._umap._leafletMap
+    this._locate.onAdd(this._umap._leafletMap)
+  },
+
+  async onClick() {
+    if (this._locate?._active) {
+      this.stop()
+    } else {
+      this.start()
+    }
+  },
+
+  afterRemove() {
+    this.stop()
+  },
+
+  afterInit() {
+    this._umap._leafletMap.on('locateactivate', () => {
+      this._container.classList.add('active')
+    })
+    this._umap._leafletMap.on('locatedeactivate', () => {
+      this._container.classList.remove('active')
+    })
+  },
+})
+
+export const Search = PhotonSearch.extend({
+  initialize: function (map, input, layer, options) {
+    this.options.placeholder = translate('Type a place name or coordinates')
+    this.options.location_bias_scale = 0.5
+    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 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: translate('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 = latLng(lat, lng)
+      if (Utils.LatLngIsValid(latlng)) {
+        this.reverse.doReverse(latlng)
+      } else {
+        Alert.error(translate('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
+    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 }] = Utils.loadTemplateWithRefs(`
+      <span class="search-result-tools">
+        <button type="button" title="${translate('Add this geometry to my map')}" data-ref=geom><i class="icon icon-16 icon-polygon-plus"></i></button>
+        <button type="button" title="${translate('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 = 'geojson'
+      importer.raw = await this.getOSMObject(osm_type, osm_id)
+      importer.submit()
+    })
+    el.appendChild(tools)
+    this._formatResult(feature, el)
+    const path = this.map._umap.getStaticPathFor('target.svg')
+    const icon = new Icon({
+      iconUrl: path,
+      iconSize: [24, 24],
+      iconAnchor: [12, 12],
+    })
+    const coords = feature.geometry.coordinates
+    const target = new Marker([coords[1], coords[0]], { icon })
+    el.addEventListener('mouseover', (event) => {
+      target.addTo(this.layer)
+    })
+    el.addEventListener('mouseout', (event) => {
+      target.removeFrom(this.layer)
+    })
+  },
+
+  async getOSMObject(osm_type, osm_id) {
+    const url = `https://www.openstreetmap.org/api/0.6/${osm_type}/${osm_id}/full`
+    const response = await this.map._umap.request.get(url)
+    if (response?.ok) {
+      const data = await this.map._umap.formatter.fromOSM(await response.text())
+      data.features = data.features.filter(
+        (feature) => feature.properties.id === `${osm_type}/${osm_id}`
+      )
+      return JSON.stringify(data)
+    }
+  },
+
+  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
+      )
+    }
+  },
+})

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

@@ -80,7 +80,7 @@ const ClassifiedMixin = {
     const ul = Utils.loadTemplate('<ul></ul>')
     const items = this.getLegendItems()
     for (const [color, label] of items) {
-      const rgbColor = DOMUtils.hexToRGB(color)
+      const rgbColor = DOMUtils.colorToRGB(color)
       const opacity = this.datalayer.getOption('fillOpacity')
       const bgColor = `rgba(${rgbColor.join(',')}, ${opacity})`
       const li = Utils.loadTemplate(`

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

@@ -7,6 +7,7 @@ import {
   latLng,
   LatLng,
   LatLngBounds,
+  stamp,
   setOptions,
   TileLayer,
 } from '../../../vendors/leaflet/leaflet-src.esm.js'
@@ -20,6 +21,7 @@ import {
   EmbedControl,
   EditControl,
   HomeControl,
+  LocateControl,
   MoreControl,
   PermanentCreditsControl,
   TileLayerChooser,
@@ -69,19 +71,7 @@ const ControlsMixin = {
     })
     this._controls.datalayers = new DataLayersControl(this._umap)
     this._controls.caption = new 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.locate = new LocateControl(this._umap)
     this._controls.fullscreen = new Control.Fullscreen({
       title: {
         false: translate('View Fullscreen'),
@@ -174,7 +164,19 @@ const ManageTilelayerMixin = {
     if (tilelayer === this.selectedTilelayer) {
       return
     }
+    const onLoading = () => {
+      this._umap.loader.start(stamp(tilelayer))
+    }
+    const onLoad = () => {
+      this._umap.loader.stop(stamp(tilelayer))
+    }
     try {
+      tilelayer.on('loading', onLoading)
+      tilelayer.on('load', onLoad)
+      tilelayer.on('remove', () => {
+        tilelayer.off('loading', onLoading)
+        tilelayer.off('load', onLoad)
+      })
       this.addLayer(tilelayer)
       this.fire('baselayerchange', { layer: tilelayer })
       if (this.selectedTilelayer) {
@@ -253,19 +255,13 @@ export const LeafletMap = BaseMap.extend({
 
     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)
-      )
-    }
+    document.body.addEventListener('mapview:update', (event) => {
+      let { zoom, latlng } = event.detail
+      if (!Utils.LatLngIsValid(latlng)) return
+      zoom = Math.min(zoom, this.getMaxZoom())
+      zoom = Math.max(zoom, this.getMinZoom())
+      this.setView(latlng, zoom)
+    })
 
     this.on('baselayerchange', (e) => {
       if (this._controls.miniMap) this._controls.miniMap.onMainMapBaseLayerChange(e)
@@ -276,6 +272,21 @@ export const LeafletMap = BaseMap.extend({
     this.initControls()
     // Needs locate control and hash to exist
     this.initCenter()
+
+    // Wait for URL to have been parsed before modifying the hash
+    const updateHash = () => {
+      const center = this.getCenter()
+      document.body.dispatchEvent(
+        new CustomEvent('mapview:updated', {
+          detail: {
+            zoom: this.getZoom(),
+            latlng: [center.lat.toFixed(6), center.lng.toFixed(6)],
+          },
+        })
+      )
+    }
+    this.on('moveend', updateHash)
+    updateHash()
     this.initTileLayers()
     this.renderUI()
   },
@@ -316,14 +327,13 @@ export const LeafletMap = BaseMap.extend({
     this.setView(this.options.center, this.options.zoom)
   },
 
-  initCenter: function () {
+  initCenter: async function () {
     this._setDefaultCenter()
-    if (this.options.hash) this.addHash()
-    if (this.options.hash && this._hash.parseHash(location.hash)) {
+    if (this.options.hash && window.location.hash) {
       // FIXME An invalid hash will cause the load to fail
-      this._hash.update()
+      this._umap.hash.parse()
     } else if (this.options.defaultView === 'locate' && !this.options.noControl) {
-      this._controls.locate.start()
+      await this._controls.locate.start()
     } else if (this.options.defaultView === 'data') {
       this._umap.onceDataLoaded(this._umap.fitDataBounds)
     } else if (this.options.defaultView === 'latest') {
@@ -343,10 +353,10 @@ export const LeafletMap = BaseMap.extend({
   },
 
   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)
+    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) &&

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

@@ -34,8 +34,7 @@ export default async function loadTemplate(name, feature, container) {
 class PopupTemplate {
   renderTitle(feature) {}
 
-  renderBody(feature) {
-    const template = feature.getOption('popupContentTemplate')
+  toHTML(feature, template) {
     const target = feature.getOption('outlinkTarget')
     const properties = feature.extendedProperties()
     // Resolve properties inside description
@@ -44,9 +43,15 @@ class PopupTemplate {
       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>`)
+    const content = Utils.greedyTemplate(template, properties)
+    return Utils.toHTML(content, { target })
+  }
+
+  renderBody(feature) {
+    const template = feature.getOption('popupContentTemplate')
+    return Utils.loadTemplate(
+      `<div class="umap-popup-container text">${this.toHTML(feature, template)}</div>`
+    )
   }
 
   renderFooter(feature) {
@@ -377,7 +382,8 @@ class Route extends TitleMixin(PopupTemplate) {
       }).addTo(map)
     })
     if (feature.properties.description) {
-      root.appendChild(Utils.loadTemplate(`<p>${feature.properties.description}</p>`))
+      const content = this.toHTML(feature, feature.properties.description)
+      root.appendChild(Utils.loadTemplate(`<p>${content}</p>`))
     }
     return root
   }

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

@@ -69,7 +69,7 @@ class Rule {
     }
     // TODO: deal with legacy rules on non typed fields
     else {
-      this.cast = this.field.parse
+      this.cast = (value) => this.field.parse(value)
       if (
         // Special cases where we want to be lousy when checking isNaN without
         // coercing to a Number first because we handle multiple types.

umap/static/umap/js/modules/ui/bar.js

@@ -9,7 +9,7 @@ import TemplateImporter from '../templates.js'
 const TOP_BAR_TEMPLATE = `
 <div class="umap-main-edit-toolbox with-transition dark">
     <div class="umap-left-edit-toolbox" data-ref="left">
-        <div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div>
+        <div class="logo"><a class="" href="#" title="${translate('Go to the homepage')}" data-ref="home">uMap</a></div>
         <button class="map-name flat truncate" type="button" data-ref="name"></button>
         <button class="flat truncate" type="button" data-ref="share">
           <i class="icon icon-16 icon-draft show-on-draft"></i><span class="share-status"></span>
@@ -59,6 +59,7 @@ export class TopBar extends WithTemplate {
 
   setup() {
     this.parent.appendChild(this.element)
+    this.elements.home.href = this._umap.urls.get('home')
     this.elements.name.addEventListener('mouseover', () => {
       this._umap.tooltip.open({
         content: translate('Edit the title of the map'),

umap/static/umap/js/modules/ui/hash.js

@@ -0,0 +1,36 @@
+export default class Hash {
+  constructor() {
+    document.body.addEventListener('mapview:updated', (event) => {
+      this._updating = true
+      this.update(event.detail)
+    })
+    window.addEventListener('hashchange', () => this.parse())
+  }
+
+  update({ zoom, latlng }) {
+    const [lat, lng] = latlng
+    window.location.hash = `#${zoom}/${lat}/${lng}`
+  }
+
+  parse() {
+    // Do not parse and re-update the map when we change the hash ourselves
+    // after a move from the user.
+    if (this._updating) {
+      this._updating = false
+      return
+    }
+    let hash = window.location.hash
+    if (hash.indexOf('#') === 0) {
+      hash = hash.substr(1)
+    }
+    const args = hash.split('/')
+    if (args.length !== 3) return
+    const zoom = parseInt(args[0], 10)
+    const lat = parseFloat(args[1])
+    const lng = parseFloat(args[2])
+    if (isNaN(zoom) || isNaN(lat) || isNaN(lng)) return
+    document.body.dispatchEvent(
+      new CustomEvent('mapview:update', { detail: { zoom, latlng: [lat, lng] } })
+    )
+  }
+}

umap/static/umap/js/modules/ui/loader.js

@@ -0,0 +1,26 @@
+import { loadTemplate } from '../domutils.js'
+
+export default class Loader {
+  constructor(parent) {
+    this.parent = parent
+    this.element = loadTemplate('<div class="umap-loader"></div>')
+    this.parent.appendChild(this.element)
+    document.body.addEventListener('dataloading', (event) =>
+      this.start(event.detail.id)
+    )
+    document.body.addEventListener('dataload', (event) => this.stop(event.detail.id))
+    this._counter = new Set()
+  }
+
+  start(id) {
+    this._counter.add(id)
+    this.parent.classList.add('umap-loading')
+  }
+
+  stop(id) {
+    this._counter.delete(id)
+    if (!this._counter.size) {
+      this.parent.classList.remove('umap-loading')
+    }
+  }
+}

umap/static/umap/js/modules/ui/panel.js

@@ -98,6 +98,13 @@ export class Panel {
     document.body.classList.remove(`panel-${this.className.split(' ')[0]}-on`)
     this.container.dataset.highlight = null
     this.onClose()
+    Promise.all(
+      this.container.getAnimations?.().map((animation) => animation.finished)
+    ).then(() => {
+      if (!this.isOpen()) {
+        this.container.innerHTML = ''
+      }
+    })
   }
 
   onClose() {

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

@@ -31,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) {
@@ -110,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)

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

@@ -683,10 +683,11 @@ export const COLORS = [
 ]
 
 export const LatLngIsValid = (latlng) => {
+  const [lat, lng] = Array.isArray(latlng) ? latlng : [latlng.lat, latlng.lng]
   return (
-    Number.isFinite(latlng.lat) &&
-    Math.abs(latlng.lat) <= 90 &&
-    Number.isFinite(latlng.lng) &&
-    Math.abs(latlng.lng) <= 180
+    Number.isFinite(lat) &&
+    Math.abs(lat) <= 90 &&
+    Number.isFinite(lng) &&
+    Math.abs(lng) <= 180
   )
 }