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

umap/static/umap/js/modules/importers/datasets.js

@@ -1,5 +1,5 @@
-import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
+import * as DOMUtils from '../domutils.js'
 
 export class Importer {
   constructor(map, options) {
@@ -9,20 +9,20 @@ export class Importer {
   }
 
   async open(importer) {
-    const container = DomUtil.create('div', 'formbox')
-    DomUtil.element({ tagName: 'h3', textContent: this.name, parent: container })
-    const select = DomUtil.create('select', '', container)
-    const noPreset = DomUtil.element({
-      tagName: 'option',
-      parent: select,
-      value: '',
-      textContent: translate('Choose a dataset'),
-    })
+    const [container, { select }] = DOMUtils.loadTemplateWithRefs(`
+      <div class="formbox">
+        <h3>${this.name}</h3>
+        <select data-ref="select">
+          <option value="">${translate('Choose a dataset')}</option>
+        </select>
+      </div>
+    `)
+
     for (const dataset of this.choices) {
-      const option = DomUtil.create('option', '', select)
-      option.value = dataset.url
-      option.textContent = dataset.label
-      option.dataset.format = dataset.format || 'geojson'
+      const option = DOMUtils.loadTemplate(
+        `<option value="${dataset.url}" data-format="${dataset.format || 'geojson'}">${dataset.label}</option>`
+      )
+      select.appendChild(option)
     }
     const confirm = () => {
       if (select.value) {

umap/static/umap/js/modules/importers/geodatamine.js

@@ -1,8 +1,8 @@
-import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../../components/alerts/alert.js'
 import { BaseAjax, SingleMixin } from '../autocomplete.js'
 import { translate } from '../i18n.js'
 import * as Utils from '../utils.js'
+import * as DOMUtils from '../domutils.js'
 
 const BOUNDARY_TYPES = {
   admin_6: 'département',
@@ -14,18 +14,20 @@ const BOUNDARY_TYPES = {
 }
 
 const TEMPLATE = `
-  <h3>GeoDataMine</h3>
-  <p>${translate('GeoDataMine: thematic data from OpenStreetMap')}.</p>
-  <div class="formbox">
-    <select name="theme">
-      <option value="">${translate('Choose a theme')}</option>
-    </select>
-    <label>
-      <input type="checkbox" name="aspoint" />
-      ${translate('Simplify all geometries to points')}
-    </label>
-    <label id="boundary">
-    </label>
+  <div>
+    <h3>GeoDataMine</h3>
+    <p>${translate('GeoDataMine: thematic data from OpenStreetMap')}.</p>
+    <div class="formbox">
+      <select name="theme" data-ref="select">
+        <option value="">${translate('Choose a theme')}</option>
+      </select>
+      <label>
+        <input type="checkbox" name="aspoint" />
+        ${translate('Simplify all geometries to points')}
+      </label>
+      <label id="boundary">
+      </label>
+    </div>
   </div>
 `
 
@@ -49,20 +51,16 @@ export class Importer {
   async open(importer) {
     let boundary = null
     let boundaryName = null
-    const container = DomUtil.create('div')
-    container.innerHTML = TEMPLATE
+    const [container, { select }] = DOMUtils.loadTemplateWithRefs(TEMPLATE)
     const response = await this.umap.request.get(`${this.baseUrl}/themes`)
-    const select = container.querySelector('select')
     if (response?.ok) {
       const { themes } = await response.json()
       themes.sort((a, b) => Utils.naturalSort(a['name:fr'], b['name:fr']))
       for (const theme of themes) {
-        DomUtil.element({
-          tagName: 'option',
-          value: theme.id,
-          textContent: theme['name:fr'],
-          parent: select,
-        })
+        const option = DOMUtils.loadTemplate(
+          `<option value="${theme.id}">${theme['name:fr']}</option>`
+        )
+        select.appendChild(option)
       }
     } else {
       console.error(response)

umap/static/umap/js/modules/importers/opendata.js

@@ -63,6 +63,16 @@ const PORTALS = [
     url: 'https://admin.geospm.com',
     platform: 'prodige',
   },
+  {
+    name: 'SNCF',
+    url: 'https://ressources.data.sncf.com',
+    platform: 'opendatasoft',
+  },
+  {
+    name: 'Réseau STAR Rennes',
+    url: 'https://data.explore.star.fr',
+    platform: 'opendatasoft',
+  },
   {
     name: 'Toulouse Métropole',
     url: 'https://data.toulouse-metropole.fr',

umap/static/umap/js/modules/importers/overpass.js

@@ -1,22 +1,24 @@
-import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../../components/alerts/alert.js'
 import { BaseAjax, SingleMixin } from '../autocomplete.js'
 import { translate } from '../i18n.js'
+import * as DOMUtils from '../domutils.js'
 
 const TEMPLATE = `
-  <h3>Overpass</h3>
-  <label>
-    <span data-help="overpassImporter">${translate('Expression')}</span>
-    <input type="text" placeholder="amenity=drinking_water" name="tags" />
-  </label>
-  <label>
-    ${translate('Geometry mode')}
-    <select name="out">
-      <option value="geom" selected>${translate('Default')}</option>
-      <option value="center">${translate('Only geometry centers')}</option>
-    </select>
-  </label>
-  <label id="area"><span>${translate('Search area')}</span></label>
+  <div>
+    <h3>Overpass</h3>
+    <label>
+      <span data-help="overpassImporter">${translate('Expression')}</span>
+      <input type="text" placeholder="amenity=drinking_water" name="tags" data-ref="tags" />
+    </label>
+    <label>
+      ${translate('Geometry mode')}
+      <select name="out">
+        <option value="geom" selected>${translate('Default')}</option>
+        <option value="center">${translate('Only geometry centers')}</option>
+      </select>
+    </label>
+    <label data-ref="area" id="area"><span>${translate('Search area')}</span></label>
+  </div>
 `
 
 class Autocomplete extends SingleMixin(BaseAjax) {
@@ -57,12 +59,11 @@ export class Importer {
   }
 
   async open(importer) {
-    const container = DomUtil.create('div')
-    container.innerHTML = TEMPLATE
+    const [container, { area, tags }] = DOMUtils.loadTemplateWithRefs(TEMPLATE)
     if (this.expression) {
-      container.querySelector('[name=tags]').value = this.expression
+      tags.value = this.expression
     }
-    this.autocomplete = new Autocomplete(container.querySelector('#area'), {
+    this.autocomplete = new Autocomplete(area, {
       url: this.searchUrl,
       placeholder: translate(
         'Type area name, or let empty to load data in current map view'

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

@@ -7,7 +7,7 @@ export class DataLayerManager extends Object {
   active() {
     return Object.values(this)
       .filter((datalayer) => !datalayer.isDeleted)
-      .sort((a, b) => a.rank > b.rank)
+      .sort((a, b) => a.rank - b.rank)
   }
   reverse() {
     return this.active().reverse()

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

@@ -1,4 +1,3 @@
-import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../components/alerts/alert.js'
 import { MutatingForm } from './form/builder.js'
 import { translate } from './i18n.js'
@@ -127,7 +126,11 @@ export class MapPermissions {
       ])
       collaboratorsFields.push([
         'properties.owner',
-        { handler: 'ManageOwner', label: translate("Map's owner") },
+        {
+          handler: 'ManageOwner',
+          label: translate("Map's owner"),
+          url: this._umap.properties.urls.agnocomplete,
+        },
       ])
       if (this._umap.properties.user?.teams?.length) {
         collaboratorsFields.push([
@@ -142,7 +145,11 @@ export class MapPermissions {
     }
     collaboratorsFields.push([
       'properties.editors',
-      { handler: 'ManageEditors', label: translate("Map's editors") },
+      {
+        handler: 'ManageEditors',
+        label: translate("Map's editors"),
+        url: this._umap.properties.urls.agnocomplete,
+      },
     ])
 
     const builder = new MutatingForm(this, topFields)
@@ -177,8 +184,11 @@ export class MapPermissions {
       Alert.info(translate('Please save the map first'))
       return
     }
-    const container = DomUtil.create('div', 'umap-edit-permissions')
-    DomUtil.createTitle(container, translate('Update permissions'), 'icon-key')
+    const container = DOMUtils.loadTemplate(`
+      <div class="umap-edit-permissions">
+        <h3><i class="icon icon-16 icon-key"></i> ${translate('Update permissions')}</h3>
+      </div>
+    `)
     if (this.isAnonymousMap()) this._editAnonymous(container)
     else this._editWithOwner(container)
     this._editDatalayers(container)

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

@@ -1,6 +1,17 @@
-import { Control } 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) => {},
 })
@@ -221,7 +235,7 @@ export const SearchControl = BaseButton.extend({
   },
 
   afterAdd(container, map) {
-    this.layer = L.layerGroup().addTo(map)
+    this.layer = new LayerGroup().addTo(map)
     this.photonOptions = {
       limit: 10,
       noResultLabel: translate('No results'),
@@ -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/icon.js

@@ -237,14 +237,7 @@ const Ball = DefaultIcon.extend({
   _setIconStyles: function (img, name) {
     BaseIcon.prototype._setIconStyles.call(this, img, name)
     const color = this._getColor('color')
-    let background
-    if (L.Browser.ielt9) {
-      background = color
-    } else if (L.Browser.webkit) {
-      background = `-webkit-gradient( radial, 6 38%, 0, 6 38%, 8, from(white), to(${color}) )`
-    } else {
-      background = `radial-gradient(circle at 6px 38% , white -4px, ${color} 8px) repeat scroll 0 0 transparent`
-    }
+    const background = `radial-gradient(circle at 6px 38% , white -4px, ${color} 8px) repeat scroll 0 0 transparent`
     this.elements.ball.style.background = background
     this.elements.ball.style.opacity = this._getOpacity()
   },
@@ -309,5 +302,8 @@ export function setContrast(icon, parent, src, bgcolor) {
 }
 
 export function formatUrl(url, feature) {
-  return Utils.greedyTemplate(url || '', feature ? feature.extendedProperties() : {})
+  if (Utils.hasVar(url)) {
+    return Utils.greedyTemplate(url || '', feature ? feature.extendedProperties() : {})
+  }
+  return url
 }

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

@@ -53,7 +53,7 @@ export const LayerMixin = {
   },
 
   onZoomEnd() {
-    if (!this.datalayer.autoLoaded) return
+    if (!this.datalayer.autoVisibility) return
     if (!this.datalayer.showAtZoom() && this.datalayer.isVisible()) {
       this.datalayer.hide()
     }

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

@@ -1,5 +1,5 @@
 import colorbrewer from '../../../../vendors/colorbrewer/colorbrewer.js'
-import { DomUtil, FeatureGroup } from '../../../../vendors/leaflet/leaflet-src.esm.js'
+import { FeatureGroup } from '../../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../../i18n.js'
 import * as Utils from '../../utils.js'
 import * as DOMUtils from '../../domutils.js'
@@ -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(`
@@ -346,7 +346,8 @@ export const Circles = FeatureGroup.extend({
   },
 
   renderLegend: function (container) {
-    const parent = DomUtil.create('ul', 'circles-layer-legend', container)
+    const parent = DOMUtils.loadTemplate('<ul class="circles-layer-legend"></ul>')
+    container.appendChild(parent)
     const color = this.datalayer.getProperty('color')
     const values = this.getValues()
     if (!values.length) return
@@ -360,14 +361,18 @@ export const Circles = FeatureGroup.extend({
       [this.options.maxPX, maxValue],
     ]
     for (const [size, label] of items) {
-      const li = DomUtil.create('li', '', parent)
-      const circleEl = DomUtil.create('span', 'circle', li)
-      circleEl.style.backgroundColor = color
-      circleEl.style.height = `${size * 2}px`
-      circleEl.style.width = `${size * 2}px`
-      circleEl.style.opacity = this.datalayer.getProperty('opacity')
-      const labelEl = DomUtil.create('span', 'label', li)
-      labelEl.textContent = label
+      parent.appendChild(
+        DOMUtils.loadTemplate(`
+        <li>
+          <span class="circle"
+                style="background-color: ${color};
+                       height: ${size * 2}px;
+                       width: ${size * 2}px;
+                       opacity: ${this.datalayer.getProperty('fillOpacity')};"></span>
+          <span class="label">${label}</span>
+        </li>
+      `)
+      )
     }
   },
 })

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

@@ -102,6 +102,7 @@ export const Heat = L.HeatLayer.extend({
     }
     if (field === 'properties.heat.radius') {
       this.options.radius = this.datalayer.properties.heat.radius
+      this.redraw()
     }
     this._updateOptions()
   },