Move map.importPanel to controls, as other similar functions
This commit is contained in:
Yohan Boniface
parent
ddbcdbcde7
commit
a94cac53ac
2 changed files with 151 additions and 168 deletions
|
|
@ -1029,32 +1029,133 @@ L.U.Map.include({
|
||||||
this.ui.openPanel({ data: { html: container } })
|
this.ui.openPanel({ data: { html: container } })
|
||||||
},
|
},
|
||||||
|
|
||||||
fullDownload: function () {
|
importPanel: function () {
|
||||||
// Make sure all data is loaded before downloading
|
const container = L.DomUtil.create('div', 'umap-upload')
|
||||||
this.once('dataloaded', () => this.download())
|
const title = L.DomUtil.create('h4', '', container)
|
||||||
this.loadDatalayers(true) // Force load
|
const presetBox = L.DomUtil.create('div', 'formbox', container)
|
||||||
},
|
const presetSelect = L.DomUtil.create('select', '', presetBox)
|
||||||
|
const fileBox = L.DomUtil.create('div', 'formbox', container)
|
||||||
|
const fileInput = L.DomUtil.create('input', '', fileBox)
|
||||||
|
const urlInput = L.DomUtil.create('input', '', container)
|
||||||
|
const rawInput = L.DomUtil.create('textarea', '', container)
|
||||||
|
const typeLabel = L.DomUtil.create('label', '', container)
|
||||||
|
const layerLabel = L.DomUtil.create('label', '', container)
|
||||||
|
const clearLabel = L.DomUtil.create('label', '', container)
|
||||||
|
const submitInput = L.DomUtil.create('input', '', container)
|
||||||
|
const map = this
|
||||||
|
let option
|
||||||
|
const types = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
|
||||||
|
title.textContent = L._('Import data')
|
||||||
|
fileInput.type = 'file'
|
||||||
|
fileInput.multiple = 'multiple'
|
||||||
|
submitInput.type = 'button'
|
||||||
|
submitInput.value = L._('Import')
|
||||||
|
submitInput.className = 'button'
|
||||||
|
typeLabel.textContent = L._('Choose the format of the data to import')
|
||||||
|
this.help.button(typeLabel, 'importFormats')
|
||||||
|
const typeInput = L.DomUtil.create('select', '', typeLabel)
|
||||||
|
typeInput.name = 'format'
|
||||||
|
layerLabel.textContent = L._('Choose the layer to import in')
|
||||||
|
const layerInput = L.DomUtil.create('select', '', layerLabel)
|
||||||
|
layerInput.name = 'datalayer'
|
||||||
|
urlInput.type = 'text'
|
||||||
|
urlInput.placeholder = L._('Provide an URL here')
|
||||||
|
rawInput.placeholder = L._('Paste your data here')
|
||||||
|
clearLabel.textContent = L._('Replace layer content')
|
||||||
|
const clearFlag = L.DomUtil.create('input', '', clearLabel)
|
||||||
|
clearFlag.type = 'checkbox'
|
||||||
|
clearFlag.name = 'clear'
|
||||||
|
this.eachDataLayerReverse((datalayer) => {
|
||||||
|
if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
|
||||||
|
const id = L.stamp(datalayer)
|
||||||
|
option = L.DomUtil.create('option', '', layerInput)
|
||||||
|
option.value = id
|
||||||
|
option.textContent = datalayer.options.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
L.DomUtil.element(
|
||||||
|
'option',
|
||||||
|
{ value: '', textContent: L._('Import in a new layer') },
|
||||||
|
layerInput
|
||||||
|
)
|
||||||
|
L.DomUtil.element(
|
||||||
|
'option',
|
||||||
|
{ value: '', textContent: L._('Choose the data format') },
|
||||||
|
typeInput
|
||||||
|
)
|
||||||
|
for (let i = 0; i < types.length; i++) {
|
||||||
|
option = L.DomUtil.create('option', '', typeInput)
|
||||||
|
option.value = option.textContent = types[i]
|
||||||
|
}
|
||||||
|
if (this.options.importPresets.length) {
|
||||||
|
const noPreset = L.DomUtil.create('option', '', presetSelect)
|
||||||
|
noPreset.value = noPreset.textContent = L._('Choose a preset')
|
||||||
|
for (let j = 0; j < this.options.importPresets.length; j++) {
|
||||||
|
option = L.DomUtil.create('option', '', presetSelect)
|
||||||
|
option.value = this.options.importPresets[j].url
|
||||||
|
option.textContent = this.options.importPresets[j].label
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
presetBox.style.display = 'none'
|
||||||
|
}
|
||||||
|
|
||||||
format: function (mode) {
|
const submit = function () {
|
||||||
const type = this.EXPORT_TYPES[mode || 'umap']
|
let type = typeInput.value
|
||||||
const content = type.formatter(this)
|
const layerId = layerInput[layerInput.selectedIndex].value
|
||||||
let name = this.options.name || 'data'
|
let layer
|
||||||
name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
|
if (type === 'umap') {
|
||||||
const filename = name + type.ext
|
this.once('postsync', function () {
|
||||||
return { content, filetype: type.filetype, filename }
|
this.setView(this.latLng(this.options.center), this.options.zoom)
|
||||||
},
|
})
|
||||||
|
}
|
||||||
download: function (mode) {
|
if (layerId) layer = map.datalayers[layerId]
|
||||||
const { content, filetype, filename } = this.format(mode)
|
if (layer && clearFlag.checked) layer.empty()
|
||||||
const blob = new Blob([content], { type: filetype })
|
if (fileInput.files.length) {
|
||||||
window.URL = window.URL || window.webkitURL
|
for (let i = 0, file; (file = fileInput.files[i]); i++) {
|
||||||
const el = document.createElement('a')
|
this.processFileToImport(file, layer, type)
|
||||||
el.download = filename
|
}
|
||||||
el.href = window.URL.createObjectURL(blob)
|
} else {
|
||||||
el.style.display = 'none'
|
if (!type)
|
||||||
document.body.appendChild(el)
|
return this.ui.alert({
|
||||||
el.click()
|
content: L._('Please choose a format'),
|
||||||
document.body.removeChild(el)
|
level: 'error',
|
||||||
|
})
|
||||||
|
if (rawInput.value && type === 'umap') {
|
||||||
|
try {
|
||||||
|
this.importRaw(rawInput.value, type)
|
||||||
|
} catch (e) {
|
||||||
|
this.ui.alert({ content: L._('Invalid umap data'), level: 'error' })
|
||||||
|
console.error(e)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!layer) layer = this.createDataLayer()
|
||||||
|
if (rawInput.value) layer.importRaw(rawInput.value, type)
|
||||||
|
else if (urlInput.value) layer.importFromUrl(urlInput.value, type)
|
||||||
|
else if (presetSelect.selectedIndex > 0)
|
||||||
|
layer.importFromUrl(presetSelect[presetSelect.selectedIndex].value, type)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
L.DomEvent.on(submitInput, 'click', submit, this)
|
||||||
|
L.DomEvent.on(
|
||||||
|
fileInput,
|
||||||
|
'change',
|
||||||
|
(e) => {
|
||||||
|
let type = '',
|
||||||
|
newType
|
||||||
|
for (let i = 0; i < e.target.files.length; i++) {
|
||||||
|
newType = L.Util.detectFileType(e.target.files[i])
|
||||||
|
if (!type && newType) type = newType
|
||||||
|
if (type && newType !== type) {
|
||||||
|
type = ''
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
typeInput.value = type
|
||||||
|
},
|
||||||
|
this
|
||||||
|
)
|
||||||
|
this.ui.openPanel({ data: { html: container }, className: 'dark' })
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -804,150 +804,32 @@ L.U.Map.include({
|
||||||
return geojson
|
return geojson
|
||||||
},
|
},
|
||||||
|
|
||||||
importPanel: function () {
|
fullDownload: function () {
|
||||||
const container = L.DomUtil.create('div', 'umap-upload')
|
// Make sure all data is loaded before downloading
|
||||||
const title = L.DomUtil.create('h4', '', container)
|
this.once('dataloaded', () => this.download())
|
||||||
const presetBox = L.DomUtil.create('div', 'formbox', container)
|
this.loadDatalayers(true) // Force load
|
||||||
const presetSelect = L.DomUtil.create('select', '', presetBox)
|
},
|
||||||
const fileBox = L.DomUtil.create('div', 'formbox', container)
|
|
||||||
const fileInput = L.DomUtil.create('input', '', fileBox)
|
|
||||||
const urlInput = L.DomUtil.create('input', '', container)
|
|
||||||
const rawInput = L.DomUtil.create('textarea', '', container)
|
|
||||||
const typeLabel = L.DomUtil.create('label', '', container)
|
|
||||||
const layerLabel = L.DomUtil.create('label', '', container)
|
|
||||||
const clearLabel = L.DomUtil.create('label', '', container)
|
|
||||||
const submitInput = L.DomUtil.create('input', '', container)
|
|
||||||
const map = this
|
|
||||||
let option
|
|
||||||
const types = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
|
|
||||||
title.textContent = L._('Import data')
|
|
||||||
fileInput.type = 'file'
|
|
||||||
fileInput.multiple = 'multiple'
|
|
||||||
submitInput.type = 'button'
|
|
||||||
submitInput.value = L._('Import')
|
|
||||||
submitInput.className = 'button'
|
|
||||||
typeLabel.textContent = L._('Choose the format of the data to import')
|
|
||||||
this.help.button(typeLabel, 'importFormats')
|
|
||||||
const typeInput = L.DomUtil.create('select', '', typeLabel)
|
|
||||||
typeInput.name = 'format'
|
|
||||||
layerLabel.textContent = L._('Choose the layer to import in')
|
|
||||||
const layerInput = L.DomUtil.create('select', '', layerLabel)
|
|
||||||
layerInput.name = 'datalayer'
|
|
||||||
urlInput.type = 'text'
|
|
||||||
urlInput.placeholder = L._('Provide an URL here')
|
|
||||||
rawInput.placeholder = L._('Paste your data here')
|
|
||||||
clearLabel.textContent = L._('Replace layer content')
|
|
||||||
const clearFlag = L.DomUtil.create('input', '', clearLabel)
|
|
||||||
clearFlag.type = 'checkbox'
|
|
||||||
clearFlag.name = 'clear'
|
|
||||||
this.eachDataLayerReverse((datalayer) => {
|
|
||||||
if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
|
|
||||||
const id = L.stamp(datalayer)
|
|
||||||
option = L.DomUtil.create('option', '', layerInput)
|
|
||||||
option.value = id
|
|
||||||
option.textContent = datalayer.options.name
|
|
||||||
}
|
|
||||||
})
|
|
||||||
L.DomUtil.element(
|
|
||||||
'option',
|
|
||||||
{ value: '', textContent: L._('Import in a new layer') },
|
|
||||||
layerInput
|
|
||||||
)
|
|
||||||
L.DomUtil.element(
|
|
||||||
'option',
|
|
||||||
{ value: '', textContent: L._('Choose the data format') },
|
|
||||||
typeInput
|
|
||||||
)
|
|
||||||
for (let i = 0; i < types.length; i++) {
|
|
||||||
option = L.DomUtil.create('option', '', typeInput)
|
|
||||||
option.value = option.textContent = types[i]
|
|
||||||
}
|
|
||||||
if (this.options.importPresets.length) {
|
|
||||||
const noPreset = L.DomUtil.create('option', '', presetSelect)
|
|
||||||
noPreset.value = noPreset.textContent = L._('Choose a preset')
|
|
||||||
for (let j = 0; j < this.options.importPresets.length; j++) {
|
|
||||||
option = L.DomUtil.create('option', '', presetSelect)
|
|
||||||
option.value = this.options.importPresets[j].url
|
|
||||||
option.textContent = this.options.importPresets[j].label
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
presetBox.style.display = 'none'
|
|
||||||
}
|
|
||||||
|
|
||||||
const submit = function () {
|
format: function (mode) {
|
||||||
let type = typeInput.value
|
const type = this.EXPORT_TYPES[mode || 'umap']
|
||||||
const layerId = layerInput[layerInput.selectedIndex].value
|
const content = type.formatter(this)
|
||||||
let layer
|
let name = this.options.name || 'data'
|
||||||
if (type === 'umap') {
|
name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
|
||||||
this.once('postsync', function () {
|
const filename = name + type.ext
|
||||||
this.setView(this.latLng(this.options.center), this.options.zoom)
|
return { content, filetype: type.filetype, filename }
|
||||||
})
|
},
|
||||||
}
|
|
||||||
if (layerId) layer = map.datalayers[layerId]
|
download: function (mode) {
|
||||||
if (layer && clearFlag.checked) layer.empty()
|
const { content, filetype, filename } = this.format(mode)
|
||||||
if (fileInput.files.length) {
|
const blob = new Blob([content], { type: filetype })
|
||||||
let file
|
window.URL = window.URL || window.webkitURL
|
||||||
for (let i = 0, file; (file = fileInput.files[i]); i++) {
|
const el = document.createElement('a')
|
||||||
type = type || L.Util.detectFileType(file)
|
el.download = filename
|
||||||
if (!type) {
|
el.href = window.URL.createObjectURL(blob)
|
||||||
this.ui.alert({
|
el.style.display = 'none'
|
||||||
content: L._('Unable to detect format of file {filename}', {
|
document.body.appendChild(el)
|
||||||
filename: file.name,
|
el.click()
|
||||||
}),
|
document.body.removeChild(el)
|
||||||
level: 'error',
|
|
||||||
})
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
if (type === 'umap') {
|
|
||||||
this.importFromFile(file, 'umap')
|
|
||||||
} else {
|
|
||||||
let importLayer = layer
|
|
||||||
if (!layer) importLayer = this.createDataLayer({ name: file.name })
|
|
||||||
importLayer.importFromFile(file, type)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (!type)
|
|
||||||
return this.ui.alert({
|
|
||||||
content: L._('Please choose a format'),
|
|
||||||
level: 'error',
|
|
||||||
})
|
|
||||||
if (rawInput.value && type === 'umap') {
|
|
||||||
try {
|
|
||||||
this.importRaw(rawInput.value, type)
|
|
||||||
} catch (e) {
|
|
||||||
this.ui.alert({ content: L._('Invalid umap data'), level: 'error' })
|
|
||||||
console.error(e)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (!layer) layer = this.createDataLayer()
|
|
||||||
if (rawInput.value) layer.importRaw(rawInput.value, type)
|
|
||||||
else if (urlInput.value) layer.importFromUrl(urlInput.value, type)
|
|
||||||
else if (presetSelect.selectedIndex > 0)
|
|
||||||
layer.importFromUrl(presetSelect[presetSelect.selectedIndex].value, type)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
L.DomEvent.on(submitInput, 'click', submit, this)
|
|
||||||
L.DomEvent.on(
|
|
||||||
fileInput,
|
|
||||||
'change',
|
|
||||||
(e) => {
|
|
||||||
let type = '',
|
|
||||||
newType
|
|
||||||
for (let i = 0; i < e.target.files.length; i++) {
|
|
||||||
newType = L.Util.detectFileType(e.target.files[i])
|
|
||||||
if (!type && newType) type = newType
|
|
||||||
if (type && newType !== type) {
|
|
||||||
type = ''
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
typeInput.value = type
|
|
||||||
},
|
|
||||||
this
|
|
||||||
)
|
|
||||||
this.ui.openPanel({ data: { html: container }, className: 'dark' })
|
|
||||||
},
|
},
|
||||||
|
|
||||||
importRaw: function (rawData) {
|
importRaw: function (rawData) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue