umap-project 1.12.1__py3-none-any.whl → 1.13.0__py3-none-any.whl

umap/static/umap/js/umap.icon.js

@@ -67,15 +67,8 @@ L.U.Icon.Default = L.U.Icon.extend({
 
   onAdd: function () {
     const src = this._getIconUrl('icon')
-    // Decide whether to switch svg to white or not, but do it
-    // only for internal SVG, as invert could do weird things
-    if (src.startsWith('/') && src.endsWith('.svg')) {
-      const bgcolor = this._getColor()
-      // Must be called after icon container is added to the DOM
-      if (L.DomUtil.contrastedColor(this.elements.container, bgcolor)) {
-        this.elements.img.style.filter = 'invert(1)'
-      }
-    }
+    const bgcolor = this._getColor()
+    L.U.Icon.setIconContrast(this.elements.icon, this.elements.container, src, bgcolor)
   },
 
   createIcon: function () {
@@ -89,18 +82,7 @@ L.U.Icon.Default = L.U.Icon.extend({
     this.elements.arrow = L.DomUtil.create('div', 'icon_arrow', this.elements.main)
     const src = this._getIconUrl('icon')
     if (src) {
-      // An url.
-      if (
-        src.startsWith('http') ||
-        src.startsWith('/') ||
-        src.startsWith('data:image')
-      ) {
-        this.elements.img = L.DomUtil.create('img', null, this.elements.container)
-        this.elements.img.src = src
-      } else {
-        this.elements.span = L.DomUtil.create('span', null, this.elements.container)
-        this.elements.span.textContent = src
-      }
+      this.elements.icon = L.U.Icon.makeIconElement(src, this.elements.container)
     }
     this._setIconStyles(this.elements.main, 'icon')
     return this.elements.main
@@ -208,3 +190,44 @@ L.U.Icon.Cluster = L.DivIcon.extend({
     return color || L.DomUtil.TextColorFromBackgroundColor(el, backgroundColor)
   },
 })
+
+L.U.Icon.isImg = function (src) {
+  return L.Util.isPath(src) || L.Util.isRemoteUrl(src) || L.Util.isDataImage(src)
+}
+
+L.U.Icon.makeIconElement = function (src, parent) {
+  let icon
+  if (L.U.Icon.isImg(src)) {
+    icon = L.DomUtil.create('img')
+    icon.src = src
+  } else {
+    icon = L.DomUtil.create('span')
+    icon.textContent = src
+  }
+  parent.appendChild(icon)
+  return icon
+}
+
+L.U.Icon.setIconContrast = function (el, parent, src, bgcolor) {
+  /*
+   * el: the element we'll adapt the style, it can be an image or text
+   * parent: the element we'll consider to decide whether to adapt the style,
+   * by looking at its background color
+   * src: the raw "icon" value, can be an URL, a path, text, emoticon, etc.
+   * bgcolor: the background color, used for caching and in case we cannot guess the
+   * parent background color
+   */
+
+  if (L.DomUtil.contrastedColor(parent, bgcolor)) {
+    // Decide whether to switch svg to white or not, but do it
+    // only for internal SVG, as invert could do weird things
+    if (L.Util.isPath(src) && src.endsWith('.svg')) {
+      // Must be called after icon container is added to the DOM
+      // An image
+      el.style.filter = 'invert(1)'
+    } else if (!el.src) {
+      // Text icon
+      el.style.color = 'white'
+    }
+  }
+}

umap/static/umap/js/umap.js

@@ -29,7 +29,12 @@ L.Map.mergeOptions({
   name: '',
   description: '',
   displayPopupFooter: false,
-  demoTileInfos: { s: 'a', z: 9, x: 265, y: 181, r: '' },
+  // When a TileLayer is in TMS mode, it needs -y instead of y.
+  // This is usually handled by the TileLayer instance itself, but
+  // we cannot rely on this because of the y is overriden by Leaflet
+  // See https://github.com/Leaflet/Leaflet/pull/9201
+  // And let's remove this -y when this PR is merged and released.
+  demoTileInfos: { s: 'a', z: 9, x: 265, y: 181, '-y': 181, r: '' },
   licences: [],
   licence: '',
   enableMarkerDraw: true,
@@ -254,7 +259,7 @@ L.U.Map.include({
     }
     this.initShortcuts()
     this.onceDataLoaded(function () {
-      if (L.Util.queryString('share')) this.renderShareBox()
+      if (L.Util.queryString('share')) this.share.open()
       else if (this.options.onLoadPanel === 'databrowser') this.openBrowser()
       else if (this.options.onLoadPanel === 'caption') this.displayCaption()
       else if (
@@ -347,6 +352,7 @@ L.U.Map.include({
     this.browser = new L.U.Browser(this)
     this.importer = new L.U.Importer(this)
     this.drop = new L.U.DropControl(this)
+    this.share = new L.U.Share(this)
     this._controls.tilelayers = new L.U.TileLayerControl(this)
     this._controls.tilelayers.setLayers()
 
@@ -848,28 +854,6 @@ L.U.Map.include({
     })
   },
 
-  format: function (mode) {
-    const type = this.EXPORT_TYPES[mode]
-    const content = type.formatter(this)
-    let name = this.options.name || 'data'
-    name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
-    const filename = name + type.ext
-    return { content, filetype: type.filetype, filename }
-  },
-
-  download: function (mode) {
-    const { content, filetype, filename } = this.format(mode)
-    const blob = new Blob([content], { type: filetype })
-    window.URL = window.URL || window.webkitURL
-    const el = document.createElement('a')
-    el.download = filename
-    el.href = window.URL.createObjectURL(blob)
-    el.style.display = 'none'
-    document.body.appendChild(el)
-    el.click()
-    document.body.removeChild(el)
-  },
-
   processFileToImport: function (file, layer, type) {
     type = type || L.Util.detectFileType(file)
     if (!type) {
@@ -1701,9 +1685,9 @@ L.U.Map.include({
     L.DomUtil.createButton(
       'button umap-download',
       advancedButtons,
-      L._('Open download panel'),
-      this.renderShareBox,
-      this
+      L._('Open share & download panel'),
+      this.share.open,
+      this.share
     )
   },
 

umap/static/umap/js/umap.layer.js

@@ -1,6 +1,16 @@
 L.U.Layer = {
   canBrowse: true,
 
+  getType: function () {
+    const proto = Object.getPrototypeOf(this)
+    return proto.constructor.TYPE
+  },
+
+  getName: function () {
+    const proto = Object.getPrototypeOf(this)
+    return proto.constructor.NAME
+  },
+
   getFeatures: function () {
     return this._layers
   },
@@ -9,7 +19,7 @@ L.U.Layer = {
     return []
   },
 
-  postUpdate: function () {},
+  onEdit: function () {},
 
   hasDataVisible: function () {
     return !!Object.keys(this._layers).length
@@ -17,7 +27,10 @@ L.U.Layer = {
 }
 
 L.U.Layer.Default = L.FeatureGroup.extend({
-  _type: 'Default',
+  statics: {
+    NAME: L._('Default'),
+    TYPE: 'Default',
+  },
   includes: [L.U.Layer],
 
   initialize: function (datalayer) {
@@ -39,7 +52,10 @@ L.U.MarkerCluster = L.MarkerCluster.extend({
 })
 
 L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
-  _type: 'Cluster',
+  statics: {
+    NAME: L._('Clustered'),
+    TYPE: 'Cluster',
+  },
   includes: [L.U.Layer],
 
   initialize: function (datalayer) {
@@ -104,20 +120,23 @@ L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
     ]
   },
 
-  postUpdate: function (e) {
-    if (e.helper.field === 'options.cluster.radius') {
+  onEdit: function (field, builder) {
+    if (field === 'options.cluster.radius') {
       // No way to reset radius of an already instanciated MarkerClusterGroup...
       this.datalayer.resetLayer(true)
       return
     }
-    if (e.helper.field === 'options.color') {
+    if (field === 'options.color') {
       this.options.polygonOptions.color = this.datalayer.getColor()
     }
   },
 })
 
 L.U.Layer.Choropleth = L.FeatureGroup.extend({
-  _type: 'Choropleth',
+  statics: {
+    NAME: L._('Choropleth'),
+    TYPE: 'Choropleth',
+  },
   includes: [L.U.Layer],
   canBrowse: true,
   // Have defaults that better suit the choropleth mode.
@@ -234,14 +253,17 @@ L.U.Layer.Choropleth = L.FeatureGroup.extend({
     L.FeatureGroup.prototype.onAdd.call(this, map)
   },
 
-  postUpdate: function (e) {
-    if (e.helper.field === 'options.choropleth.breaks') {
+  onEdit: function (field, builder) {
+    // If user touches the breaks, then force manual mode
+    if (field === 'options.choropleth.breaks') {
       this.datalayer.options.choropleth.mode = 'manual'
-      e.helper.builder.helpers['options.choropleth.mode'].fetch()
+      builder.helpers['options.choropleth.mode'].fetch()
     }
     this.computeBreaks()
-    if (e.helper.field !== 'options.choropleth.breaks') {
-      e.helper.builder.helpers['options.choropleth.breaks'].fetch()
+    // If user changes the mode or the number of classes,
+    // then update the breaks input value
+    if (field === 'options.choropleth.mode' || field === 'options.choropleth.classes') {
+      builder.helpers['options.choropleth.breaks'].fetch()
     }
   },
 
@@ -317,7 +339,10 @@ L.U.Layer.Choropleth = L.FeatureGroup.extend({
 })
 
 L.U.Layer.Heat = L.HeatLayer.extend({
-  _type: 'Heat',
+  statics: {
+    NAME: L._('Heatmap'),
+    TYPE: 'Heat',
+  },
   includes: [L.U.Layer],
   canBrowse: false,
 
@@ -382,12 +407,12 @@ L.U.Layer.Heat = L.HeatLayer.extend({
     ]
   },
 
-  postUpdate: function (e) {
-    if (e.helper.field === 'options.heat.intensityProperty') {
+  onEdit: function (field, builder) {
+    if (field === 'options.heat.intensityProperty') {
       this.datalayer.resetLayer(true) // We need to repopulate the latlngs
       return
     }
-    if (e.helper.field === 'options.heat.radius') {
+    if (field === 'options.heat.radius') {
       this.options.radius = this.datalayer.options.heat.radius
     }
     this._updateOptions()
@@ -612,7 +637,7 @@ L.U.DataLayer = L.Evented.extend({
     // Only reset if type is defined (undefined is the default) and different from current type
     if (
       this.layer &&
-      (!this.options.type || this.options.type === this.layer._type) &&
+      (!this.options.type || this.options.type === this.layer.getType()) &&
       !force
     ) {
       return
@@ -1185,6 +1210,28 @@ L.U.DataLayer = L.Evented.extend({
     })
     container.appendChild(builder.build())
 
+    const redrawCallback = function (e) {
+      const field = e.helper.field,
+        builder = e.helper.builder
+      this.hide()
+      this.layer.onEdit(field, builder)
+      this.show()
+    }
+
+    const layerOptions = this.layer.getEditableOptions()
+
+    if (layerOptions.length) {
+      builder = new L.U.FormBuilder(this, layerOptions, {
+        id: 'datalayer-layer-properties',
+        callback: redrawCallback,
+      })
+      const layerProperties = L.DomUtil.createFieldset(
+        container,
+        `${this.layer.getName()}: ${L._('settings')}`
+      )
+      layerProperties.appendChild(builder.build())
+    }
+
     let shapeOptions = [
       'options.color',
       'options.iconClass',
@@ -1198,12 +1245,6 @@ L.U.DataLayer = L.Evented.extend({
       'options.fillOpacity',
     ]
 
-    const redrawCallback = function (e) {
-      this.hide()
-      this.layer.postUpdate(e)
-      this.show()
-    }
-
     builder = new L.U.FormBuilder(this, shapeOptions, {
       id: 'datalayer-advanced-properties',
       callback: redrawCallback,
@@ -1220,8 +1261,6 @@ L.U.DataLayer = L.Evented.extend({
       'options.labelKey',
     ]
 
-    optionsFields = optionsFields.concat(this.layer.getEditableOptions())
-
     builder = new L.U.FormBuilder(this, optionsFields, {
       id: 'datalayer-advanced-properties',
       callback: redrawCallback,
@@ -1443,6 +1482,10 @@ L.U.DataLayer = L.Evented.extend({
     return !!this.options.browsable && this.canBrowse() && this.isVisible()
   },
 
+  count: function () {
+    return this._index.length
+  },
+
   hasData: function () {
     return !!this._index.length
   },

umap/static/umap/js/umap.popup.js

@@ -251,3 +251,90 @@ L.U.PopupTemplate.GeoRSSLink = L.U.PopupTemplate.Default.extend({
     return a
   },
 })
+
+L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
+  options: {
+    className: 'umap-openstreetmap',
+  },
+
+  getName: function () {
+    const props = this.feature.properties
+    if (L.locale && props[`name:${L.locale}`]) return props[`name:${L.locale}`]
+    return props.name
+  },
+
+  renderBody: function () {
+    const props = this.feature.properties
+    const container = L.DomUtil.add('div')
+    const title = L.DomUtil.add('h3', 'popup-title', container)
+    const color = this.feature.getDynamicOption('color')
+    title.style.backgroundColor = color
+    const iconUrl = this.feature.getDynamicOption('iconUrl')
+    let icon = L.U.Icon.makeIconElement(iconUrl, title)
+    L.DomUtil.addClass(icon, 'icon')
+    L.U.Icon.setIconContrast(icon, title, iconUrl, color)
+    if (L.DomUtil.contrastedColor(title, color)) title.style.color = 'white'
+    L.DomUtil.add('span', '', title, this.getName())
+    const street = props['addr:street']
+    if (street) {
+      const row = L.DomUtil.add('address', 'address', container)
+      const number = props['addr:housenumber']
+      if (number) {
+        // Poor way to deal with international forms of writting addresses
+        L.DomUtil.add('span', '', row, `${L._('No.')}: ${number}`)
+        L.DomUtil.add('span', '', row, `${L._('Street')}: ${street}`)
+      } else {
+        L.DomUtil.add('span', '', row, street)
+      }
+    }
+    if (props.website) {
+      L.DomUtil.element(
+        'a',
+        { href: props.website, textContent: props.website },
+        container
+      )
+    }
+    const phone = props.phone || props['contact:phone']
+    if (phone) {
+      L.DomUtil.add(
+        'div',
+        '',
+        container,
+        L.DomUtil.element('a', { href: `tel:${phone}`, textContent: phone })
+      )
+    }
+    if (props.mobile) {
+      L.DomUtil.add(
+        'div',
+        '',
+        container,
+        L.DomUtil.element('a', {
+          href: `tel:${props.mobile}`,
+          textContent: props.mobile,
+        })
+      )
+    }
+    const email = props.email || props['contact:email']
+    if (email) {
+      L.DomUtil.add(
+        'div',
+        '',
+        container,
+        L.DomUtil.element('a', { href: `mailto:${email}`, textContent: email })
+      )
+    }
+    const id = props['@id']
+    if (id) {
+      L.DomUtil.add(
+        'div',
+        'osm-link',
+        container,
+        L.DomUtil.element('a', {
+          href: `https://www.openstreetmap.org/${id}`,
+          textContent: L._('See on OpenStreetMap'),
+        })
+      )
+    }
+    return container
+  },
+})

umap/static/umap/js/umap.share.js

@@ -0,0 +1,254 @@
+L.U.Share = L.Class.extend({
+  EXPORT_TYPES: {
+    geojson: {
+      formatter: function (map) {
+        return JSON.stringify(map.toGeoJSON(), null, 2)
+      },
+      ext: '.geojson',
+      filetype: 'application/json',
+    },
+    gpx: {
+      formatter: function (map) {
+        return togpx(map.toGeoJSON())
+      },
+      ext: '.gpx',
+      filetype: 'application/gpx+xml',
+    },
+    kml: {
+      formatter: function (map) {
+        return tokml(map.toGeoJSON())
+      },
+      ext: '.kml',
+      filetype: 'application/vnd.google-earth.kml+xml',
+    },
+    csv: {
+      formatter: function (map) {
+        const table = []
+        map.eachFeature((feature) => {
+          const row = feature.toGeoJSON()['properties'],
+            center = feature.getCenter()
+          delete row['_umap_options']
+          row['Latitude'] = center.lat
+          row['Longitude'] = center.lng
+          table.push(row)
+        })
+        return csv2geojson.dsv.csvFormat(table)
+      },
+      ext: '.csv',
+      filetype: 'text/csv',
+    },
+  },
+
+  initialize: function (map) {
+    this.map = map
+  },
+
+  build: function () {
+    this.container = L.DomUtil.create('div', 'umap-share')
+    this.title = L.DomUtil.create('h3', '', this.container)
+    this.title.textContent = L._('Share and download')
+
+    L.DomUtil.createCopiableInput(
+      this.container,
+      L._('Link to view the map'),
+      window.location.protocol + L.Util.getBaseUrl()
+    )
+
+    if (this.map.options.shortUrl) {
+      L.DomUtil.createCopiableInput(
+        this.container,
+        L._('Short link'),
+        this.map.options.shortUrl
+      )
+    }
+
+    L.DomUtil.create('hr', '', this.container)
+
+    L.DomUtil.add('h4', '', this.container, L._('Download'))
+    L.DomUtil.add('small', 'label', this.container, L._("Only visible layers' data"))
+    for (const key in this.EXPORT_TYPES) {
+      if (this.EXPORT_TYPES.hasOwnProperty(key)) {
+        L.DomUtil.createButton(
+          'download-file',
+          this.container,
+          this.EXPORT_TYPES[key].name || key,
+          () => this.download(key),
+          this
+        )
+      }
+    }
+    L.DomUtil.create('div', 'vspace', this.container)
+    L.DomUtil.add(
+      'small',
+      'label',
+      this.container,
+      L._('All data and settings of the map')
+    )
+    const downloadUrl = L.Util.template(this.map.options.urls.map_download, {
+      map_id: this.map.options.umap_id,
+    })
+    const link = L.DomUtil.createLink(
+      'download-backup',
+      this.container,
+      L._('full backup'),
+      downloadUrl
+    )
+    let name = this.map.options.name || 'data'
+    name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
+    link.setAttribute('download', `${name}.umap`)
+    L.DomUtil.create('hr', '', this.container)
+
+    const embedTitle = L.DomUtil.add('h4', '', this.container, L._('Embed the map'))
+    const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', this.container)
+    const urlTitle = L.DomUtil.add('h4', '', this.container, L._('Direct link'))
+    const exportUrl = L.DomUtil.createCopiableInput(
+      this.container,
+      L._('Share this link to open a customized map view'),
+      ''
+    )
+
+    exportUrl.type = 'text'
+    const UIFields = [
+      ['dimensions.width', { handler: 'Input', label: L._('width') }],
+      ['dimensions.height', { handler: 'Input', label: L._('height') }],
+      [
+        'options.includeFullScreenLink',
+        { handler: 'Switch', label: L._('Include full screen link?') },
+      ],
+      [
+        'options.currentView',
+        { handler: 'Switch', label: L._('Current view instead of default map view?') },
+      ],
+      [
+        'options.keepCurrentDatalayers',
+        { handler: 'Switch', label: L._('Keep current visible layers') },
+      ],
+      [
+        'options.viewCurrentFeature',
+        { handler: 'Switch', label: L._('Open current feature on load') },
+      ],
+      'queryString.moreControl',
+      'queryString.scrollWheelZoom',
+      'queryString.miniMap',
+      'queryString.scaleControl',
+      'queryString.onLoadPanel',
+      'queryString.captionBar',
+      'queryString.captionMenus',
+    ]
+    for (let i = 0; i < this.map.HIDDABLE_CONTROLS.length; i++) {
+      UIFields.push(`queryString.${this.map.HIDDABLE_CONTROLS[i]}Control`)
+    }
+    const iframeExporter = new L.U.IframeExporter(this.map)
+    const buildIframeCode = () => {
+      iframe.innerHTML = iframeExporter.build()
+      exportUrl.value = window.location.protocol + iframeExporter.buildUrl()
+    }
+    buildIframeCode()
+    const builder = new L.U.FormBuilder(iframeExporter, UIFields, {
+      callback: buildIframeCode,
+    })
+    const iframeOptions = L.DomUtil.createFieldset(
+      this.container,
+      L._('Embed and link options')
+    )
+    iframeOptions.appendChild(builder.build())
+  },
+
+  open: function () {
+    if (!this.container) this.build()
+    this.map.ui.openPanel({ data: { html: this.container } })
+  },
+
+  format: function (mode) {
+    const type = this.EXPORT_TYPES[mode]
+    const content = type.formatter(this.map)
+    let name = this.map.options.name || 'data'
+    name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
+    const filename = name + type.ext
+    return { content, filetype: type.filetype, filename }
+  },
+
+  download: function (mode) {
+    const { content, filetype, filename } = this.format(mode)
+    const blob = new Blob([content], { type: filetype })
+    window.URL = window.URL || window.webkitURL
+    const el = document.createElement('a')
+    el.download = filename
+    el.href = window.URL.createObjectURL(blob)
+    el.style.display = 'none'
+    document.body.appendChild(el)
+    el.click()
+    document.body.removeChild(el)
+  },
+})
+
+L.U.IframeExporter = L.Evented.extend({
+  options: {
+    includeFullScreenLink: true,
+    currentView: false,
+    keepCurrentDatalayers: false,
+    viewCurrentFeature: false,
+  },
+
+  queryString: {
+    scaleControl: false,
+    miniMap: false,
+    scrollWheelZoom: false,
+    zoomControl: true,
+    editMode: 'disabled',
+    moreControl: true,
+    searchControl: null,
+    tilelayersControl: null,
+    embedControl: null,
+    datalayersControl: true,
+    onLoadPanel: 'none',
+    captionBar: false,
+    captionMenus: true,
+  },
+
+  dimensions: {
+    width: '100%',
+    height: '300px',
+  },
+
+  initialize: function (map) {
+    this.map = map
+    this.baseUrl = L.Util.getBaseUrl()
+    // Use map default, not generic default
+    this.queryString.onLoadPanel = this.map.options.onLoadPanel
+  },
+
+  getMap: function () {
+    return this.map
+  },
+
+  buildUrl: function (options) {
+    const datalayers = []
+    if (this.options.viewCurrentFeature && this.map.currentFeature) {
+      this.queryString.feature = this.map.currentFeature.getSlug()
+    }
+    if (this.options.keepCurrentDatalayers) {
+      this.map.eachDataLayer((datalayer) => {
+        if (datalayer.isVisible() && datalayer.umap_id) {
+          datalayers.push(datalayer.umap_id)
+        }
+      })
+      this.queryString.datalayers = datalayers.join(',')
+    } else {
+      delete this.queryString.datalayers
+    }
+    const currentView = this.options.currentView ? window.location.hash : ''
+    const queryString = L.extend({}, this.queryString, options)
+    return `${this.baseUrl}?${L.Util.buildQueryString(queryString)}${currentView}`
+  },
+
+  build: function () {
+    const iframeUrl = this.buildUrl()
+    let code = `<iframe width="${this.dimensions.width}" height="${this.dimensions.height}" frameborder="0" allowfullscreen allow="geolocation" src="${iframeUrl}"></iframe>`
+    if (this.options.includeFullScreenLink) {
+      const fullUrl = this.buildUrl({ scrollWheelZoom: true })
+      code += `<p><a href="${fullUrl}">${L._('See full screen')}</a></p>`
+    }
+    return code
+  },
+})