Move Map.renderShareBox to controls, for consistency

This commit is contained in:
Yohan Boniface 2023-06-23 18:09:35 +02:00
parent 06cdb55a6c
commit ec021c7d02
2 changed files with 133 additions and 133 deletions

View file

@ -1018,6 +1018,139 @@ L.U.Map.include({
} }
this.ui.openPanel({ data: { html: container }, actions: actions }) this.ui.openPanel({ data: { html: container }, actions: actions })
}, },
renderShareBox: function () {
const container = L.DomUtil.create('div', 'umap-share')
const embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map'))
const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', container)
const urlTitle = L.DomUtil.add('h4', '', container, L._('Direct link'))
const exportUrl = L.DomUtil.create('input', 'umap-share-url', container)
let option
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.HIDDABLE_CONTROLS.length; i++) {
UIFields.push(`queryString.${this.HIDDABLE_CONTROLS[i]}Control`)
}
const iframeExporter = new L.U.IframeExporter(this)
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(container, L._('Export options'))
iframeOptions.appendChild(builder.build())
if (this.options.shortUrl) {
L.DomUtil.create('hr', '', container)
L.DomUtil.add('h4', '', container, L._('Short URL'))
const shortUrl = L.DomUtil.create('input', 'umap-short-url', container)
shortUrl.type = 'text'
shortUrl.value = this.options.shortUrl
}
L.DomUtil.create('hr', '', container)
L.DomUtil.add('h4', '', container, L._('Download data'))
const typeInput = L.DomUtil.create('select', '', container)
typeInput.name = 'format'
const exportCaveat = L.DomUtil.add(
'small',
'help-text',
container,
L._('Only visible features will be downloaded.')
)
exportCaveat.id = 'export_caveat_text'
const toggleCaveat = () => {
if (typeInput.value === 'umap') exportCaveat.style.display = 'none'
else exportCaveat.style.display = 'inherit'
}
L.DomEvent.on(typeInput, 'change', toggleCaveat)
const 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/xml',
},
kml: {
formatter: function (map) {
return tokml(map.toGeoJSON())
},
ext: '.kml',
filetype: 'application/vnd.google-earth.kml+xml',
},
umap: {
name: L._('Full map data'),
formatter: function (map) {
return map.serialize()
},
ext: '.umap',
filetype: 'application/json',
selected: true,
},
}
for (const key in types) {
if (types.hasOwnProperty(key)) {
option = L.DomUtil.create('option', '', typeInput)
option.value = key
option.textContent = types[key].name || key
if (types[key].selected) option.selected = true
}
}
toggleCaveat()
const download = L.DomUtil.create('a', 'button', container)
download.textContent = L._('Download data')
L.DomEvent.on(
download,
'click',
() => {
const type = types[typeInput.value]
const content = type.formatter(this)
let name = this.options.name || 'data'
name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
download.download = name + type.ext
window.URL = window.URL || window.webkitURL
const blob = new Blob([content], { type: type.filetype })
download.href = window.URL.createObjectURL(blob)
},
this
)
this.ui.openPanel({ data: { html: container } })
},
}) })
L.U.TileLayerControl = L.Control.extend({ L.U.TileLayerControl = L.Control.extend({

View file

@ -729,139 +729,6 @@ L.U.Map.include({
if (this._controls.datalayers) this._controls.datalayers.openPanel() if (this._controls.datalayers) this._controls.datalayers.openPanel()
}, },
renderShareBox: function () {
const container = L.DomUtil.create('div', 'umap-share')
const embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map'))
const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', container)
const urlTitle = L.DomUtil.add('h4', '', container, L._('Direct link'))
const exportUrl = L.DomUtil.create('input', 'umap-share-url', container)
let option
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.HIDDABLE_CONTROLS.length; i++) {
UIFields.push(`queryString.${this.HIDDABLE_CONTROLS[i]}Control`)
}
const iframeExporter = new L.U.IframeExporter(this)
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(container, L._('Export options'))
iframeOptions.appendChild(builder.build())
if (this.options.shortUrl) {
L.DomUtil.create('hr', '', container)
L.DomUtil.add('h4', '', container, L._('Short URL'))
const shortUrl = L.DomUtil.create('input', 'umap-short-url', container)
shortUrl.type = 'text'
shortUrl.value = this.options.shortUrl
}
L.DomUtil.create('hr', '', container)
L.DomUtil.add('h4', '', container, L._('Download data'))
const typeInput = L.DomUtil.create('select', '', container)
typeInput.name = 'format'
const exportCaveat = L.DomUtil.add(
'small',
'help-text',
container,
L._('Only visible features will be downloaded.')
)
exportCaveat.id = 'export_caveat_text'
const toggleCaveat = () => {
if (typeInput.value === 'umap') exportCaveat.style.display = 'none'
else exportCaveat.style.display = 'inherit'
}
L.DomEvent.on(typeInput, 'change', toggleCaveat)
const 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/xml',
},
kml: {
formatter: function (map) {
return tokml(map.toGeoJSON())
},
ext: '.kml',
filetype: 'application/vnd.google-earth.kml+xml',
},
umap: {
name: L._('Full map data'),
formatter: function (map) {
return map.serialize()
},
ext: '.umap',
filetype: 'application/json',
selected: true,
},
}
for (const key in types) {
if (types.hasOwnProperty(key)) {
option = L.DomUtil.create('option', '', typeInput)
option.value = key
option.textContent = types[key].name || key
if (types[key].selected) option.selected = true
}
}
toggleCaveat()
const download = L.DomUtil.create('a', 'button', container)
download.textContent = L._('Download data')
L.DomEvent.on(
download,
'click',
() => {
const type = types[typeInput.value]
const content = type.formatter(this)
let name = this.options.name || 'data'
name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
download.download = name + type.ext
window.URL = window.URL || window.webkitURL
const blob = new Blob([content], { type: type.filetype })
download.href = window.URL.createObjectURL(blob)
},
this
)
this.ui.openPanel({ data: { html: container } })
},
toGeoJSON: function () { toGeoJSON: function () {
let features = [] let features = []
this.eachDataLayer((datalayer) => { this.eachDataLayer((datalayer) => {