umap-project 2.3.1__py3-none-any.whl → 2.4.0b0__py3-none-any.whl

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

@@ -0,0 +1,280 @@
+import { DomUtil, DomEvent } from '../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from './i18n.js'
+import { uMapAlert as Alert } from '../components/alerts/alert.js'
+import Dialog from './ui/dialog.js'
+import { SCHEMA } from './schema.js'
+import * as Utils from './utils.js'
+
+const TEMPLATE = `
+    <h3><i class="icon icon-16 icon-upload"></i><span>${translate('Import data')}</span></h3>
+    <fieldset class="formbox">
+      <legend class="counter">${translate('Choose data')}</legend>
+      <input type="file" multiple autofocus onchange />
+      <input type="url" placeholder="${translate('Provide an URL here')}" onchange />
+      <textarea onchange placeholder="${translate('Paste your data here')}"></textarea>
+      <div class="importers">
+        <h4>${translate('Import helpers:')}</h4>
+        <ul class="grid-container">
+        </ul>
+      </div>
+    </fieldset>
+    <fieldset class="formbox">
+      <legend class="counter" data-help="importFormats">${translate('Choose the format')}</legend>
+      <select name="format" onchange></select>
+    </fieldset>
+    <fieldset id="destination" class="formbox">
+      <legend class="counter">${translate('Choose the layer')}</legend>
+      <select name="layer-id" onchange></select>
+      <label id="clear">
+        <input type="checkbox" name="clear" />
+        ${translate('Replace layer content')}
+      </label>
+      <input type="text" name="layer-name" placeholder="${translate('Layer name')}" />
+    </fieldset>
+    <fieldset id="import-mode" class="formbox">
+      <legend class="counter" data-help="importMode">${translate('Choose import mode')}</legend>
+      <label>
+        <input type="radio" name="action" value="copy" />
+        ${translate('Copy into the layer')}
+      </label>
+      <label>
+        <input type="radio" name="action" value="link" />
+        ${translate('Link to the layer as remote data')}
+      </label>
+    </fieldset>
+    <input type="button" class="button" name="submit" value="${translate('Import data')}" />
+    `
+
+export default class Importer {
+  constructor(map) {
+    this.map = map
+    this.TYPES = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
+    this.IMPORTERS = []
+    this.loadImporters()
+    this.dialog = new Dialog(this.map._controlContainer)
+  }
+
+  loadImporters() {
+    for (const key of Object.keys(this.map.options.importers || {})) {
+      import(`./importers/${key}.js`).then((mod) => {
+        this.IMPORTERS.push(new mod.Importer(this.map, this.map.options.importers[key]))
+      })
+    }
+  }
+
+  qs(query) {
+    return this.container.querySelector(query)
+  }
+
+  get url() {
+    return this.qs('[type=url]').value
+  }
+
+  set url(value) {
+    this.qs('[type=url]').value = value
+    this.onChange()
+  }
+
+  get format() {
+    return this.qs('[name=format]').value
+  }
+
+  set format(value) {
+    this.qs('[name=format]').value = value
+    this.onChange()
+  }
+
+  get files() {
+    return this.qs('[type=file]').files
+  }
+
+  get raw() {
+    return this.qs('textarea').value
+  }
+
+  get clear() {
+    return Boolean(this.qs('[name=clear]').checked)
+  }
+
+  get action() {
+    return this.qs('[name=action]:checked').value
+  }
+
+  get layerId() {
+    return this.qs('[name=layer-id]').value
+  }
+
+  set layerId(value) {
+    this.qs('[name=layer-id]').value = value
+  }
+
+  get layerName() {
+    return this.qs('[name=layer-name]').value
+  }
+
+  set layerName(name) {
+    this.qs('[name=layer-name]').value = name
+    this.onChange()
+  }
+
+  get layer() {
+    return (
+      this.map.datalayers[this.layerId] ||
+      this.map.createDataLayer({ name: this.layerName })
+    )
+  }
+
+  build() {
+    this.container = DomUtil.create('div', 'umap-upload')
+    this.container.innerHTML = TEMPLATE
+    if (this.IMPORTERS.length) {
+      const parent = this.container.querySelector('.importers ul')
+      for (const plugin of this.IMPORTERS.sort((a, b) => (a.id > b.id ? 1 : -1))) {
+        L.DomUtil.createButton(
+          plugin.id,
+          DomUtil.element({tagName: 'li', parent}),
+          plugin.name,
+          () => plugin.open(this)
+        )
+      }
+      this.qs('.importers').toggleAttribute('hidden', false)
+    }
+    for (const type of this.TYPES) {
+      DomUtil.element({
+        tagName: 'option',
+        parent: this.qs('[name=format]'),
+        value: type,
+        textContent: type,
+      })
+    }
+    this.map.help.parse(this.container)
+    DomEvent.on(this.qs('[name=submit]'), 'click', this.submit, this)
+    DomEvent.on(this.qs('[type=file]'), 'change', this.onFileChange, this)
+    for (const element of this.container.querySelectorAll('[onchange]')) {
+      DomEvent.on(element, 'change', this.onChange, this)
+    }
+  }
+
+  onChange() {
+    this.qs('#destination').toggleAttribute('hidden', this.format === 'umap')
+    this.qs('#import-mode').toggleAttribute(
+      'hidden',
+      this.format === 'umap' || !this.url
+    )
+    this.qs('[name=layer-name]').toggleAttribute('hidden', Boolean(this.layerId))
+    this.qs('#clear').toggleAttribute('hidden', !Boolean(this.layerId))
+  }
+
+  onFileChange(e) {
+    let type = '',
+      newType
+    for (const file of e.target.files) {
+      newType = U.Utils.detectFileType(file)
+      if (!type && newType) type = newType
+      if (type && newType !== type) {
+        type = ''
+        break
+      }
+    }
+    this.format = type
+  }
+
+  onLoad() {
+    this.qs('[type=file]').value = null
+    this.url = null
+    this.format = undefined
+    this.layerName = null
+    const layerSelect = this.qs('[name="layer-id"]')
+    layerSelect.innerHTML = ''
+    this.map.eachDataLayerReverse((datalayer) => {
+      if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
+        DomUtil.element({
+          tagName: 'option',
+          parent: layerSelect,
+          textContent: datalayer.options.name,
+          value: L.stamp(datalayer),
+        })
+      }
+    })
+    DomUtil.element({
+      tagName: 'option',
+      value: '',
+      textContent: translate('Import in a new layer'),
+      parent: layerSelect,
+      selected: true,
+    })
+  }
+
+  open() {
+    if (!this.container) this.build()
+    const onLoad = this.map.editPanel.open({ content: this.container })
+    onLoad.then(() => this.onLoad())
+  }
+
+  openFiles() {
+    this.open()
+    this.fileInput.showPicker()
+  }
+
+  submit() {
+    if (this.format === 'umap') this.full()
+    else if (!this.url) this.copy()
+    else if (this.action) this[this.action]()
+  }
+
+  full() {
+    this.map.once('postsync', this.map._setDefaultCenter)
+    try {
+      if (this.files.length) {
+        for (const file of this.files) {
+          this.map.processFileToImport(file, null, 'umap')
+        }
+      } else if (this.raw) {
+        this.map.importRaw(this.raw)
+      } else if (this.url) {
+        this.map.importFromUrl(this.url, this.format)
+      }
+    } catch (e) {
+      Alert.error(translate('Invalid umap data'))
+      console.error(e)
+    }
+  }
+
+  link() {
+    if (!this.url) return
+    if (!this.format) {
+      Alert.error(translate('Please choose a format'))
+      return
+    }
+    let layer = this.layer
+    layer.options.remoteData = {
+      url: this.url,
+      format: this.format,
+    }
+    if (this.map.options.urls.ajax_proxy) {
+      layer.options.remoteData.proxy = true
+      layer.options.remoteData.ttl = SCHEMA.ttl.default
+    }
+    layer.fetchRemoteData(true)
+  }
+
+  copy() {
+    // Format may be guessed from file later.
+    // Usefull in case of multiple files with different formats.
+    if (!this.format && !this.files.length) {
+      Alert.error(translate('Please choose a format'))
+      return
+    }
+    let layer = this.layer
+    if (this.clear) layer.empty()
+    if (this.files.length) {
+      for (const file of this.files) {
+        this.map.processFileToImport(file, layer, this.format)
+      }
+    } else if (this.raw) {
+      layer.importRaw(this.raw, this.format)
+    } else if (this.url) {
+      layer.importFromUrl(this.url, this.format)
+    }
+  }
+}

umap/static/umap/js/modules/importers/communesfr.js

@@ -0,0 +1,44 @@
+import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { BaseAjax, SingleMixin } from '../autocomplete.js'
+
+class Autocomplete extends SingleMixin(BaseAjax) {
+  createResult(item) {
+    return super.createResult({
+      value: item.code,
+      label: `${item.nom} (${item.code})`,
+    })
+  }
+}
+
+export class Importer {
+  constructor(map, options) {
+    this.name = options.name || 'Communes'
+    this.id = 'communesfr'
+  }
+
+  async open(importer) {
+    const container = DomUtil.create('div')
+    DomUtil.createTitle(container, this.name)
+    DomUtil.element({
+      tagName: 'p',
+      parent: container,
+      textContent: "Importer les contours d'une commune française.",
+    })
+    const options = {
+      placeholder: 'Commune…',
+      url: 'https://geo.api.gouv.fr/communes?nom={q}&limit=5',
+      on_select: (choice) => {
+        importer.url = `https://geo.api.gouv.fr/communes?code=${choice.item.value}&format=geojson&geometry=contour`
+        importer.format = 'geojson'
+        importer.layerName = choice.item.label
+        importer.dialog.close()
+      },
+    }
+    this.autocomplete = new Autocomplete(container, options)
+
+    importer.dialog.open({
+      content: container,
+      className: `${this.id} importer dark`,
+    })
+  }
+}

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

@@ -0,0 +1,41 @@
+import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from '../i18n.js'
+
+export class Importer {
+  constructor(map, options) {
+    this.name = options.name || 'Datasets'
+    this.choices = options?.choices
+    this.id = 'datasets'
+  }
+
+  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'),
+    })
+    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 confirm = () => {
+      if (select.value) {
+        importer.url = select.value
+        importer.format = select.options[select.selectedIndex].dataset.format
+      }
+      importer.dialog.close()
+    }
+    L.DomUtil.createButton('', container, translate('Choose this dataset'), confirm)
+
+    importer.dialog.open({
+      content: container,
+      className: `${this.id} importer dark`,
+    })
+  }
+}

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

@@ -0,0 +1,95 @@
+import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { BaseAjax, SingleMixin } from '../autocomplete.js'
+import { translate } from '../i18n.js'
+import * as Utils from '../utils.js'
+import { uMapAlert as Alert } from '../../components/alerts/alert.js'
+
+const BOUNDARY_TYPES = {
+  admin_6: 'département',
+  admin_7: 'pays (loi Voynet)',
+  admin_8: 'commune',
+  admin_9: 'quartier, hameau, arrondissement',
+  political: 'canton',
+  local_authority: 'EPCI',
+}
+
+const TEMPLATE = `
+  <h3>GeoDataMine</h3>
+  <p>${translate('GeoDataMine: thematic data from OpenStreetMap')}.</p>
+  <select name="theme">
+    <option value="">${translate('Choose a theme')}</option>
+  </select>
+  <label>
+    <input type="checkbox" name="aspoint" />
+    ${translate('Symplify all geometries to points')}
+  </label>
+  <label id="boundary">
+  </label>
+  <button class="button">${translate('Choose this data')}</button>
+`
+
+class Autocomplete extends SingleMixin(BaseAjax) {
+  createResult(item) {
+    return super.createResult({
+      value: item.id,
+      label: `${item.name} (${BOUNDARY_TYPES[item.type]} — ${item.ref})`,
+    })
+  }
+}
+
+export class Importer {
+  constructor(map, options = {}) {
+    this.map = map
+    this.name = options.name || 'GeoDataMine'
+    this.baseUrl = options?.url || 'https://geodatamine.fr'
+    this.id = 'geodatamine'
+  }
+
+  async open(importer) {
+    let boundary = null
+    let boundaryName = null
+    const container = DomUtil.create('div')
+    container.innerHTML = TEMPLATE
+    const response = await importer.map.request.get(`${this.baseUrl}/themes`)
+    const select = container.querySelector('select')
+    if (response && 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,
+        })
+      }
+    } else {
+      console.error(response)
+    }
+    const asPoint = container.querySelector('[name=aspoint]')
+    this.autocomplete = new Autocomplete(container.querySelector('#boundary'), {
+      placeholder: translate('Search admin boundary'),
+      url: `${this.baseUrl}/boundaries/search?text={q}`,
+      on_select: (choice) => {
+        boundary = choice.item.value
+        boundaryName = choice.item.label
+      },
+    })
+    const confirm = () => {
+      if (!boundary || !select.value) {
+        Alert.error(translate('Please choose a theme and a boundary first.'))
+        return
+      }
+      importer.url = `${this.baseUrl}/data/${select.value}/${boundary}?format=geojson&aspoint=${asPoint.checked}`
+      importer.format = 'geojson'
+      importer.layerName = `${boundaryName} — ${select.options[select.selectedIndex].textContent}`
+      importer.dialog.close()
+    }
+    DomEvent.on(container.querySelector('button'), 'click', confirm)
+
+    importer.dialog.open({
+      content: container,
+      className: `${this.id} importer dark`,
+    })
+  }
+}

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

@@ -0,0 +1,84 @@
+import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { BaseAjax, SingleMixin } from '../autocomplete.js'
+import { translate } from '../i18n.js'
+import { uMapAlert as Alert } from '../../components/alerts/alert.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-mode">
+      <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>
+`
+
+class Autocomplete extends SingleMixin(BaseAjax) {
+  handleResults(data) {
+    return super.handleResults(data.features)
+  }
+
+  createResult(item) {
+    return super.createResult({
+      // Overpass convention to get their id from an osm one.
+      value: item.properties.osm_id + 3600000000,
+      label: `${item.properties.name}`,
+    })
+  }
+}
+
+export class Importer {
+  constructor(map, options) {
+    this.map = map
+    this.name = options.name || 'Overpass'
+    this.baseUrl = options?.url || 'https://overpass-api.de/api/interpreter'
+    this.id = 'overpass'
+  }
+
+  async open(importer) {
+    let boundary = null
+    let boundaryName = null
+    const container = DomUtil.create('div')
+    container.innerHTML = TEMPLATE
+    this.autocomplete = new Autocomplete(container.querySelector('#area'), {
+      url: 'https://photon.komoot.io/api?q={q}&osm_tag=place',
+      placeholder: translate(
+        'Type area name, or let empty to load data in current map view'
+      ),
+      on_select: (choice) => {
+        boundary = choice.item.value
+        boundaryName = choice.item.label
+      },
+    })
+    this.map.help.parse(container)
+
+    const confirm = () => {
+      let tags = container.querySelector('[name=tags]').value
+      if (!tags) {
+        Alert.error(translate('Please define an expression for the query first'))
+        return
+      }
+      const outMode = container.querySelector('[name=out-mode]').value
+      if (!tags.startsWith('[')) tags = `[${tags}]`
+      let area = '{south},{west},{north},{east}'
+      if (boundary) area = `area:${boundary}`
+      let query = `[out:json];nwr${tags}(${area});out ${outMode};`
+      importer.url = `${this.baseUrl}?data=${query}`
+      if (boundary) importer.layerName = boundaryName
+      importer.format = 'osm'
+      importer.dialog.close()
+    }
+    L.DomUtil.createButton('', container, translate('Choose this data'), confirm)
+
+    importer.dialog.open({
+      content: container,
+      className: `${this.id} importer dark`,
+    })
+  }
+}

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

@@ -1,5 +1,5 @@
-// Uses `L._`` from Leaflet.i18n which we cannot import as a module yet
-import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from './i18n.js'
+import { uMapAlert as Alert } from '../components/alerts/alert.js'
 
 export class RequestError extends Error {}
 
@@ -47,14 +47,13 @@ class BaseRequest {
 // In case of error, an alert is sent, but non 20X status are not handled
 // The consumer must check the response status by hand
 export class Request extends BaseRequest {
-  constructor(ui) {
-    super()
-    this.ui = ui
+  fire(name, params) {
+    document.body.dispatchEvent(new CustomEvent(name, params))
   }
 
   async _fetch(method, uri, headers, data) {
     const id = Math.random()
-    this.ui.fire('dataloading', { id: id })
+    this.fire('dataloading', { id: id })
     try {
       const response = await BaseRequest.prototype._fetch.call(
         this,
@@ -68,7 +67,7 @@ export class Request extends BaseRequest {
       if (error instanceof NOKError) return this._onNOK(error)
       return this._onError(error)
     } finally {
-      this.ui.fire('dataload', { id: id })
+      this.fire('dataload', { id: id })
     }
   }
 
@@ -81,7 +80,7 @@ export class Request extends BaseRequest {
   }
 
   _onError(error) {
-    this.ui.alert({ content: L._('Problem in the response'), level: 'error' })
+    Alert.error(translate('Problem in the response'))
   }
 
   _onNOK(error) {
@@ -127,9 +126,9 @@ export class ServerRequest extends Request {
     try {
       const data = await response.json()
       if (data.info) {
-        this.ui.alert({ content: data.info, level: 'info' })
+        Alert.info(data.info)
       } else if (data.error) {
-        this.ui.alert({ content: data.error, level: 'error' })
+        Alert.error(data.error)
         return this._onError(new Error(data.error))
       }
       return [data, response, null]
@@ -144,10 +143,9 @@ export class ServerRequest extends Request {
 
   _onNOK(error) {
     if (error.status === 403) {
-      this.ui.alert({
-        content: error.message || L._('Action not allowed :('),
-        level: 'error',
-      })
+      Alert.error(error.message || translate('Action not allowed :('))
+    } else {
+      super._onError(error)
     }
     return [{}, error.response, error]
   }