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

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

@@ -0,0 +1,255 @@
+import { DomUtil, DomEvent } from '../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from './i18n.js'
+
+const SHORTCUTS = {
+  DRAW_MARKER: {
+    shortcut: 'Modifier+M',
+    label: translate('Draw a marker'),
+  },
+  DRAW_LINE: {
+    shortcut: 'Modifier+L',
+    label: translate('Draw a polyline'),
+  },
+  DRAW_POLYGON: {
+    shortcut: 'Modifier+P',
+    label: translate('Draw a polygon'),
+  },
+  TOGGLE_EDIT: {
+    shortcut: 'Modifier+E',
+    label: translate('Toggle edit mode'),
+  },
+  STOP_EDIT: {
+    shortcut: 'Modifier+E',
+    label: translate('Stop editing'),
+  },
+  SAVE_MAP: {
+    shortcut: 'Modifier+S',
+    label: translate('Save map'),
+  },
+  IMPORT_PANEL: {
+    shortcut: 'Modifier+I',
+    label: translate('Import data'),
+  },
+  SEARCH: {
+    shortcut: 'Modifier+F',
+    label: translate('Search location'),
+  },
+  CANCEL: {
+    shortcut: 'Modifier+Z',
+    label: translate('Cancel edits'),
+  },
+  PREVIEW: {
+    shortcut: 'Modifier+E',
+    label: translate('Back to preview'),
+  },
+  SAVE: {
+    shortcut: 'Modifier+S',
+    label: translate('Save current edits'),
+  },
+  EDIT_FEATURE_LAYER: {
+    shortcut: 'Modifier+⇧+Click',
+    label: translate("Edit feature's layer"),
+  },
+  CONTINUE_LINE: {
+    shortcut: 'Modifier+Click',
+    label: translate('Continue line'),
+  },
+}
+
+const ENTRIES = {
+  formatURL: `${translate(
+    'Supported variables that will be dynamically replaced'
+  )}: {bbox}, {lat}, {lng}, {zoom}, {east}, {north}..., {left}, {top}..., locale, lang`,
+  colorValue: translate('Must be a valid CSS value (eg.: DarkBlue or #123456)'),
+  smoothFactor: translate(
+    'How much to simplify the polyline on each zoom level (more = better performance and smoother look, less = more accurate)'
+  ),
+  dashArray: translate(
+    'A comma separated list of numbers that defines the stroke dash pattern. Ex.: "5, 10, 15".'
+  ),
+  zoomTo: translate('Zoom level for automatic zooms'),
+  labelKey: translate(
+    'The name of the property to use as feature label (eg.: "nom"). You can also use properties inside brackets to use more than one or mix with static content (eg.: "{name} in {place}")'
+  ),
+  stroke: translate('Whether to display or not polygons paths.'),
+  fill: translate('Whether to fill polygons with color.'),
+  fillColor: translate('Optional. Same as color if not set.'),
+  shortCredit: translate('Will be displayed in the bottom right corner of the map'),
+  longCredit: translate('Will be visible in the caption of the map'),
+  permanentCredit: translate(
+    'Will be permanently visible in the bottom left corner of the map'
+  ),
+  sortKey: translate(
+    'Comma separated list of properties to use for sorting features. To reverse the sort, put a minus sign (-) before. Eg. mykey,-otherkey.'
+  ),
+  slugKey: translate('The name of the property to use as feature unique identifier.'),
+  filterKey: translate(
+    'Comma separated list of properties to use when filtering features by text input'
+  ),
+  facetKey: translate(
+    'Comma separated list of properties to use for filters (eg.: mykey,otherkey). To control label, add it after a | (eg.: mykey|My Key,otherkey|Other Key). To control input field type, add it after another | (eg.: mykey|My Key|checkbox,otherkey|Other Key|datetime). Allowed values for the input field type are checkbox (default), radio, number, date and datetime.'
+  ),
+  interactive: translate(
+    'If false, the polygon or line will act as a part of the underlying map.'
+  ),
+  outlink: translate('Define link to open in a new window on polygon click.'),
+  dynamicRemoteData: translate('Fetch data each time map view changes.'),
+  proxyRemoteData: translate(
+    "To use if remote server doesn't allow cross domain (slower)"
+  ),
+  browsable: translate(
+    'Set it to false to hide this layer from the slideshow, the data browser, the popup navigation…'
+  ),
+  importMode: translate(
+    'When providing an URL, uMap can copy the remote data in a layer, or add this URL as remote source of the layer. In that case, data will always be fetched from that URL, and thus be up to date, but it will not be possible to edit it inside uMap.'
+  ),
+  importFormats: `
+  <div>
+    <dt>GeoJSON</dt>
+    <dd>${translate('All properties are imported.')}</dd>
+    <dt>GPX</dt>
+    <dd>${translate('Properties imported:')}name, desc</dd>
+    <dt>KML</dt>
+    <dd>${translate('Properties imported:')}name, description</dd>
+    <dt>CSV</dt>
+    <dd>${translate('Comma, tab or semi-colon separated values. SRS WGS84 is implied. Only Point geometries are imported. The import will look at the column headers for any mention of «lat» and «lon» at the begining of the header, case insensitive. All other column are imported as properties.')}</dd>
+    <dt>uMap</dt>
+    <dd>${translate('Imports all umap data, including layers and settings.')}</dd>
+  </div>
+  `,
+  dynamicProperties: `
+  <div>
+    <h4>${translate('Dynamic properties')}</h4>
+    <p>${translate('Use placeholders with feature properties between brackets, eg. &#123;name&#125;, they will be dynamically replaced by the corresponding values.')}</p>
+  </div>
+  `,
+
+  textFormatting: `
+  <div>
+    <h4>${translate('Text formatting')}</h4>
+    <ul>
+      <li>${translate('*single star for italic*')}</li>
+      <li>${translate('**double star for bold**')}</li>
+      <li>${translate('# one hash for main heading')}</li>
+      <li>${translate('## two hashes for second heading')}</li>
+      <li>${translate('### three hashes for third heading')}</li>
+      <li>${translate('Simple link: [[http://example.com]]')}</li>
+      <li>${translate('Link with text: [[http://example.com|text of the link]]')}</li>
+      <li>${translate('Image: {{http://image.url.com}}')}</li>
+      <li>${translate('Image with custom width (in px): {{http://image.url.com|width}}')}</li>
+      <li>${translate('Iframe: {{{http://iframe.url.com}}}')}</li>
+      <li>${translate('Iframe with custom height (in px): {{{http://iframe.url.com|height}}}')}</li>
+      <li>${translate('Iframe with custom height and width (in px): {{{http://iframe.url.com|height*width}}}')}</li>
+      <li>${translate('--- for a horizontal rule')}</li>
+    </ul>
+  </div>
+  `,
+
+  overpassImporter: `
+  <div>
+    <h4>${translate('Overpass supported expressions')}</h4>
+    <ul>
+      <li>${translate('key (eg. building)')}</li>
+      <li>${translate('!key (eg. !name)')}</li>
+      <li>${translate('key=value (eg. building=yes)')}</li>
+      <li>${translate('key!=value (eg. building!=yes)')}</li>
+      <li>${translate('key~value (eg. name~Grisy)')}</li>
+      <li>${translate('key="value|value2" (eg. name="Paris|Berlin")')}</li>
+    </ul>
+    <div>${translate('More info about Overpass syntax')}: <a href="https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide">https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide</a></div>
+    <div>${translate('For more complex needs, see')} <a href="https://overpass-turbo.eu/">https://overpass-turbo.eu/</a></div>
+  </div>
+  `,
+}
+
+export default class Help {
+  constructor(map) {
+    this.map = map
+    this.isMacOS = /mac/i.test(
+      // eslint-disable-next-line compat/compat -- Fallback available.
+      navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform
+    )
+  }
+
+  displayLabel(action, withKbdTag = true) {
+    let { shortcut, label } = SHORTCUTS[action]
+    const modifier = this.isMacOS ? 'Cmd' : 'Ctrl'
+    shortcut = shortcut.replace('Modifier', modifier)
+    if (withKbdTag) {
+      shortcut = shortcut
+        .split('+')
+        .map((el) => `<kbd>${el}</kbd>`)
+        .join('+')
+      label += ` ${shortcut}`
+    } else {
+      label += ` (${shortcut})`
+    }
+    return label
+  }
+
+  show(entries) {
+    const container = DomUtil.add('div')
+    DomUtil.createTitle(container, translate('Help'))
+    // Special dynamic case. Do we still think this dialog is usefull ?
+    if (entries == 'edit') {
+      DomUtil.element({
+        tagName: 'div',
+        className: 'umap-help-entry',
+        parent: container,
+      }).appendChild(this._buildEditEntry())
+    } else {
+      for (const name of entries) {
+        DomUtil.element({
+          tagName: 'div',
+          className: 'umap-help-entry',
+          parent: container,
+          innerHTML: ENTRIES[name],
+        })
+      }
+    }
+    this.map.dialog.open({ content: container, className: 'dark' })
+  }
+
+  button(container, entries, classname) {
+    const button = DomUtil.createButton(
+      classname || 'umap-help-button',
+      container,
+      translate('Help')
+    )
+    entries = typeof entries === 'string' ? [entries] : entries
+    DomEvent.on(button, 'click', DomEvent.stop).on(button, 'click', () =>
+      this.show(entries)
+    )
+    return button
+  }
+
+  link(container, entries) {
+    const button = this.button(container, entries, 'umap-help-link')
+    button.textContent = translate('Help')
+    return button
+  }
+
+  parse(container) {
+    for (const element of container.querySelectorAll('[data-help]')) {
+      this.button(element, element.dataset.help.split(','))
+    }
+  }
+
+  _buildEditEntry() {
+    const container = DomUtil.create('div', '')
+    const title = DomUtil.create('h4', '', container)
+    const actionsContainer = DomUtil.create('ul', 'umap-edit-actions', container)
+    const addAction = (action) => {
+      const actionContainer = DomUtil.add('li', '', actionsContainer)
+      DomUtil.add('i', action.options.className, actionContainer),
+        DomUtil.add('span', '', actionContainer, action.options.tooltip)
+      DomEvent.on(actionContainer, 'click', action.addHooks, action)
+      DomEvent.on(actionContainer, 'click', this.map.dialog.close, this.map.dialog)
+    }
+    title.textContent = translate('Where do we go from here?')
+    for (const id in this.map.helpMenuActions) {
+      addAction(this.map.helpMenuActions[id])
+    }
+    return container
+  }
+}

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

@@ -0,0 +1,308 @@
+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" hidden>
+        <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 [name, config] of Object.entries(this.map.options.importers || {})) {
+      const register = (mod) => {
+        this.IMPORTERS.push(new mod.Importer(this.map, config))
+      }
+      // We need to have explicit static paths for Django's collectstatic with hashes.
+      switch (name) {
+        case 'geodatamine':
+          import('./importers/geodatamine.js').then(register)
+          break
+        case 'communesfr':
+          import('./importers/communesfr.js').then(register)
+          break
+        case 'overpass':
+          import('./importers/overpass.js').then(register)
+          break
+        case 'datasets':
+          import('./importers/datasets.js').then(register)
+          break
+      }
+    }
+  }
+
+  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.qs('[type=file]').showPicker()
+  }
+
+  submit() {
+    let hasErrors = false
+    if (this.format === 'umap') {
+      hasErrors = !this.full()
+    } else if (!this.url) {
+      hasErrors = !this.copy()
+    } else if (this.action) {
+      hasErrors = !this[this.action]()
+    }
+    if (!hasErrors) {
+      Alert.info(translate('Data successfully imported!'))
+    }
+  }
+
+  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)
+      return false
+    }
+  }
+
+  link() {
+    if (!this.url) {
+      return false
+    }
+    if (!this.format) {
+      Alert.error(translate('Please choose a format'))
+      return false
+    }
+    const 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 false
+    }
+    const 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,42 @@
+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.layerName = select.options[select.selectedIndex].textContent
+      }
+      importer.dialog.close()
+    }
+    L.DomUtil.createButton('', container, translate('Choose this dataset'), confirm)
+
+    importer.dialog.open({
+      content: container,
+      className: `${this.id} importer dark`,
+    })
+  }
+}