@@ -115,10 +115,11 @@ export default class Share {
'queryString.captionBar',
'queryString.captionMenus',
]
- for (let i = 0; i < this.map.HIDDABLE_CONTROLS.length; i++) {
- UIFields.push(`queryString.${this.map.HIDDABLE_CONTROLS[i]}Control`)
+ // TODO: move HIDDABLE_CONTROLS to SCHEMA ?
+ for (const name of this.umap._leafletMap.HIDDABLE_CONTROLS) {
+ UIFields.push(`queryString.${name}Control`)
}
- const iframeExporter = new IframeExporter(this.map)
+ const iframeExporter = new IframeExporter(this.umap)
const buildIframeCode = () => {
iframe.textContent = iframeExporter.build()
exportUrl.value = window.location.protocol + iframeExporter.buildUrl()
@@ -136,13 +137,13 @@ export default class Share {
open() {
if (!this.container) this.build()
- this.map.panel.open({ content: this.container })
+ this.umap.panel.open({ content: this.container })
}
async format(mode) {
const type = EXPORT_FORMATS[mode]
- const content = await type.formatter(this.map)
- const filename = Utils.slugify(this.map.options.name) + type.ext
+ const content = await type.formatter(this.umap)
+ const filename = Utils.slugify(this.umap.properties.name) + type.ext
return { content, filetype: type.filetype, filename }
}
@@ -161,8 +162,8 @@ export default class Share {
}
class IframeExporter {
- constructor(map) {
- this.map = map
+ constructor(umap) {
+ this.umap = umap
this.baseUrl = Utils.getBaseUrl()
this.options = {
includeFullScreenLink: true,
@@ -192,22 +193,18 @@ class IframeExporter {
height: '300px',
}
// Use map default, not generic default
- this.queryString.onLoadPanel = this.map.getOption('onLoadPanel')
- }
-
- getMap() {
- return this.map
+ this.queryString.onLoadPanel = this.umap.getOption('onLoadPanel')
}
buildUrl(options) {
const datalayers = []
- if (this.options.viewCurrentFeature && this.map.currentFeature) {
- this.queryString.feature = this.map.currentFeature.getSlug()
+ if (this.options.viewCurrentFeature && this.umap.currentFeature) {
+ this.queryString.feature = this.umap.currentFeature.getSlug()
} else {
delete this.queryString.feature
}
if (this.options.keepCurrentDatalayers) {
- this.map.eachDataLayer((datalayer) => {
+ this.umap.eachDataLayer((datalayer) => {
if (datalayer.isVisible() && datalayer.umap_id) {
datalayers.push(datalayer.umap_id)
}
diff --git a/umap/static/umap/js/modules/slideshow.js b/umap/static/umap/js/modules/slideshow.js
index ef73d4b0..6d3e8a67 100644
--- a/umap/static/umap/js/modules/slideshow.js
+++ b/umap/static/umap/js/modules/slideshow.js
@@ -13,20 +13,20 @@ const TOOLBOX_TEMPLATE = `
`
export default class Slideshow extends WithTemplate {
- constructor(map, options) {
+ constructor(umap, options) {
super()
- this.map = map
+ this.umap = umap
this._id = null
this.CLASSNAME = 'umap-slideshow-active'
this.setOptions(options)
this._current = null
if (this.options.autoplay) {
- this.map.onceDataLoaded(function () {
+ this.umap.onceDataLoaded(function () {
this.play()
}, this)
}
- this.map.on(
+ this.umap._leafletMap.on(
'edit:enabled',
function () {
this.stop()
@@ -65,7 +65,7 @@ export default class Slideshow extends WithTemplate {
}
defaultDatalayer() {
- return this.map.findDataLayer((d) => d.canBrowse())
+ return this.umap.findDataLayer((d) => d.canBrowse())
}
startSpinner() {
@@ -83,7 +83,7 @@ export default class Slideshow extends WithTemplate {
play() {
if (this._id) return
- if (this.map.editEnabled || !this.map.options.slideshow.active) return
+ if (this.umap.editEnabled || !this.umap.options.slideshow.active) return
L.DomUtil.addClass(document.body, this.CLASSNAME)
this._id = window.setInterval(L.bind(this.loop, this), this.options.delay)
this.startSpinner()
diff --git a/umap/static/umap/js/modules/tableeditor.js b/umap/static/umap/js/modules/tableeditor.js
index 79fb6c54..f04734d1 100644
--- a/umap/static/umap/js/modules/tableeditor.js
+++ b/umap/static/umap/js/modules/tableeditor.js
@@ -17,7 +17,7 @@ export default class TableEditor extends WithTemplate {
constructor(datalayer) {
super()
this.datalayer = datalayer
- this.map = this.datalayer.map
+ this.umap = this.datalayer.umap
this.contextmenu = new ContextMenu({ className: 'dark' })
this.table = this.loadTemplate(TEMPLATE)
if (!this.datalayer.isRemoteLayer()) {
@@ -36,20 +36,20 @@ export default class TableEditor extends WithTemplate {
openHeaderMenu(property) {
const actions = []
let filterItem
- if (this.map.facets.has(property)) {
+ if (this.umap.facets.has(property)) {
filterItem = {
label: translate('Remove filter for this column'),
action: () => {
- this.map.facets.remove(property)
- this.map.browser.open('filters')
+ this.umap.facets.remove(property)
+ this.umap.browser.open('filters')
},
}
} else {
filterItem = {
label: translate('Add filter for this column'),
action: () => {
- this.map.facets.add(property)
- this.map.browser.open('filters')
+ this.umap.facets.add(property)
+ this.umap.browser.open('filters')
},
}
}
@@ -86,8 +86,8 @@ export default class TableEditor extends WithTemplate {
}
renderBody() {
- const bounds = this.map.getBounds()
- const inBbox = this.map.browser.options.inBbox
+ const bounds = this.umap._leafletMap.getBounds()
+ const inBbox = this.umap.browser.options.inBbox
let html = ''
this.datalayer.eachFeature((feature) => {
if (feature.isFiltered()) return
@@ -121,7 +121,7 @@ export default class TableEditor extends WithTemplate {
}
renameProperty(property) {
- this.map.dialog
+ this.umap.dialog
.prompt(translate('Please enter the new name of this property'))
.then(({ prompt }) => {
if (!prompt || !this.validateName(prompt)) return
@@ -135,7 +135,7 @@ export default class TableEditor extends WithTemplate {
}
deleteProperty(property) {
- this.map.dialog
+ this.umap.dialog
.confirm(
translate('Are you sure you want to delete this property on all the features?')
)
@@ -150,7 +150,7 @@ export default class TableEditor extends WithTemplate {
}
addProperty() {
- this.map.dialog
+ this.umap.dialog
.prompt(translate('Please enter the name of the property'))
.then(({ prompt }) => {
if (!prompt || !this.validateName(prompt)) return
@@ -187,10 +187,10 @@ export default class TableEditor extends WithTemplate {
`)
- filterButton.addEventListener('click', () => this.map.browser.open('filters'))
+ filterButton.addEventListener('click', () => this.umap.browser.open('filters'))
actions.push(filterButton)
- this.map.fullPanel.open({
+ this.umap.fullPanel.open({
content: this.table,
className: 'umap-table-editor',
actions: actions,
@@ -304,7 +304,7 @@ export default class TableEditor extends WithTemplate {
deleteRows() {
const selectedRows = this.getSelectedRows()
if (!selectedRows.length) return
- this.map.dialog
+ this.umap.dialog
.confirm(
translate('Found {count} rows. Are you sure you want to delete all?', {
count: selectedRows.length,
@@ -320,9 +320,9 @@ export default class TableEditor extends WithTemplate {
this.datalayer.show()
this.datalayer.dataChanged()
this.renderBody()
- if (this.map.browser.isOpen()) {
- this.map.browser.resetFilters()
- this.map.browser.open('filters')
+ if (this.umap.browser.isOpen()) {
+ this.umap.browser.resetFilters()
+ this.umap.browser.open('filters')
}
})
}
diff --git a/umap/static/umap/js/modules/ui/panel.js b/umap/static/umap/js/modules/ui/panel.js
index ec6dd530..6d0c14bd 100644
--- a/umap/static/umap/js/modules/ui/panel.js
+++ b/umap/static/umap/js/modules/ui/panel.js
@@ -2,9 +2,9 @@ import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
import { translate } from '../i18n.js'
export class Panel {
- constructor(map) {
- this.parent = map._controlContainer
- this.map = map
+ constructor(umap) {
+ this.parent = umap._leafletMap._controlContainer
+ this.umap = umap
this.container = DomUtil.create('div', '', this.parent)
// This will be set once according to the panel configurated at load
// or by using panels as popups
@@ -80,26 +80,26 @@ export class Panel {
onClose() {
if (DomUtil.hasClass(this.container, 'on')) {
DomUtil.removeClass(this.container, 'on')
- this.map.invalidateSize({ pan: false })
+ this.umap._leafletMap.invalidateSize({ pan: false })
}
}
}
export class EditPanel extends Panel {
- constructor(map) {
- super(map)
+ constructor(umap) {
+ super(umap)
this.className = 'right dark'
}
onClose() {
super.onClose()
- this.map.editedFeature = null
+ this.umap.editedFeature = null
}
}
export class FullPanel extends Panel {
- constructor(map) {
- super(map)
+ constructor(umap) {
+ super(umap)
this.className = 'full dark'
this.mode = 'expanded'
}
diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js
new file mode 100644
index 00000000..11063595
--- /dev/null
+++ b/umap/static/umap/js/modules/umap.js
@@ -0,0 +1,1603 @@
+import { DomUtil, DomEvent } from '../../vendors/leaflet/leaflet-src.esm.js'
+import { translate, setLocale, getLocale } from './i18n.js'
+import * as Utils from './utils.js'
+import { ServerStored } from './saving.js'
+import * as SAVEMANAGER from './saving.js'
+import { SyncEngine } from './sync/engine.js'
+import { LeafletMap } from './rendering/map.js'
+import URLs from './urls.js'
+import { Panel, EditPanel, FullPanel } from './ui/panel.js'
+import Dialog from './ui/dialog.js'
+import Tooltip from './ui/tooltip.js'
+import ContextMenu from './ui/contextmenu.js'
+import { Request, ServerRequest } from './request.js'
+import Help from './help.js'
+import { Formatter } from './formatter.js'
+import Slideshow from './slideshow.js'
+import { MapPermissions } from './permissions.js'
+import { SCHEMA } from './schema.js'
+import { DataLayer } from './data/layer.js'
+import Facets from './facets.js'
+import Browser from './browser.js'
+import Caption from './caption.js'
+import Importer from './importer.js'
+import Rules from './rules.js'
+import Share from './share.js'
+import {
+ uMapAlertCreation as AlertCreation,
+ uMapAlert as Alert,
+} from '../components/alerts/alert.js'
+
+export default class Umap extends ServerStored {
+ constructor(element, geojson) {
+ super()
+ // We need to call async function in the init process,
+ // the init itself does not need to be awaited, but some calls
+ // in the process must be blocker
+ this.init(element, geojson)
+ }
+
+ async init(element, geojson) {
+ this.properties = Object.assign(
+ {
+ enableMarkerDraw: true,
+ enablePolygonDraw: true,
+ enablePolylineDraw: true,
+ hash: true,
+ limitBounds: {},
+ },
+ geojson.properties
+ )
+ this.searchParams = new URLSearchParams(window.location.search)
+
+ this.sync_engine = new SyncEngine(this)
+ this.sync = this.sync_engine.proxy(this)
+ // Locale name (pt_PT, en_US…)
+ // To be used for Django localization
+ if (geojson.properties.locale) setLocale(geojson.properties.locale)
+
+ // Language code (pt-pt, en-us…)
+ // To be used in javascript APIs
+ if (geojson.properties.lang) U.lang = geojson.properties.lang
+
+ this.setPropertiesFromQueryString()
+
+ // Needed for actions labels
+ this.help = new Help(this)
+ // Prevent default creation of controls
+ const zoomControl = this.properties.zoomControl
+ const fullscreenControl = this.properties.fullscreenControl
+ const center = geojson.geometry
+ this.properties.zoomControl = false
+ this.properties.fullscreenControl = false
+
+ this._leafletMap = new LeafletMap(this, element)
+
+ this.properties.zoomControl = zoomControl !== undefined ? zoomControl : true
+ this.properties.fullscreenControl =
+ fullscreenControl !== undefined ? fullscreenControl : true
+
+ if (center) {
+ this._leafletMap.options.center = this._leafletMap.latLng(center)
+ }
+ this._leafletMap.attachToDom()
+
+ if (geojson.properties.schema) this.overrideSchema(geojson.properties.schema)
+
+ this.urls = new URLs(this.properties.urls)
+
+ this.panel = new Panel(this)
+ this.dialog = new Dialog({ className: 'dark' })
+ this.tooltip = new Tooltip(this._leafletMap._controlContainer)
+ this.contextmenu = new ContextMenu()
+ if (this.hasEditMode()) {
+ this.editPanel = new EditPanel(this)
+ this.fullPanel = new FullPanel(this)
+ }
+ this.server = new ServerRequest()
+ this.request = new Request()
+ this.facets = new Facets(this)
+ this.browser = new Browser(this)
+ this.caption = new Caption(this)
+ this.importer = new Importer(this)
+ this.share = new Share(this)
+ this.rules = new Rules(this)
+
+ this.datalayersFromQueryString = this.searchParams.get('datalayers')
+ if (this.datalayersFromQueryString) {
+ this.datalayersFromQueryString = this.datalayersFromQueryString
+ .toString()
+ .split(',')
+ }
+
+ // Retrocompat
+ if (
+ this.properties.slideshow?.delay &&
+ this.properties.slideshow.active === undefined
+ ) {
+ this.properties.slideshow.active = true
+ }
+ if (this.properties.advancedFilterKey) {
+ this.properties.facetKey = this.properties.advancedFilterKey
+ delete this.properties.advancedFilterKey
+ }
+
+ // Global storage for retrieving datalayers and features.
+ this.datalayers = {} // All datalayers, including deleted.
+ this.datalayersIndex = [] // Datalayers actually on the map and ordered.
+ this.featuresIndex = {}
+
+ this.formatter = new Formatter(this)
+
+ this.initDataLayers()
+
+ if (this.properties.displayCaptionOnLoad) {
+ // Retrocompat
+ if (!this.properties.onLoadPanel) {
+ this.properties.onLoadPanel = 'caption'
+ }
+ delete this.properties.displayCaptionOnLoad
+ }
+ if (this.properties.displayDataBrowserOnLoad) {
+ // Retrocompat
+ if (!this.properties.onLoadPanel) {
+ this.properties.onLoadPanel = 'databrowser'
+ }
+ delete this.properties.displayDataBrowserOnLoad
+ }
+ if (this.properties.datalayersControl === 'expanded') {
+ if (!this.properties.onLoadPanel) {
+ this.properties.onLoadPanel = 'datalayers'
+ }
+ delete this.properties.datalayersControl
+ }
+ if (this.properties.onLoadPanel === 'facet') {
+ this.properties.onLoadPanel = 'datafilters'
+ }
+
+ // Creation mode
+ if (!this.properties.umap_id) {
+ if (!this.properties.preview) {
+ this.isDirty = true
+ this.enableEdit()
+ }
+ this._defaultExtent = true
+ this.properties.name = translate('Untitled map')
+ await this.loadDataFromQueryString()
+ }
+
+ this.slideshow = new Slideshow(this, this.properties.slideshow)
+ this.permissions = new MapPermissions(this)
+ if (this.hasEditMode()) {
+ this._leafletMap.initEditTools()
+ }
+
+ if (!this.properties.noControl) {
+ this.initShortcuts()
+ this._leafletMap.initCaptionBar()
+ this._leafletMap.on('contextmenu', this.onContextMenu)
+ this.onceDataLoaded(this.setViewFromQueryString)
+ this.propagate()
+ }
+
+ window.onbeforeunload = () => (this.editEnabled && SAVEMANAGER.isDirty) || null
+ this.backup()
+ }
+
+ get editedFeature() {
+ return this._editedFeature
+ }
+
+ set editedFeature(feature) {
+ if (this._editedFeature && this._editedFeature !== feature) {
+ this._editedFeature.endEdit()
+ }
+ this._editedFeature = feature
+ this._leafletMap.fire('seteditedfeature')
+ }
+
+ setPropertiesFromQueryString() {
+ const asBoolean = (key) => {
+ const value = this.searchParams.get(key)
+ if (value !== undefined && value !== null) {
+ this.properties[key] = value === '1' || value === 'true'
+ }
+ }
+ const asNullableBoolean = (key) => {
+ if (this.searchParams.has(key)) {
+ let value = this.searchParams.get(key)
+ if (value === 'null') value = null
+ else if (value === '0' || value === 'false') value = false
+ else value = true
+ this.properties[key] = value
+ }
+ }
+ const asNumber = (key) => {
+ const value = +this.searchParams.get(key)
+ if (!Number.isNaN(value)) this.properties[name] = value
+ }
+ // FIXME retrocompat
+ asBoolean('displayDataBrowserOnLoad')
+ asBoolean('displayCaptionOnLoad')
+ for (const [key, schema] of Object.entries(U.SCHEMA)) {
+ switch (schema.type) {
+ case Boolean:
+ if (schema.nullable) asNullableBoolean(key)
+ else asBoolean(key)
+ break
+ case Number:
+ asNumber(key)
+ break
+ case String: {
+ if (this.searchParams.has(key)) {
+ const value = this.searchParams.get(key)
+ if (value !== undefined) this.properties[key] = value
+ break
+ }
+ }
+ }
+ }
+ // Specific case for datalayersControl
+ // which accepts "expanded" value, on top of true/false/null
+ if (this.searchParams.get('datalayersControl') === 'expanded') {
+ if (!this.properties.onLoadPanel) {
+ this.properties.onLoadPanel = 'datalayers'
+ }
+ }
+ }
+
+ async setViewFromQueryString() {
+ if (this.properties.noControl) return
+ // TODO: move to a "initPanel" function
+ if (this.searchParams.has('share')) {
+ this.share.open()
+ } else if (this.properties.onLoadPanel === 'databrowser') {
+ this.panel.setDefaultMode('expanded')
+ this.openBrowser('data')
+ } else if (this.properties.onLoadPanel === 'datalayers') {
+ this.panel.setDefaultMode('condensed')
+ this.openBrowser('layers')
+ } else if (this.properties.onLoadPanel === 'datafilters') {
+ this.panel.setDefaultMode('expanded')
+ this.openBrowser('filters')
+ } else if (this.properties.onLoadPanel === 'caption') {
+ this.panel.setDefaultMode('condensed')
+ this.openCaption()
+ }
+ // Comes after default panels, so if it opens in a panel it will
+ // take precedence.
+ const slug = this.searchParams.get('feature')
+ if (slug && this.featuresIndex[slug]) this.featuresIndex[slug].view()
+ if (this.searchParams.has('edit')) {
+ if (this.hasEditMode()) this.enableEdit()
+ // Sometimes users share the ?edit link by mistake, let's remove
+ // this search parameter from URL to prevent this
+ const url = new URL(window.location)
+ url.searchParams.delete('edit')
+ history.pushState({}, '', url)
+ }
+ if (this.searchParams.has('download')) {
+ const download_url = this.urls.get('map_download', {
+ map_id: this.properties.umap_id,
+ })
+ window.location = download_url
+ }
+ }
+
+ async loadDataFromQueryString() {
+ let data = this.searchParams.get('data')
+ const dataUrls = this.searchParams.getAll('dataUrl')
+ const dataFormat = this.searchParams.get('dataFormat') || 'geojson'
+ if (dataUrls.length) {
+ for (let dataUrl of dataUrls) {
+ dataUrl = decodeURIComponent(dataUrl)
+ dataUrl = this.localizeUrl(dataUrl)
+ dataUrl = this.proxyUrl(dataUrl)
+ const datalayer = this.createDataLayer()
+ await datalayer.importFromUrl(dataUrl, dataFormat)
+ }
+ } else if (data) {
+ data = decodeURIComponent(data)
+ const datalayer = this.createDataLayer()
+ await datalayer.importRaw(data, dataFormat)
+ }
+ }
+
+ getOwnContextMenuItems(event) {
+ const items = []
+ if (this.hasEditMode()) {
+ if (this.editEnabled) {
+ if (!SAVEMANAGER.isDirty) {
+ items.push({
+ label: this.help.displayLabel('STOP_EDIT'),
+ action: () => this.disableEdit(),
+ })
+ }
+ if (this.properties.enableMarkerDraw) {
+ items.push({
+ label: this.help.displayLabel('DRAW_MARKER'),
+ action: () => this._leafletMap.startMarker(event),
+ })
+ }
+ if (this.properties.enablePolylineDraw) {
+ items.push({
+ label: this.help.displayLabel('DRAW_POLYGON'),
+ action: () => this._leafletMap.startPolygon(event),
+ })
+ }
+ if (this.properties.enablePolygonDraw) {
+ items.push({
+ label: this.help.displayLabel('DRAW_LINE'),
+ action: () => this._leafletMap.startPolyline(event),
+ })
+ }
+ items.push('-')
+ items.push({
+ label: translate('Help'),
+ action: () => this.help.show('edit'),
+ })
+ } else {
+ items.push({
+ label: this.help.displayLabel('TOGGLE_EDIT'),
+ action: () => this.enableEdit(),
+ })
+ }
+ }
+ if (items.length) {
+ items.push('-')
+ }
+ items.push(
+ {
+ label: translate('Open browser'),
+ action: () => this.openBrowser('layers'),
+ },
+ {
+ label: translate('Browse data'),
+ action: () => this.openBrowser('data'),
+ }
+ )
+ if (this.properties.facetKey) {
+ items.push({
+ label: translate('Filter data'),
+ action: () => this.openBrowser('filters'),
+ })
+ }
+ items.push(
+ {
+ label: translate('Open caption'),
+ action: () => this.openCaption(),
+ },
+ {
+ label: this.help.displayLabel('SEARCH'),
+ action: () => this.search(),
+ }
+ )
+ return items
+ }
+
+ getContextMenuItems(event) {
+ const items = []
+ if (this.properties.urls.routing) {
+ items.push('-', {
+ label: translate('Directions from here'),
+ action: () => this.openExternalRouting(event),
+ })
+ }
+ if (this.properties.urls.edit_in_osm) {
+ items.push('-', {
+ label: translate('Edit in OpenStreetMap'),
+ action: () => this.editInOSM(event),
+ })
+ }
+ return items
+ }
+
+ onContextMenu(event) {
+ const items = this.getOwnContextMenuItems(event).concat(
+ this.getContextMenuItems(event)
+ )
+ this.contextmenu.open(event.originalEvent, items)
+ }
+
+ // Merge the given schema with the default one
+ // Missing keys inside the schema are merged with the default ones.
+ overrideSchema(schema) {
+ for (const [key, extra] of Object.entries(schema)) {
+ SCHEMA[key] = Object.assign({}, SCHEMA[key], extra)
+ }
+ }
+
+ hasEditMode() {
+ const editMode = this.properties.editMode
+ return editMode === 'simple' || editMode === 'advanced'
+ }
+
+ getDefaultOption(key) {
+ return SCHEMA[key]?.default
+ }
+
+ getOption(key, feature) {
+ if (feature) {
+ const value = this.rules.getOption(key, feature)
+ if (value !== undefined) return value
+ }
+ if (Utils.usableOption(this.properties, key)) return this.properties[key]
+ return this.getDefaultOption(key)
+ }
+
+ getGeoContext() {
+ const bounds = this._leafletMap.getBounds()
+ const center = this._leafletMap.getCenter()
+ const context = {
+ bbox: bounds.toBBoxString(),
+ north: bounds.getNorthEast().lat,
+ east: bounds.getNorthEast().lng,
+ south: bounds.getSouthWest().lat,
+ west: bounds.getSouthWest().lng,
+ lat: center.lat,
+ lng: center.lng,
+ zoom: this._leafletMap.getZoom(),
+ }
+ context.left = context.west
+ context.bottom = context.south
+ context.right = context.east
+ context.top = context.north
+ return context
+ }
+
+ localizeUrl(url) {
+ return Utils.greedyTemplate(url, this.getGeoContext(), true)
+ }
+
+ initShortcuts() {
+ const globalShortcuts = function (e) {
+ if (e.key === 'Escape') {
+ if (this.importer.dialog.visible) {
+ this.importer.dialog.close()
+ } else if (this.editEnabled && this._leafletMap.editTools.drawing()) {
+ this._leafletMap.editTools.onEscape()
+ } else if (this._leafletMap.measureTools.enabled()) {
+ this._leafletMap.measureTools.stopDrawing()
+ } else if (this.fullPanel?.isOpen()) {
+ this.fullPanel?.close()
+ } else if (this.editPanel?.isOpen()) {
+ this.editPanel?.close()
+ } else if (this.panel.isOpen()) {
+ this.panel.close()
+ }
+ }
+
+ // From now on, only ctrl/meta shortcut
+ if (!(e.ctrlKey || e.metaKey) || e.shiftKey) return
+
+ if (e.key === 'f') {
+ L.DomEvent.stop(e)
+ this.search()
+ }
+
+ /* Edit mode only shortcuts */
+ if (!this.hasEditMode()) return
+
+ // Edit mode Off
+ if (!this.editEnabled) {
+ switch (e.key) {
+ case 'e':
+ L.DomEvent.stop(e)
+ this.enableEdit()
+ break
+ }
+ return
+ }
+
+ // Edit mode on
+ let used = true
+ switch (e.key) {
+ case 'e':
+ if (!SAVEMANAGER.isDirty) this.disableEdit()
+ break
+ case 's':
+ if (SAVEMANAGER.isDirty) this.saveAll()
+ break
+ case 'z':
+ if (SAVEMANAGER.isDirty) this.askForReset()
+ break
+ case 'm':
+ this._leafletMap.editTools.startMarker()
+ break
+ case 'p':
+ this._leafletMap.editTools.startPolygon()
+ break
+ case 'l':
+ this._leafletMap.editTools.startPolyline()
+ break
+ case 'i':
+ this._leafletMap.importer.open()
+ break
+ case 'o':
+ this._leafletMap.importer.openFiles()
+ break
+ case 'h':
+ this.help.show('edit')
+ break
+ default:
+ used = false
+ }
+ if (used) DomEvent.stop(e)
+ }
+ DomEvent.addListener(document, 'keydown', globalShortcuts, this)
+ }
+
+ async initDataLayers(datalayers) {
+ datalayers = datalayers || this.properties.datalayers
+ for (const options of datalayers) {
+ // `false` to not propagate syncing elements served from uMap
+ this.createDataLayer(options, false)
+ }
+ this.datalayersLoaded = true
+ this._leafletMap.fire('datalayersloaded')
+ for (const datalayer of this.datalayersIndex) {
+ if (datalayer.showAtLoad()) await datalayer.show()
+ }
+ this.dataloaded = true
+ this._leafletMap.fire('dataloaded')
+ }
+
+ createDataLayer(options = {}, sync = true) {
+ options.name =
+ options.name || `${translate('Layer')} ${this.datalayersIndex.length + 1}`
+ const datalayer = new DataLayer(this, options, sync)
+
+ if (sync !== false) {
+ datalayer.sync.upsert(datalayer.options)
+ }
+ return datalayer
+ }
+
+ newDataLayer() {
+ const datalayer = this.createDataLayer({})
+ datalayer.edit()
+ }
+
+ reindexDataLayers() {
+ this.eachDataLayer((datalayer) => datalayer.reindex())
+ this.onDataLayersChanged()
+ }
+
+ redrawVisibleDataLayers() {
+ this.eachVisibleDataLayer((datalayer) => {
+ datalayer.redraw()
+ })
+ }
+
+ indexDatalayers() {
+ const panes = this._leafletMap.getPane('overlayPane')
+
+ this.datalayersIndex = []
+ for (const pane of panes) {
+ if (!pane.dataset || !pane.dataset.id) continue
+ this.datalayersIndex.push(this.datalayers[pane.dataset.id])
+ }
+ this.onDataLayersChanged()
+ }
+
+ onceDatalayersLoaded(callback, context) {
+ // Once datalayers **metadata** have been loaded
+ if (this.datalayersLoaded) {
+ callback.call(context || this, this)
+ } else {
+ this._leafletMap.once('datalayersloaded', callback, context)
+ }
+ return this
+ }
+
+ onceDataLoaded(callback, context) {
+ // Once datalayers **data** have been loaded
+ if (this.dataloaded) {
+ callback.call(context || this, this)
+ } else {
+ this._leafletMap.once('dataloaded', callback, context || this)
+ }
+ return this
+ }
+
+ onDataLayersChanged() {
+ if (this.browser) this.browser.update()
+ this.caption.refresh()
+ }
+
+ async saveAll() {
+ if (!SAVEMANAGER.isDirty) return
+ if (this._defaultExtent) this._setCenterAndZoom()
+ this.backup()
+ await SAVEMANAGER.save()
+ // Do a blind render for now, as we are not sure what could
+ // have changed, we'll be more subtil when we'll remove the
+ // save action
+ this.render(['name', 'user', 'permissions'])
+ this._leafletMap.fire('saved')
+ }
+
+ propagate() {
+ let els = document.querySelectorAll('.map-name')
+ for (const el of els) {
+ el.textContent = this.getDisplayName()
+ }
+ const status = this.permissions.getShareStatusDisplay()
+ els = document.querySelectorAll('.share-status')
+ for (const el of els) {
+ if (status) {
+ el.textContent = translate('Visibility: {status}', {
+ status: status,
+ })
+ }
+ }
+ }
+
+ getDisplayName() {
+ return this.properties.name || translate('Untitled map')
+ }
+
+ backup() {
+ this.backupProperties()
+ this._datalayersIndex_bk = [].concat(this.datalayersIndex)
+ }
+
+ backupProperties() {
+ this._backupProperties = Object.assign({}, this.properties)
+ this._backupProperties.tilelayer = Object.assign({}, this.properties.tilelayer)
+ this._backupProperties.limitBounds = Object.assign({}, this.properties.limitBounds)
+ this._backupProperties.permissions = Object.assign({}, this.permissions.options)
+ }
+
+ resetProperties() {
+ this.properties = Object.assign({}, this._backupProperties)
+ this.properties.tilelayer = Object.assign({}, this._backupProperties.tilelayer)
+ this.permissions.options = Object.assign({}, this._backupProperties.permissions)
+ }
+
+ hasData() {
+ for (const datalayer of this.datalayersIndex) {
+ if (datalayer.hasData()) return true
+ }
+ }
+
+ hasLayers() {
+ return Boolean(this.datalayersIndex.length)
+ }
+
+ allProperties() {
+ return [].concat(...this.datalayersIndex.map((dl) => dl._propertiesIndex))
+ }
+
+ sortedValues(property) {
+ return []
+ .concat(...this.datalayersIndex.map((dl) => dl.sortedValues(property)))
+ .filter((val, idx, arr) => arr.indexOf(val) === idx)
+ .sort(U.Utils.naturalSort)
+ }
+
+ editCaption() {
+ if (!this.editEnabled) return
+ if (this.properties.editMode !== 'advanced') return
+ const container = DomUtil.create('div', 'umap-edit-container')
+ const metadataFields = ['properties.name', 'properties.description']
+
+ DomUtil.createTitle(container, translate('Edit map details'), 'icon-caption')
+ const builder = new U.FormBuilder(this, metadataFields, {
+ className: 'map-metadata',
+ umap: this,
+ })
+ const form = builder.build()
+ container.appendChild(form)
+
+ const credits = DomUtil.createFieldset(container, translate('Credits'))
+ const creditsFields = [
+ 'properties.licence',
+ 'properties.shortCredit',
+ 'properties.longCredit',
+ 'properties.permanentCredit',
+ 'properties.permanentCreditBackground',
+ ]
+ const creditsBuilder = new U.FormBuilder(this, creditsFields, { umap: this })
+ credits.appendChild(creditsBuilder.build())
+ this.editPanel.open({ content: container })
+ }
+
+ _editControls(container) {
+ let UIFields = []
+ for (const name of this._leafletMap.HIDDABLE_CONTROLS) {
+ UIFields.push(`properties.${name}Control`)
+ }
+ UIFields = UIFields.concat([
+ 'properties.moreControl',
+ 'properties.scrollWheelZoom',
+ 'properties.miniMap',
+ 'properties.scaleControl',
+ 'properties.onLoadPanel',
+ 'properties.defaultView',
+ 'properties.displayPopupFooter',
+ 'properties.captionBar',
+ 'properties.captionMenus',
+ ])
+ const builder = new U.FormBuilder(this, UIFields, { umap: this })
+ const controlsOptions = DomUtil.createFieldset(
+ container,
+ translate('User interface options')
+ )
+ controlsOptions.appendChild(builder.build())
+ }
+
+ _editShapeProperties(container) {
+ const shapeOptions = [
+ 'properties.color',
+ 'properties.iconClass',
+ 'properties.iconUrl',
+ 'properties.iconOpacity',
+ 'properties.opacity',
+ 'properties.weight',
+ 'properties.fill',
+ 'properties.fillColor',
+ 'properties.fillOpacity',
+ 'properties.smoothFactor',
+ 'properties.dashArray',
+ ]
+
+ const builder = new U.FormBuilder(this, shapeOptions, { umap: this })
+ const defaultShapeProperties = DomUtil.createFieldset(
+ container,
+ translate('Default shape properties')
+ )
+ defaultShapeProperties.appendChild(builder.build())
+ }
+
+ _editDefaultProperties(container) {
+ const optionsFields = [
+ 'properties.zoomTo',
+ 'properties.easing',
+ 'properties.labelKey',
+ 'properties.sortKey',
+ 'properties.filterKey',
+ 'properties.facetKey',
+ 'properties.slugKey',
+ ]
+
+ const builder = new U.FormBuilder(this, optionsFields, { umap: this })
+ const defaultProperties = DomUtil.createFieldset(
+ container,
+ translate('Default properties')
+ )
+ defaultProperties.appendChild(builder.build())
+ }
+
+ _editInteractionsProperties(container) {
+ const popupFields = [
+ 'properties.popupShape',
+ 'properties.popupTemplate',
+ 'properties.popupContentTemplate',
+ 'properties.showLabel',
+ 'properties.labelDirection',
+ 'properties.labelInteractive',
+ 'properties.outlinkTarget',
+ ]
+ const builder = new U.FormBuilder(this, popupFields, { umap: this })
+ const popupFieldset = DomUtil.createFieldset(
+ container,
+ translate('Default interaction options')
+ )
+ popupFieldset.appendChild(builder.build())
+ }
+
+ _editTilelayer(container) {
+ if (!Utils.isObject(this.properties.tilelayer)) {
+ this.properties.tilelayer = {}
+ }
+ const tilelayerFields = [
+ [
+ 'properties.tilelayer.name',
+ { handler: 'BlurInput', placeholder: translate('display name') },
+ ],
+ [
+ 'properties.tilelayer.url_template',
+ {
+ handler: 'BlurInput',
+ helpText: `${translate('Supported scheme')}: http://{s}.domain.com/{z}/{x}/{y}.png`,
+ placeholder: 'url',
+ type: 'url',
+ },
+ ],
+ [
+ 'properties.tilelayer.maxZoom',
+ {
+ handler: 'BlurIntInput',
+ placeholder: translate('max zoom'),
+ min: 0,
+ max: this.properties.maxZoomLimit,
+ },
+ ],
+ [
+ 'properties.tilelayer.minZoom',
+ {
+ handler: 'BlurIntInput',
+ placeholder: translate('min zoom'),
+ min: 0,
+ max: this.properties.maxZoomLimit,
+ },
+ ],
+ [
+ 'properties.tilelayer.attribution',
+ { handler: 'BlurInput', placeholder: translate('attribution') },
+ ],
+ [
+ 'properties.tilelayer.tms',
+ { handler: 'Switch', label: translate('TMS format') },
+ ],
+ ]
+ const customTilelayer = DomUtil.createFieldset(
+ container,
+ translate('Custom background')
+ )
+ const builder = new U.FormBuilder(this, tilelayerFields, { umap: this })
+ customTilelayer.appendChild(builder.build())
+ }
+
+ _editOverlay(container) {
+ if (!Utils.isObject(this.properties.overlay)) {
+ this.properties.overlay = {}
+ }
+ const overlayFields = [
+ [
+ 'properties.overlay.url_template',
+ {
+ handler: 'BlurInput',
+ helpText: `${translate('Supported scheme')}: http://{s}.domain.com/{z}/{x}/{y}.png`,
+ placeholder: 'url',
+ label: translate('Background overlay url'),
+ type: 'url',
+ },
+ ],
+ [
+ 'properties.overlay.maxZoom',
+ {
+ handler: 'BlurIntInput',
+ placeholder: translate('max zoom'),
+ min: 0,
+ max: this.properties.maxZoomLimit,
+ },
+ ],
+ [
+ 'properties.overlay.minZoom',
+ {
+ handler: 'BlurIntInput',
+ placeholder: translate('min zoom'),
+ min: 0,
+ max: this.properties.maxZoomLimit,
+ },
+ ],
+ [
+ 'properties.overlay.attribution',
+ { handler: 'BlurInput', placeholder: translate('attribution') },
+ ],
+ [
+ 'properties.overlay.opacity',
+ { handler: 'Range', min: 0, max: 1, step: 0.1, label: translate('Opacity') },
+ ],
+ ['properties.overlay.tms', { handler: 'Switch', label: translate('TMS format') }],
+ ]
+ const overlay = DomUtil.createFieldset(container, translate('Custom overlay'))
+ const builder = new U.FormBuilder(this, overlayFields, { umap: this })
+ overlay.appendChild(builder.build())
+ }
+
+ _editBounds(container) {
+ if (!Utils.isObject(this.properties.limitBounds)) {
+ this.properties.limitBounds = {}
+ }
+ const limitBounds = DomUtil.createFieldset(container, translate('Limit bounds'))
+ const boundsFields = [
+ [
+ 'properties.limitBounds.south',
+ { handler: 'BlurFloatInput', placeholder: translate('max South') },
+ ],
+ [
+ 'properties.limitBounds.west',
+ { handler: 'BlurFloatInput', placeholder: translate('max West') },
+ ],
+ [
+ 'properties.limitBounds.north',
+ { handler: 'BlurFloatInput', placeholder: translate('max North') },
+ ],
+ [
+ 'properties.limitBounds.east',
+ { handler: 'BlurFloatInput', placeholder: translate('max East') },
+ ],
+ ]
+ const boundsBuilder = new U.FormBuilder(this, boundsFields, { umap: this })
+ limitBounds.appendChild(boundsBuilder.build())
+ const boundsButtons = DomUtil.create('div', 'button-bar half', limitBounds)
+ DomUtil.createButton(
+ 'button',
+ boundsButtons,
+ translate('Use current bounds'),
+ function () {
+ const bounds = this._leafletMap.getBounds()
+ this.properties.limitBounds.south = L.Util.formatNum(bounds.getSouth())
+ this.properties.limitBounds.west = L.Util.formatNum(bounds.getWest())
+ this.properties.limitBounds.north = L.Util.formatNum(bounds.getNorth())
+ this.properties.limitBounds.east = L.Util.formatNum(bounds.getEast())
+ boundsBuilder.fetchAll()
+
+ this.sync.update(this, 'properties.limitBounds', this.properties.limitBounds)
+ this.isDirty = true
+ this._leafletMap.handleLimitBounds()
+ },
+ this
+ )
+ DomUtil.createButton(
+ 'button',
+ boundsButtons,
+ translate('Empty'),
+ function () {
+ this.properties.limitBounds.south = null
+ this.properties.limitBounds.west = null
+ this.properties.limitBounds.north = null
+ this.properties.limitBounds.east = null
+ boundsBuilder.fetchAll()
+ this.isDirty = true
+ this._leafletMap.handleLimitBounds()
+ },
+ this
+ )
+ }
+
+ _editSlideshow(container) {
+ const slideshow = DomUtil.createFieldset(container, translate('Slideshow'))
+ const slideshowFields = [
+ [
+ 'properties.slideshow.active',
+ { handler: 'Switch', label: translate('Activate slideshow mode') },
+ ],
+ [
+ 'properties.slideshow.delay',
+ {
+ handler: 'SlideshowDelay',
+ helpText: translate('Delay between two transitions when in play mode'),
+ },
+ ],
+ [
+ 'properties.slideshow.easing',
+ {
+ handler: 'Switch',
+ label: translate('Animated transitions'),
+ inheritable: true,
+ },
+ ],
+ [
+ 'properties.slideshow.autoplay',
+ { handler: 'Switch', label: translate('Autostart when map is loaded') },
+ ],
+ ]
+ const slideshowBuilder = new U.FormBuilder(this, slideshowFields, {
+ callback: () => this.slideshow.setOptions(this.properties.slideshow),
+ umap: this,
+ })
+ slideshow.appendChild(slideshowBuilder.build())
+ }
+
+ _editSync(container) {
+ const sync = DomUtil.createFieldset(container, translate('Real-time collaboration'))
+ const builder = new U.FormBuilder(this, ['properties.syncEnabled'], { umap: this })
+ sync.appendChild(builder.build())
+ }
+
+ _advancedActions(container) {
+ const advancedActions = DomUtil.createFieldset(
+ container,
+ translate('Advanced actions')
+ )
+ const advancedButtons = DomUtil.create('div', 'button-bar half', advancedActions)
+ if (this.permissions.isOwner()) {
+ const deleteButton = Utils.loadTemplate(`
+
`)
+ deleteButton.addEventListener('click', () => this.del())
+ advancedButtons.appendChild(deleteButton)
+
+ DomUtil.createButton(
+ 'button umap-empty',
+ advancedButtons,
+ translate('Clear data'),
+ this.emptyDataLayers,
+ this
+ )
+ DomUtil.createButton(
+ 'button umap-empty',
+ advancedButtons,
+ translate('Remove layers'),
+ this.removeDataLayers,
+ this
+ )
+ }
+ DomUtil.createButton(
+ 'button umap-clone',
+ advancedButtons,
+ translate('Clone this map'),
+ this.clone,
+ this
+ )
+ DomUtil.createButton(
+ 'button umap-download',
+ advancedButtons,
+ translate('Open share & download panel'),
+ this.share.open,
+ this.share
+ )
+ }
+
+ edit() {
+ if (!this.editEnabled) return
+ if (this.properties.editMode !== 'advanced') return
+ const container = DomUtil.create('div')
+ DomUtil.createTitle(
+ container,
+ translate('Map advanced properties'),
+ 'icon-settings'
+ )
+ this._editControls(container)
+ this._editShapeProperties(container)
+ this._editDefaultProperties(container)
+ this._editInteractionsProperties(container)
+ this.rules.edit(container)
+ this._editTilelayer(container)
+ this._editOverlay(container)
+ this._editBounds(container)
+ this._editSlideshow(container)
+ if (this.properties.websocketEnabled) {
+ this._editSync(container)
+ }
+ this._advancedActions(container)
+
+ this.editPanel.open({ content: container, className: 'dark' })
+ }
+
+ reset() {
+ if (this._leafletMap.editTools) this._leafletMap.editTools.stopDrawing()
+ this.resetProperties()
+ this.datalayersIndex = [].concat(this._datalayersIndex_bk)
+ // Iter over all datalayers, including deleted if any.
+ for (const datalayer of Object.values(this.datalayers)) {
+ if (datalayer.isDeleted) datalayer.connectToMap()
+ if (datalayer.isDirty) datalayer.reset()
+ }
+ this.ensurePanesOrder()
+ this._leafletMap.initTileLayers()
+ this.isDirty = false
+ this.onDataLayersChanged()
+ }
+
+ async save() {
+ this.rules.commit()
+ const geojson = {
+ type: 'Feature',
+ geometry: this.geometry(),
+ properties: this.exportProperties(),
+ }
+ const formData = new FormData()
+ formData.append('name', this.properties.name)
+ formData.append('center', JSON.stringify(this.geometry()))
+ formData.append('settings', JSON.stringify(geojson))
+ const uri = this.urls.get('map_save', { map_id: this.properties.umap_id })
+ const [data, _, error] = await this.server.post(uri, {}, formData)
+ // FIXME: login_required response will not be an error, so it will not
+ // stop code while it should
+ if (error) {
+ return
+ }
+ // TOOD: map.save may not always be the first call during save process
+ // since SAVEMANAGER refactor
+ if (data.login_required) {
+ window.onLogin = () => this.saveAll()
+ window.open(data.login_required)
+ return
+ }
+ this.properties.user = data.user
+ if (!this.properties.umap_id) {
+ this.properties.umap_id = data.id
+ this.permissions.setOptions(data.permissions)
+ this.permissions.commit()
+ if (data.permissions?.anonymous_edit_url) {
+ this._leafletMap.once('saved', () => {
+ AlertCreation.info(
+ translate('Your map has been created with an anonymous account!'),
+ Number.Infinity,
+ data.permissions.anonymous_edit_url,
+ this.properties.urls.map_send_edit_link
+ ? this.sendEditLinkEmail.bind(this)
+ : null
+ )
+ })
+ } else {
+ this._leafletMap.once('saved', () => {
+ Alert.success(translate('Congratulations, your map has been created!'))
+ })
+ }
+ } else {
+ if (!this.permissions.isDirty) {
+ // Do not override local changes to permissions,
+ // but update in case some other editors changed them in the meantime.
+ this.permissions.setOptions(data.permissions)
+ this.permissions.commit()
+ }
+ this._leafletMap.once('saved', () => {
+ Alert.success(data.info || translate('Map has been saved!'))
+ })
+ }
+ // Update URL in case the name has changed.
+ if (history?.pushState) {
+ history.pushState({}, this.properties.name, data.url)
+ } else {
+ window.location = data.url
+ }
+ return true
+ }
+
+ exportProperties() {
+ const properties = {}
+ for (const key of Object.keys(SCHEMA)) {
+ if (this.properties[key] !== undefined) {
+ properties[key] = this.properties[key]
+ }
+ }
+ return properties
+ }
+
+ geometry() {
+ /* Return a GeoJSON geometry Object */
+ const latlng = this._leafletMap.latLng(
+ this._leafletMap.options.center || this._leafletMap.getCenter()
+ )
+ return {
+ type: 'Point',
+ coordinates: [latlng.lng, latlng.lat],
+ }
+ }
+
+ toGeoJSON() {
+ let features = []
+ this.eachDataLayer((datalayer) => {
+ if (datalayer.isVisible()) {
+ features = features.concat(datalayer.featuresToGeoJSON())
+ }
+ })
+ const geojson = {
+ type: 'FeatureCollection',
+ features: features,
+ }
+ return geojson
+ }
+
+ enableEdit() {
+ document.body.classList.add('umap-edit-enabled')
+ this.editEnabled = true
+ this.drop.enable()
+ this._leafletMap.fire('edit:enabled')
+ this.initSyncEngine()
+ }
+
+ disableEdit() {
+ if (this.isDirty) return
+ this.drop.disable()
+ document.body.classList.remove('umap-edit-enabled')
+ this.editedFeature = null
+ this.editEnabled = false
+ this._leafletMap.fire('edit:disabled')
+ this.editPanel.close()
+ this.fullPanel.close()
+ this.sync.stop()
+ this.closeInplaceToolbar()
+ }
+
+ askForReset(e) {
+ this.dialog
+ .confirm(translate('Are you sure you want to cancel your changes?'))
+ .then(() => {
+ this.reset()
+ this.disableEdit()
+ })
+ }
+
+ async initSyncEngine() {
+ if (this.properties.websocketEnabled === false) return
+ if (this.properties.syncEnabled !== true) {
+ this.sync.stop()
+ } else {
+ const ws_token_uri = this.urls.get('map_websocket_auth_token', {
+ map_id: this.properties.umap_id,
+ })
+ await this.sync.authenticate(
+ ws_token_uri,
+ this.properties.websocketURI,
+ this.server
+ )
+ }
+ }
+
+ getSyncMetadata() {
+ return {
+ engine: this.sync,
+ subject: 'map',
+ }
+ }
+
+ render(fields) {
+ if (fields.includes('numberOfConnectedPeers')) {
+ this.renderEditToolbar()
+ this.propagate()
+ }
+
+ const impacts = Utils.getImpactsFromSchema(fields)
+ for (const impact of impacts) {
+ switch (impact) {
+ case 'ui':
+ this._leafletMap.setOptions(this.properties)
+ this._leafletMap.initCaptionBar()
+ this._leafletMap.renderEditToolbar()
+ this._leafletMap.renderControls()
+ this.browser.redraw()
+ this.propagate()
+ break
+ case 'data':
+ this.redrawVisibleDataLayers()
+ break
+ case 'datalayer-index':
+ this.reindexDataLayers()
+ break
+ case 'background':
+ this._leafletMap.initTileLayers()
+ break
+ case 'bounds':
+ this._leafletMap.handleLimitBounds()
+ break
+ case 'sync':
+ this.initSyncEngine()
+ }
+ }
+ }
+
+ // TODO: allow to control the default datalayer
+ // (edit and viewing)
+ // cf https://github.com/umap-project/umap/issues/585
+ defaultEditDataLayer() {
+ let datalayer
+ let fallback
+ datalayer = this.lastUsedDataLayer
+ if (
+ datalayer &&
+ !datalayer.isDataReadOnly() &&
+ datalayer.isBrowsable() &&
+ datalayer.isVisible()
+ ) {
+ return datalayer
+ }
+ datalayer = this.findDataLayer((datalayer) => {
+ if (!datalayer.isDataReadOnly() && datalayer.isBrowsable()) {
+ fallback = datalayer
+ if (datalayer.isVisible()) return true
+ }
+ })
+ if (datalayer) return datalayer
+ if (fallback) {
+ // No datalayer visible, let's force one
+ fallback.show()
+ return fallback
+ }
+ return this.createDataLayer()
+ }
+
+ findDataLayer(method, context) {
+ for (let i = this.datalayersIndex.length - 1; i >= 0; i--) {
+ if (method.call(context, this.datalayersIndex[i])) {
+ return this.datalayersIndex[i]
+ }
+ }
+ }
+
+ eachDataLayer(method, context) {
+ for (let i = 0; i < this.datalayersIndex.length; i++) {
+ method.call(context, this.datalayersIndex[i])
+ }
+ }
+
+ eachDataLayerReverse(method, context, filter) {
+ for (let i = this.datalayersIndex.length - 1; i >= 0; i--) {
+ if (filter && !filter.call(context, this.datalayersIndex[i])) continue
+ method.call(context, this.datalayersIndex[i])
+ }
+ }
+
+ eachBrowsableDataLayer(method, context) {
+ this.eachDataLayerReverse(method, context, (d) => d.allowBrowse())
+ }
+
+ eachVisibleDataLayer(method, context) {
+ this.eachDataLayerReverse(method, context, (d) => d.isVisible())
+ }
+
+ eachFeature(callback, context) {
+ this.eachBrowsableDataLayer((datalayer) => {
+ if (datalayer.isVisible()) datalayer.eachFeature(callback, context)
+ })
+ }
+
+ removeDataLayers() {
+ this.eachDataLayerReverse((datalayer) => {
+ datalayer._delete()
+ })
+ }
+
+ emptyDataLayers() {
+ this.eachDataLayerReverse((datalayer) => {
+ datalayer.empty()
+ })
+ }
+
+ editDatalayers() {
+ if (!this.editEnabled) return
+ const container = DomUtil.create('div')
+ DomUtil.createTitle(container, translate('Manage layers'), 'icon-layers')
+ const ul = DomUtil.create('ul', '', container)
+ this.eachDataLayerReverse((datalayer) => {
+ const row = DomUtil.create('li', 'orderable', ul)
+ DomUtil.createIcon(row, 'icon-drag', translate('Drag to reorder'))
+ datalayer.renderToolbox(row)
+ const title = DomUtil.add('span', '', row, datalayer.options.name)
+ row.classList.toggle('off', !datalayer.isVisible())
+ title.textContent = datalayer.options.name
+ row.dataset.id = L.stamp(datalayer)
+ })
+ const onReorder = (src, dst, initialIndex, finalIndex) => {
+ const layer = this.datalayers[src.dataset.id]
+ const other = this.datalayers[dst.dataset.id]
+ const minIndex = Math.min(layer.getRank(), other.getRank())
+ const maxIndex = Math.max(layer.getRank(), other.getRank())
+ if (finalIndex === 0) layer.bringToTop()
+ else if (finalIndex > initialIndex) layer.insertBefore(other)
+ else layer.insertAfter(other)
+ this.eachDataLayerReverse((datalayer) => {
+ if (datalayer.getRank() >= minIndex && datalayer.getRank() <= maxIndex)
+ datalayer.isDirty = true
+ })
+ this.indexDatalayers()
+ }
+ const orderable = new U.Orderable(ul, onReorder)
+
+ const bar = DomUtil.create('div', 'button-bar', container)
+ DomUtil.createButton(
+ 'show-on-edit block add-datalayer button',
+ bar,
+ translate('Add a layer'),
+ this.newDataLayer,
+ this
+ )
+
+ this.editPanel.open({ content: container })
+ }
+
+ getDataLayerByUmapId(umap_id) {
+ return this.findDataLayer((d) => d.umap_id === umap_id)
+ }
+
+ firstVisibleDatalayer() {
+ return this.findDataLayer((datalayer) => {
+ if (datalayer.isVisible()) return true
+ })
+ }
+
+ ensurePanesOrder() {
+ this.eachDataLayer((datalayer) => {
+ datalayer.bringToTop()
+ })
+ }
+
+ openBrowser(mode) {
+ this.onceDatalayersLoaded(() => this.browser.open(mode))
+ }
+
+ openCaption() {
+ this.onceDatalayersLoaded(() => this.caption.open())
+ }
+
+ addAuthorLink(container) {
+ const author = this.properties.author
+ if (author?.name) {
+ const el = Utils.loadTemplate(
+ `
${translate('by')} ${author.name}`
+ )
+ container.appendChild(el)
+ }
+ }
+
+ async star() {
+ if (!this.properties.umap_id) {
+ return Alert.error(translate('Please save the map first'))
+ }
+ const url = this.urls.get('map_star', { map_id: this.properties.umap_id })
+ const [data, response, error] = await this.server.post(url)
+ if (error) {
+ return
+ }
+ this.properties.starred = data.starred
+ Alert.success(
+ data.starred
+ ? translate('Map has been starred')
+ : translate('Map has been unstarred')
+ )
+ this.render(['starred'])
+ }
+
+ processFileToImport(file, layer, type) {
+ type = type || Utils.detectFileType(file)
+ if (!type) {
+ U.Alert.error(
+ translate('Unable to detect format of file {filename}', {
+ filename: file.name,
+ })
+ )
+ return
+ }
+ if (type === 'umap') {
+ this.importFromFile(file, 'umap')
+ } else {
+ if (!layer) layer = this.createDataLayer({ name: file.name })
+ layer.importFromFile(file, type)
+ }
+ }
+
+ async importFromUrl(uri) {
+ const response = await this.request.get(uri)
+ if (response?.ok) {
+ this.importRaw(await response.text())
+ }
+ }
+
+ importRaw(rawData) {
+ const importedData = JSON.parse(rawData)
+
+ let mustReindex = false
+
+ for (const option of Object.keys(U.SCHEMA)) {
+ if (typeof importedData.properties[option] !== 'undefined') {
+ this.properties[option] = importedData.properties[option]
+ if (option === 'sortKey') mustReindex = true
+ }
+ }
+
+ if (importedData.geometry) {
+ this.properties.center = this._leafletMap.latLng(importedData.geometry)
+ }
+ for (const geojson of importedData.layers) {
+ if (!geojson._umap_options && geojson._storage) {
+ geojson._umap_options = geojson._storage
+ delete geojson._storage
+ }
+ delete geojson._umap_options?.id // Never trust an id at this stage
+ const dataLayer = this.createDataLayer(geojson._umap_options)
+ dataLayer.fromUmapGeoJSON(geojson)
+ }
+
+ // TODO: refactor with leafletMap init / render
+ this._leafletMap.setOptions(this.properties)
+ this._leafletMap.initTileLayers()
+ this._leafletMap.renderControls()
+ this._leafletMap.handleLimitBounds()
+ this.eachDataLayer((datalayer) => {
+ if (mustReindex) datalayer.reindex()
+ datalayer.redraw()
+ })
+ this.propagate()
+ this._leafletMap.fire('postsync')
+ this.isDirty = true
+ }
+
+ importFromFile(file) {
+ const reader = new FileReader()
+ reader.readAsText(file)
+ reader.onload = (e) => {
+ const rawData = e.target.result
+ try {
+ this.importRaw(rawData)
+ } catch (e) {
+ console.error('Error importing data', e)
+ U.Alert.error(
+ translate('Invalid umap data in {filename}', { filename: file.name })
+ )
+ }
+ }
+ }
+
+ async del() {
+ this.dialog
+ .confirm(translate('Are you sure you want to delete this map?'))
+ .then(async () => {
+ const url = this.urls.get('map_delete', { map_id: this.properties.umap_id })
+ const [data, response, error] = await this.server.post(url)
+ if (data.redirect) window.location = data.redirect
+ })
+ }
+
+ async clone() {
+ this.dialog
+ .confirm(
+ translate('Are you sure you want to clone this map and all its datalayers?')
+ )
+ .then(async () => {
+ const url = this.urls.get('map_clone', { map_id: this.properties.umap_id })
+ const [data, response, error] = await this.server.post(url)
+ if (data.redirect) window.location = data.redirect
+ })
+ }
+
+ async sendEditLinkEmail(formData) {
+ const sendLink =
+ this.properties.urls.map_send_edit_link &&
+ this.urls.get('map_send_edit_link', {
+ map_id: this.properties.umap_id,
+ })
+ await this.server.post(sendLink, {}, formData)
+ }
+
+ getLayersBounds() {
+ const bounds = new L.latLngBounds()
+ this.eachBrowsableDataLayer((d) => {
+ if (d.isVisible()) bounds.extend(d.layer.getBounds())
+ })
+ return bounds
+ }
+
+ fitDataBounds() {
+ const bounds = this.getLayersBounds()
+ if (!this.hasData() || !bounds.isValid()) return false
+ this._leafletMap.fitBounds(bounds)
+ }
+
+ proxyUrl(url, ttl) {
+ if (this.properties.urls.ajax_proxy) {
+ url = Utils.greedyTemplate(this.properties.urls.ajax_proxy, {
+ url: encodeURIComponent(url),
+ ttl: ttl,
+ })
+ }
+ return url
+ }
+
+ openExternalRouting(event) {
+ const url = this.urls.get('routing', {
+ lat: event.latlng.lat,
+ lng: event.latlng.lng,
+ locale: getLocale(),
+ zoom: this._leafletMap.getZoom(),
+ })
+ if (url) window.open(url)
+ }
+
+ editInOSM(event) {
+ const url = this.urls.get('edit_in_osm', {
+ lat: event.latlng.lat,
+ lng: event.latlng.lng,
+ zoom: Math.max(this._leafletMap.getZoom(), 16),
+ })
+ if (url) window.open(url)
+ }
+
+ setCenterAndZoom() {
+ this._setCenterAndZoom()
+ Alert.success(L._('The zoom and center have been modified.'))
+ }
+
+ _setCenterAndZoom() {
+ this._leafletMap.options.center = this._leafletMap.getCenter()
+ this._leafletMap.options.zoom = this._leafletMap.getZoom()
+ this.isDirty = true
+ this._defaultExtent = false
+ }
+}
diff --git a/umap/static/umap/js/modules/utils.js b/umap/static/umap/js/modules/utils.js
index 3e451720..8ce52c99 100644
--- a/umap/static/umap/js/modules/utils.js
+++ b/umap/static/umap/js/modules/utils.js
@@ -41,7 +41,7 @@ export function getImpactsFromSchema(fields, schema) {
// remove the option prefix for fields
// And only keep the first part in case of a subfield
// (e.g "options.limitBounds.foobar" will just return "limitBounds")
- return field.replace('options.', '').split('.')[0]
+ return field.replace('options.', '').replace('properties.', '').split('.')[0]
})
.reduce((acc, field) => {
// retrieve the "impacts" field from the schema
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index e2494f9c..2b4602ac 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -2,7 +2,7 @@ U.BaseAction = L.ToolbarAction.extend({
initialize: function (map) {
this.map = map
if (this.options.label) {
- this.options.tooltip = this.map.help.displayLabel(
+ this.options.tooltip = this.map.umap.help.displayLabel(
this.options.label,
(withKbdTag = false)
)
@@ -25,7 +25,7 @@ U.ImportAction = U.BaseAction.extend({
},
addHooks: function () {
- this.map.importer.open()
+ this.map.umap.importer.open()
},
})
@@ -37,7 +37,7 @@ U.EditLayersAction = U.BaseAction.extend({
},
addHooks: function () {
- this.map.editDatalayers()
+ this.map.umap.editDatalayers()
},
})
@@ -49,7 +49,7 @@ U.EditCaptionAction = U.BaseAction.extend({
},
addHooks: function () {
- this.map.editCaption()
+ this.map.umap.editCaption()
},
})
@@ -61,7 +61,7 @@ U.EditPropertiesAction = U.BaseAction.extend({
},
addHooks: function () {
- this.map.edit()
+ this.map.umap.edit()
},
})
@@ -84,7 +84,7 @@ U.UpdateExtentAction = U.BaseAction.extend({
},
addHooks: function () {
- this.map.setCenterAndZoom()
+ this.map.umap.setCenterAndZoom()
},
})
@@ -95,7 +95,7 @@ U.UpdatePermsAction = U.BaseAction.extend({
},
addHooks: function () {
- this.map.permissions.edit()
+ this.map.umap.permissions.edit()
},
})
@@ -142,7 +142,8 @@ U.AddPolylineShapeAction = U.BaseAction.extend({
},
addHooks: function () {
- this.map.editedFeature.ui.editor.newShape()
+ // FIXME: smells bad
+ this.map.umap.editedFeature.ui.editor.newShape()
},
})
@@ -305,18 +306,24 @@ U.DrawToolbar = L.Toolbar.Control.extend({
appendToContainer: function (container) {
this.options.actions = []
- if (this.map.options.enableMarkerDraw) {
+ if (this.map.umap.properties.enableMarkerDraw) {
this.options.actions.push(U.DrawMarkerAction)
}
- if (this.map.options.enablePolylineDraw) {
+ if (this.map.umap.properties.enablePolylineDraw) {
this.options.actions.push(U.DrawPolylineAction)
- if (this.map.editedFeature && this.map.editedFeature instanceof U.LineString) {
+ if (
+ this.map.umap.editedFeature &&
+ this.map.umap.editedFeature instanceof U.LineString
+ ) {
this.options.actions.push(U.AddPolylineShapeAction)
}
}
- if (this.map.options.enablePolygonDraw) {
+ if (this.map.umap.properties.enablePolygonDraw) {
this.options.actions.push(U.DrawPolygonAction)
- if (this.map.editedFeature && this.map.editedFeature instanceof U.Polygon) {
+ if (
+ this.map.umap.editedFeature &&
+ this.map.umap.editedFeature instanceof U.Polygon
+ ) {
this.options.actions.push(U.AddPolygonShapeAction)
}
}
@@ -360,14 +367,14 @@ U.DropControl = L.Class.extend({
L.DomEvent.stop(e)
},
- drop: function (e) {
+ drop: function (event) {
this.map.scrollWheelZoom.enable()
this.dropzone.classList.remove('umap-dragover')
L.DomEvent.stop(e)
- for (let i = 0, file; (file = e.dataTransfer.files[i]); i++) {
- this.map.processFileToImport(file)
+ for (const file of event.dataTransfer.files) {
+ this.map.umap.processFileToImport(file)
}
- this.map.onceDataLoaded(this.map.fitDataBounds)
+ this.map.umap.onceDataLoaded(this.map.umap.fitDataBounds)
},
dragleave: function () {
@@ -387,15 +394,15 @@ U.EditControl = L.Control.extend({
'',
container,
L._('Edit'),
- map.enableEdit,
- map
+ map.umap.enableEdit,
+ map.umap
)
L.DomEvent.on(
enableEditing,
'mouseover',
() => {
- map.tooltip.open({
- content: map.help.displayLabel('TOGGLE_EDIT'),
+ map.umap.tooltip.open({
+ content: map.umap.help.displayLabel('TOGGLE_EDIT'),
anchor: enableEditing,
position: 'bottom',
delay: 750,
@@ -476,8 +483,8 @@ U.PermanentCreditsControl = L.Control.extend({
})
L.Control.Button = L.Control.extend({
- initialize: function (map, options) {
- this.map = map
+ initialize: function (umap, options) {
+ this.umap = umap
L.Control.prototype.initialize.call(this, options)
},
@@ -510,11 +517,11 @@ U.DataLayersControl = L.Control.Button.extend({
},
afterAdd: function (container) {
- U.Utils.toggleBadge(container, this.map.browser.hasFilters())
+ U.Utils.toggleBadge(container, this.umap.browser?.hasFilters())
},
onClick: function () {
- this.map.openBrowser()
+ this.umap.openBrowser()
},
})
@@ -526,7 +533,7 @@ U.CaptionControl = L.Control.Button.extend({
},
onClick: function () {
- this.map.openCaption()
+ this.umap.openCaption()
},
})
@@ -537,12 +544,13 @@ U.StarControl = L.Control.Button.extend({
},
getClassName: function () {
- const status = this.map.options.starred ? ' starred' : ''
+ const status = this.umap.properties.starred ? ' starred' : ''
return `leaflet-control-star umap-control${status}`
},
onClick: function () {
- this.map.star()
+ console.log(this.umap)
+ this.umap.star()
},
})
@@ -554,248 +562,10 @@ L.Control.Embed = L.Control.Button.extend({
},
onClick: function () {
- this.map.share.open()
+ this.umap.share.open()
},
})
-const ControlsMixin = {
- HIDDABLE_CONTROLS: [
- 'zoom',
- 'search',
- 'fullscreen',
- 'embed',
- 'datalayers',
- 'caption',
- 'locate',
- 'measure',
- 'editinosm',
- 'star',
- 'tilelayers',
- ],
-
- renderEditToolbar: function () {
- const className = 'umap-main-edit-toolbox'
- const container =
- document.querySelector(`.${className}`) ||
- L.DomUtil.create(
- 'div',
- `${className} with-transition dark`,
- this._controlContainer
- )
- container.innerHTML = ''
- const leftContainer = L.DomUtil.create('div', 'umap-left-edit-toolbox', container)
- const rightContainer = L.DomUtil.create('div', 'umap-right-edit-toolbox', container)
- const logo = L.DomUtil.create('div', 'logo', leftContainer)
- L.DomUtil.createLink('', logo, 'uMap', '/', null, L._('Go to the homepage'))
- const nameButton = L.DomUtil.createButton('map-name', leftContainer, '')
- L.DomEvent.on(
- nameButton,
- 'mouseover',
- function () {
- this.tooltip.open({
- content: L._('Edit the title of the map'),
- anchor: nameButton,
- position: 'bottom',
- delay: 500,
- duration: 5000,
- })
- },
- this
- )
- const shareStatusButton = L.DomUtil.createButton(
- 'share-status',
- leftContainer,
- '',
- this.permissions.edit,
- this.permissions
- )
- L.DomEvent.on(
- shareStatusButton,
- 'mouseover',
- function () {
- this.tooltip.open({
- content: L._('Update who can see and edit the map'),
- anchor: shareStatusButton,
- position: 'bottom',
- delay: 500,
- duration: 5000,
- })
- },
- this
- )
- if (this.options.editMode === 'advanced') {
- L.DomEvent.on(nameButton, 'click', this.editCaption, this)
- L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions)
- }
- if (this.options.user?.id) {
- const button = U.Utils.loadTemplate(`
-
- `)
- rightContainer.appendChild(button)
- const menu = new U.ContextMenu({ className: 'dark', fixed: true })
- const actions = [
- {
- label: L._('New map'),
- action: this.urls.get('map_new'),
- },
- {
- label: L._('My maps'),
- action: this.urls.get('user_dashboard'),
- },
- {
- label: L._('My teams'),
- action: this.urls.get('user_teams'),
- },
- ]
- if (this.urls.has('user_profile')) {
- actions.push({
- label: L._('My profile'),
- action: this.urls.get('user_profile'),
- })
- }
- button.addEventListener('click', () => {
- menu.openBelow(button, actions)
- })
- }
-
- const connectedPeers = this.sync.getNumberOfConnectedPeers()
- if (connectedPeers !== 0) {
- const connectedPeersCount = L.DomUtil.createButton(
- 'leaflet-control-connected-peers',
- rightContainer,
- ''
- )
- L.DomEvent.on(connectedPeersCount, 'mouseover', () => {
- this.tooltip.open({
- content: L._('{connectedPeers} peer(s) currently connected to this map', {
- connectedPeers: connectedPeers,
- }),
- anchor: connectedPeersCount,
- position: 'bottom',
- delay: 500,
- duration: 5000,
- })
- })
-
- const updateConnectedPeersCount = () => {
- connectedPeersCount.innerHTML =
- '
' + this.sync.getNumberOfConnectedPeers() + ''
- }
- updateConnectedPeersCount()
- }
-
- this.help.getStartedLink(rightContainer)
- const controlEditCancel = L.DomUtil.createButton(
- 'leaflet-control-edit-cancel',
- rightContainer,
- L.DomUtil.add('span', '', null, L._('Cancel edits')),
- this.askForReset,
- this
- )
- L.DomEvent.on(
- controlEditCancel,
- 'mouseover',
- function () {
- this.tooltip.open({
- content: this.help.displayLabel('CANCEL'),
- anchor: controlEditCancel,
- position: 'bottom',
- delay: 500,
- duration: 5000,
- })
- },
- this
- )
- const controlEditDisable = L.DomUtil.createButton(
- 'leaflet-control-edit-disable',
- rightContainer,
- L.DomUtil.add('span', '', null, L._('View')),
- this.disableEdit,
- this
- )
- L.DomEvent.on(
- controlEditDisable,
- 'mouseover',
- function () {
- this.tooltip.open({
- content: this.help.displayLabel('PREVIEW'),
- anchor: controlEditDisable,
- position: 'bottom',
- delay: 500,
- duration: 5000,
- })
- },
- this
- )
- const controlEditSave = L.DomUtil.createButton(
- 'leaflet-control-edit-save button',
- rightContainer,
- L.DomUtil.add('span', '', null, L._('Save')),
- this.saveAll,
- this
- )
- L.DomEvent.on(
- controlEditSave,
- 'mouseover',
- function () {
- this.tooltip.open({
- content: this.help.displayLabel('SAVE'),
- anchor: controlEditSave,
- position: 'bottom',
- delay: 500,
- duration: 5000,
- })
- },
- this
- )
- },
-
- editDatalayers: function () {
- if (!this.editEnabled) return
- const container = L.DomUtil.create('div')
- L.DomUtil.createTitle(container, L._('Manage layers'), 'icon-layers')
- const ul = L.DomUtil.create('ul', '', container)
- this.eachDataLayerReverse((datalayer) => {
- const row = L.DomUtil.create('li', 'orderable', ul)
- L.DomUtil.createIcon(row, 'icon-drag', L._('Drag to reorder'))
- datalayer.renderToolbox(row)
- const title = L.DomUtil.add('span', '', row, datalayer.options.name)
- row.classList.toggle('off', !datalayer.isVisible())
- title.textContent = datalayer.options.name
- row.dataset.id = L.stamp(datalayer)
- })
- const onReorder = (src, dst, initialIndex, finalIndex) => {
- const layer = this.datalayers[src.dataset.id]
- const other = this.datalayers[dst.dataset.id]
- const minIndex = Math.min(layer.getRank(), other.getRank())
- const maxIndex = Math.max(layer.getRank(), other.getRank())
- if (finalIndex === 0) layer.bringToTop()
- else if (finalIndex > initialIndex) layer.insertBefore(other)
- else layer.insertAfter(other)
- this.eachDataLayerReverse((datalayer) => {
- if (datalayer.getRank() >= minIndex && datalayer.getRank() <= maxIndex)
- datalayer.isDirty = true
- })
- this.indexDatalayers()
- }
- const orderable = new U.Orderable(ul, onReorder)
-
- const bar = L.DomUtil.create('div', 'button-bar', container)
- L.DomUtil.createButton(
- 'show-on-edit block add-datalayer button',
- bar,
- L._('Add a layer'),
- this.newDataLayer,
- this
- )
-
- this.editPanel.open({ content: container })
- },
-}
-
/* Used in view mode to define the current tilelayer */
U.TileLayerControl = L.Control.IconLayers.extend({
initialize: function (map, options) {
@@ -819,7 +589,7 @@ U.TileLayerControl = L.Control.IconLayers.extend({
// Fixme when https://github.com/Leaflet/Leaflet/pull/9201 is released
const icon = U.Utils.template(
layer.options.url_template,
- this.map.demoTileInfos
+ this.map.options.demoTileInfos
)
layers.push({
title: layer.options.name,
@@ -885,7 +655,7 @@ U.TileLayerChooser = L.Control.extend({
L.DomUtil.createTitle(container, L._('Change tilelayers'), 'icon-tilelayer')
this._tilelayers_container = L.DomUtil.create('ul', '', container)
this.buildList(options)
- const panel = options.edit ? this.map.editPanel : this.map.panel
+ const panel = options.edit ? this.map.umap.editPanel : this.map.umap.panel
panel.open({ content: container })
},
@@ -905,7 +675,7 @@ U.TileLayerChooser = L.Control.extend({
const el = L.DomUtil.create('li', selectedClass, this._tilelayers_container)
const img = L.DomUtil.create('img', '', el)
const name = L.DomUtil.create('div', '', el)
- img.src = U.Utils.template(tilelayer.options.url_template, this.map.demoTileInfos)
+ img.src = U.Utils.template(tilelayer.options.url_template, this.map.options.demoTileInfos)
img.loading = 'lazy'
name.textContent = tilelayer.options.name
L.DomEvent.on(
@@ -935,8 +705,8 @@ U.AttributionControl = L.Control.Attribution.extend({
this._container.innerHTML = ''
const container = L.DomUtil.create('div', 'attribution-container', this._container)
container.innerHTML = credits
- const shortCredit = this._map.getOption('shortCredit')
- const captionMenus = this._map.getOption('captionMenus')
+ const shortCredit = this._map.umap.getOption('shortCredit')
+ const captionMenus = this._map.umap.getOption('captionMenus')
if (shortCredit) {
L.DomUtil.element({
tagName: 'span',
@@ -947,7 +717,7 @@ U.AttributionControl = L.Control.Attribution.extend({
if (captionMenus) {
const link = L.DomUtil.add('a', '', container, ` — ${L._('Open caption')}`)
L.DomEvent.on(link, 'click', L.DomEvent.stop)
- .on(link, 'click', this._map.openCaption, this._map)
+ .on(link, 'click', () => this._map.umap.openCaption())
.on(link, 'dblclick', L.DomEvent.stop)
}
if (window.top === window.self && captionMenus) {
@@ -1139,7 +909,7 @@ U.SearchControl = L.Control.extend({
this.map.fire('dataload', { id: id })
})
this.search.resultsContainer = resultsContainer
- this.map.panel.open({ content: container }).then(input.focus())
+ this.map.umap.panel.open({ content: container }).then(input.focus())
},
})
@@ -1179,8 +949,9 @@ L.Control.Loading.include({
})
U.Editable = L.Editable.extend({
- initialize: function (map, options) {
- L.Editable.prototype.initialize.call(this, map, options)
+ initialize: function (umap, options) {
+ this.umap = umap
+ L.Editable.prototype.initialize.call(this, umap._leafletMap, options)
this.on('editable:drawing:click editable:drawing:move', this.drawingTooltip)
// Layer for items added by users
this.on('editable:drawing:cancel', (event) => {
@@ -1188,7 +959,7 @@ U.Editable = L.Editable.extend({
})
this.on('editable:drawing:commit', function (event) {
event.layer.feature.isDirty = true
- if (this.map.editedFeature !== event.layer) event.layer.feature.edit(event)
+ if (this.umap.editedFeature !== event.layer) event.layer.feature.edit(event)
})
this.on('editable:editing', (event) => {
const feature = event.layer.feature
@@ -1210,7 +981,7 @@ U.Editable = L.Editable.extend({
},
createPolyline: function (latlngs) {
- const datalayer = this.map.defaultEditDataLayer()
+ const datalayer = this.umap.defaultEditDataLayer()
const point = new U.LineString(datalayer, {
geometry: { type: 'LineString', coordinates: [] },
})
@@ -1218,7 +989,7 @@ U.Editable = L.Editable.extend({
},
createPolygon: function (latlngs) {
- const datalayer = this.map.defaultEditDataLayer()
+ const datalayer = this.umap.defaultEditDataLayer()
const point = new U.Polygon(datalayer, {
geometry: { type: 'Polygon', coordinates: [] },
})
@@ -1226,7 +997,7 @@ U.Editable = L.Editable.extend({
},
createMarker: function (latlng) {
- const datalayer = this.map.defaultEditDataLayer()
+ const datalayer = this.umap.defaultEditDataLayer()
const point = new U.Point(datalayer, {
geometry: { type: 'Point', coordinates: [latlng.lng, latlng.lat] },
})
@@ -1235,15 +1006,15 @@ U.Editable = L.Editable.extend({
_getDefaultProperties: function () {
const result = {}
- if (this.map.options.featuresHaveOwner?.user) {
- result.geojson = { properties: { owner: this.map.options.user.id } }
+ if (this.umap.properties.featuresHaveOwner?.user) {
+ result.geojson = { properties: { owner: this.umap.properties.user.id } }
}
return result
},
connectCreatedToMap: function (layer) {
// Overrided from Leaflet.Editable
- const datalayer = this.map.defaultEditDataLayer()
+ const datalayer = this.umap.defaultEditDataLayer()
datalayer.addFeature(layer.feature)
layer.isDirty = true
return layer
@@ -1251,7 +1022,7 @@ U.Editable = L.Editable.extend({
drawingTooltip: function (e) {
if (e.layer instanceof L.Marker && e.type === 'editable:drawing:start') {
- this.map.tooltip.open({ content: L._('Click to add a marker') })
+ this.umap.tooltip.open({ content: L._('Click to add a marker') })
}
if (!(e.layer instanceof L.Polyline)) {
// only continue with Polylines and Polygons
@@ -1298,12 +1069,12 @@ U.Editable = L.Editable.extend({
}
}
if (content) {
- this.map.tooltip.open({ content: content })
+ this.umap.tooltip.open({ content: content })
}
},
closeTooltip: function () {
- this.map.ui.closeTooltip()
+ this.umap.closeTooltip()
},
onVertexRawClick: (e) => {
@@ -1314,7 +1085,7 @@ U.Editable = L.Editable.extend({
onEscape: function () {
this.once('editable:drawing:end', (event) => {
- this.map.tooltip.close()
+ this.umap.tooltip.close()
// Leaflet.Editable will delete the drawn shape if invalid
// (eg. line has only one drawn point)
// So let's check if the layer has no more shape
diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index 5c42cde8..e7cf3cd5 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -25,48 +25,6 @@ L.Util.copyToClipboard = (textToCopy) => {
}
}
-L.Util.queryString = (name, fallback) => {
- const decode = (s) => decodeURIComponent(s.replace(/\+/g, ' '))
- const qs = window.location.search.slice(1).split('&')
- const qa = {}
- for (const i in qs) {
- const key = qs[i].split('=')
- if (!key) continue
- qa[decode(key[0])] = key[1] ? decode(key[1]) : 1
- }
- return qa[name] || fallback
-}
-
-L.Util.booleanFromQueryString = (name) => {
- const value = L.Util.queryString(name)
- return value === '1' || value === 'true'
-}
-
-L.Util.setFromQueryString = (options, name) => {
- const value = L.Util.queryString(name)
- if (typeof value !== 'undefined') options[name] = value
-}
-
-L.Util.setBooleanFromQueryString = (options, name) => {
- const value = L.Util.queryString(name)
- if (typeof value !== 'undefined') options[name] = value === '1' || value === 'true'
-}
-
-L.Util.setNumberFromQueryString = (options, name) => {
- const value = +L.Util.queryString(name)
- if (!Number.isNaN(value)) options[name] = value
-}
-
-L.Util.setNullableBooleanFromQueryString = (options, name) => {
- let value = L.Util.queryString(name)
- if (typeof value !== 'undefined') {
- if (value === 'null') value = null
- else if (value === '0' || value === 'false') value = false
- else value = true
- options[name] = value
- }
-}
-
L.DomUtil.add = (tagName, className, container, content) => {
const el = L.DomUtil.create(tagName, className, container)
if (content) {
diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index 92924b53..357113d5 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -221,14 +221,14 @@ L.FormBuilder.Element.include({
this.label = L.DomUtil.create('label', '', this.getLabelParent())
this.label.textContent = this.label.title = this.options.label
if (this.options.helpEntries) {
- this.builder.map.help.button(this.label, this.options.helpEntries)
+ this.builder.umap.help.button(this.label, this.options.helpEntries)
} else if (this.options.helpTooltip) {
const info = L.DomUtil.create('i', 'info', this.label)
L.DomEvent.on(
info,
'mouseover',
function () {
- this.builder.map.tooltip.open({
+ this.builder.umap.tooltip.open({
anchor: info,
content: this.options.helpTooltip,
position: 'top',
@@ -359,7 +359,7 @@ L.FormBuilder.SlideshowDelay = L.FormBuilder.IntSelect.extend({
L.FormBuilder.DataLayerSwitcher = L.FormBuilder.Select.extend({
getOptions: function () {
const options = []
- this.builder.map.eachDataLayerReverse((datalayer) => {
+ this.builder.umap.eachDataLayerReverse((datalayer) => {
if (
datalayer.isLoaded() &&
!datalayer.isDataReadOnly() &&
@@ -376,11 +376,11 @@ L.FormBuilder.DataLayerSwitcher = L.FormBuilder.Select.extend({
},
toJS: function () {
- return this.builder.map.datalayers[this.value()]
+ return this.builder.umap.datalayers[this.value()]
},
set: function () {
- this.builder.map.lastUsedDataLayer = this.toJS()
+ this.builder.umap.lastUsedDataLayer = this.toJS()
this.obj.changeDataLayer(this.toJS())
},
})
@@ -400,7 +400,7 @@ L.FormBuilder.DataFormat = L.FormBuilder.Select.extend({
L.FormBuilder.LicenceChooser = L.FormBuilder.Select.extend({
getOptions: function () {
const licences = []
- const licencesList = this.builder.obj.options.licences
+ const licencesList = this.builder.obj.properties.licences
let licence
for (const i in licencesList) {
licence = licencesList[i]
@@ -414,7 +414,7 @@ L.FormBuilder.LicenceChooser = L.FormBuilder.Select.extend({
},
toJS: function () {
- return this.builder.obj.options.licences[this.value()]
+ return this.builder.obj.properties.licences[this.value()]
},
})
@@ -469,8 +469,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
onDefine: async function () {
this.buttons.innerHTML = ''
this.footer.innerHTML = ''
- const [{ pictogram_list }, response, error] = await this.builder.map.server.get(
- this.builder.map.options.urls.pictogram_list_json
+ const [{ pictogram_list }, response, error] = await this.builder.umap.server.get(
+ this.builder.umap.properties.urls.pictogram_list_json
)
if (!error) this.pictogram_list = pictogram_list
this.buildTabs()
@@ -616,7 +616,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
categories[category].push(props)
}
const sorted = Object.entries(categories).toSorted(([a], [b]) =>
- U.Utils.naturalSort(a, b, L.lang)
+ U.Utils.naturalSort(a, b, U.lang)
)
for (const [name, items] of sorted) {
this.addCategory(items, name)
@@ -1167,8 +1167,8 @@ U.FormBuilder = L.FormBuilder.extend({
}
},
- initialize: function (obj, fields, options) {
- this.map = obj.map || obj.getMap()
+ initialize: function (obj, fields, options = {}) {
+ this.umap = obj.umap || options.umap
this.computeDefaultOptions()
L.FormBuilder.prototype.initialize.call(this, obj, fields, options)
this.on('finish', this.finish)
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 893de510..708a5aea 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -1,7 +1,6 @@
L.Map.mergeOptions({
overlay: {},
datalayers: [],
- hash: true,
maxZoomLimit: 24,
attributionControl: false,
editMode: 'advanced',
@@ -16,10 +15,6 @@ L.Map.mergeOptions({
demoTileInfos: { s: 'a', z: 9, x: 265, y: 181, '-y': 181, r: '' },
licences: [],
licence: '',
- enableMarkerDraw: true,
- enablePolygonDraw: true,
- enablePolylineDraw: true,
- limitBounds: {},
slideshow: {},
clickable: true,
permissions: {},
@@ -208,1626 +203,6 @@ U.Map = L.Map.extend({
this.backup()
},
- initSyncEngine: async function () {
- if (this.options.websocketEnabled === false) return
- if (this.options.syncEnabled !== true) {
- this.sync.stop()
- } else {
- const ws_token_uri = this.urls.get('map_websocket_auth_token', {
- map_id: this.options.umap_id,
- })
- await this.sync.authenticate(ws_token_uri, this.options.websocketURI, this.server)
- }
- },
-
- getSyncMetadata: function () {
- return {
- engine: this.sync,
- subject: 'map',
- }
- },
-
- render: function (fields) {
- if (fields.includes('numberOfConnectedPeers')) {
- this.renderEditToolbar()
- this.propagate()
- }
-
- const impacts = U.Utils.getImpactsFromSchema(fields)
- for (const impact of impacts) {
- switch (impact) {
- case 'ui':
- this.initCaptionBar()
- this.renderEditToolbar()
- this.renderControls()
- this.browser.redraw()
- this.propagate()
- break
- case 'data':
- this.redrawVisibleDataLayers()
- break
- case 'datalayer-index':
- this.reindexDataLayers()
- break
- case 'background':
- this.initTileLayers()
- break
- case 'bounds':
- this.handleLimitBounds()
- break
- case 'sync':
- this.initSyncEngine()
- }
- }
- },
-
- reindexDataLayers: function () {
- this.eachDataLayer((datalayer) => datalayer.reindex())
- this.onDataLayersChanged()
- },
-
- redrawVisibleDataLayers: function () {
- this.eachVisibleDataLayer((datalayer) => {
- datalayer.redraw()
- })
- },
-
- setOptionsFromQueryString: (options) => {
- // This is not an editable option
- L.Util.setFromQueryString(options, 'editMode')
- // FIXME retrocompat
- L.Util.setBooleanFromQueryString(options, 'displayDataBrowserOnLoad')
- L.Util.setBooleanFromQueryString(options, 'displayCaptionOnLoad')
- for (const [key, schema] of Object.entries(U.SCHEMA)) {
- switch (schema.type) {
- case Boolean:
- if (schema.nullable) L.Util.setNullableBooleanFromQueryString(options, key)
- else L.Util.setBooleanFromQueryString(options, key)
- break
- case Number:
- L.Util.setNumberFromQueryString(options, key)
- break
- case String:
- L.Util.setFromQueryString(options, key)
- break
- }
- }
- // Specific case for datalayersControl
- // which accepts "expanded" value, on top of true/false/null
- if (L.Util.queryString('datalayersControl') === 'expanded') {
- if (!options.onLoadPanel) {
- options.onLoadPanel = 'datalayers'
- }
- }
- },
-
- loadDataFromQueryString: async function () {
- let data = L.Util.queryString('data', null)
- const url = new URL(window.location.href)
- const dataUrls = new URLSearchParams(url.search).getAll('dataUrl')
- const dataFormat = L.Util.queryString('dataFormat', 'geojson')
- if (dataUrls.length) {
- for (let dataUrl of dataUrls) {
- dataUrl = decodeURIComponent(dataUrl)
- dataUrl = this.localizeUrl(dataUrl)
- dataUrl = this.proxyUrl(dataUrl)
- const datalayer = this.createDataLayer()
- await datalayer.importFromUrl(dataUrl, dataFormat)
- }
- } else if (data) {
- data = decodeURIComponent(data)
- const datalayer = this.createDataLayer()
- await datalayer.importRaw(data, dataFormat)
- }
- },
-
- setViewFromQueryString: async function () {
- if (this.options.noControl) return
- if (L.Util.queryString('share')) {
- this.share.open()
- } else if (this.options.onLoadPanel === 'databrowser') {
- this.panel.setDefaultMode('expanded')
- this.openBrowser('data')
- } else if (this.options.onLoadPanel === 'datalayers') {
- this.panel.setDefaultMode('condensed')
- this.openBrowser('layers')
- } else if (this.options.onLoadPanel === 'datafilters') {
- this.panel.setDefaultMode('expanded')
- this.openBrowser('filters')
- } else if (this.options.onLoadPanel === 'caption') {
- this.panel.setDefaultMode('condensed')
- this.openCaption()
- }
- // Comes after default panels, so if it opens in a panel it will
- // take precedence.
- const slug = L.Util.queryString('feature')
- if (slug && this.features_index[slug]) this.features_index[slug].view()
- if (L.Util.queryString('edit')) {
- if (this.hasEditMode()) this.enableEdit()
- // Sometimes users share the ?edit link by mistake, let's remove
- // this search parameter from URL to prevent this
- const url = new URL(window.location)
- url.searchParams.delete('edit')
- history.pushState({}, '', url)
- }
- if (L.Util.queryString('download')) {
- const download_url = this.urls.get('map_download', {
- map_id: this.options.umap_id,
- })
- window.location = download_url
- }
- },
-
- // Merge the given schema with the default one
- // Missing keys inside the schema are merged with the default ones.
- overrideSchema: (schema) => {
- for (const [key, extra] of Object.entries(schema)) {
- U.SCHEMA[key] = L.extend({}, U.SCHEMA[key], extra)
- }
- },
-
- initControls: function () {
- this.helpMenuActions = {}
- this._controls = {}
-
- if (this.hasEditMode() && !this.options.noControl) {
- new U.EditControl(this).addTo(this)
-
- new U.DrawToolbar({ map: this }).addTo(this)
- const editActions = [
- U.EditCaptionAction,
- U.EditPropertiesAction,
- U.EditLayersAction,
- U.ChangeTileLayerAction,
- U.UpdateExtentAction,
- U.UpdatePermsAction,
- U.ImportAction,
- ]
- if (this.options.editMode === 'advanced') {
- new U.SettingsToolbar({ actions: editActions }).addTo(this)
- }
- }
- this._controls.zoom = new L.Control.Zoom({
- zoomInTitle: L._('Zoom in'),
- zoomOutTitle: L._('Zoom out'),
- })
- this._controls.datalayers = new U.DataLayersControl(this)
- this._controls.caption = new U.CaptionControl(this)
- this._controls.locate = new U.Locate(this, {
- strings: {
- title: L._('Center map on your location'),
- },
- showPopup: false,
- // We style this control in our own CSS for consistency with other controls,
- // but the control breaks if we don't specify a class here, so a fake class
- // will do.
- icon: 'umap-fake-class',
- iconLoading: 'umap-fake-class',
- flyTo: this.options.easing,
- onLocationError: (err) => U.Alert.error(err.message),
- })
- this._controls.fullscreen = new L.Control.Fullscreen({
- title: { false: L._('View Fullscreen'), true: L._('Exit Fullscreen') },
- })
- this._controls.search = new U.SearchControl()
- this._controls.embed = new L.Control.Embed(this)
- this._controls.tilelayersChooser = new U.TileLayerChooser(this)
- if (this.options.user?.id) this._controls.star = new U.StarControl(this)
- this._controls.editinosm = new L.Control.EditInOSM({
- position: 'topleft',
- widgetOptions: {
- helpText: L._(
- 'Open this map extent in a map editor to provide more accurate data to OpenStreetMap'
- ),
- },
- })
- this._controls.measure = new L.MeasureControl().initHandler(this)
- this._controls.more = new U.MoreControls()
- this._controls.scale = L.control.scale()
- this._controls.permanentCredit = new U.PermanentCreditsControl(this)
- if (this.options.scrollWheelZoom) this.scrollWheelZoom.enable()
- else this.scrollWheelZoom.disable()
- this.browser = new U.Browser(this)
- this.facets = new U.Facets(this)
- this.caption = new U.Caption(this)
- this.importer = new U.Importer(this)
- this.drop = new U.DropControl(this)
- this.share = new U.Share(this)
- this.rules = new U.Rules(this)
- this._controls.tilelayers = new U.TileLayerControl(this)
- },
-
- renderControls: function () {
- const hasSlideshow = Boolean(this.options.slideshow?.active)
- const barEnabled = this.options.captionBar || hasSlideshow
- document.body.classList.toggle('umap-caption-bar-enabled', barEnabled)
- document.body.classList.toggle('umap-slideshow-enabled', hasSlideshow)
- for (const control of Object.values(this._controls)) {
- this.removeControl(control)
- }
- if (this.options.noControl) return
-
- this._controls.attribution = new U.AttributionControl().addTo(this)
- if (this.options.miniMap) {
- this.whenReady(function () {
- if (this.selected_tilelayer) {
- this._controls.miniMap = new L.Control.MiniMap(this.selected_tilelayer, {
- aimingRectOptions: {
- color: this.getOption('color'),
- fillColor: this.getOption('fillColor'),
- stroke: this.getOption('stroke'),
- fill: this.getOption('fill'),
- weight: this.getOption('weight'),
- opacity: this.getOption('opacity'),
- fillOpacity: this.getOption('fillOpacity'),
- },
- }).addTo(this)
- this._controls.miniMap._miniMap.invalidateSize()
- }
- })
- }
- let name
- let status
- let control
- for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
- name = this.HIDDABLE_CONTROLS[i]
- status = this.getOption(`${name}Control`)
- if (status === false) continue
- control = this._controls[name]
- if (!control) continue
- control.addTo(this)
- if (status === undefined || status === null)
- L.DomUtil.addClass(control._container, 'display-on-more')
- else L.DomUtil.removeClass(control._container, 'display-on-more')
- }
- if (this.getOption('permanentCredit')) this._controls.permanentCredit.addTo(this)
- if (this.getOption('moreControl')) this._controls.more.addTo(this)
- if (this.getOption('scaleControl')) this._controls.scale.addTo(this)
- this._controls.tilelayers.setLayers()
- },
-
- initDataLayers: async function (datalayers) {
- datalayers = datalayers || this.options.datalayers
- for (const options of datalayers) {
- // `false` to not propagate syncing elements served from uMap
- this.createDataLayer(options, false)
- }
- await this.loadDataLayers()
- },
-
- loadDataLayers: async function () {
- this.datalayersLoaded = true
- this.fire('datalayersloaded')
- for (const datalayer of this.datalayers_index) {
- if (datalayer.showAtLoad()) await datalayer.show()
- }
- this.dataloaded = true
- this.fire('dataloaded')
- },
-
- indexDatalayers: function () {
- const panes = this.getPane('overlayPane')
- let pane
- this.datalayers_index = []
- for (let i = 0; i < panes.children.length; i++) {
- pane = panes.children[i]
- if (!pane.dataset || !pane.dataset.id) continue
- this.datalayers_index.push(this.datalayers[pane.dataset.id])
- }
- this.onDataLayersChanged()
- },
-
- onDataLayersChanged: function () {
- if (this.browser) this.browser.update()
- this.caption.refresh()
- },
-
- ensurePanesOrder: function () {
- this.eachDataLayer((datalayer) => {
- datalayer.bringToTop()
- })
- },
-
- onceDatalayersLoaded: function (callback, context) {
- // Once datalayers **metadata** have been loaded
- if (this.datalayersLoaded) {
- callback.call(context || this, this)
- } else {
- this.once('datalayersloaded', callback, context)
- }
- return this
- },
-
- onceDataLoaded: function (callback, context) {
- // Once datalayers **data** have been loaded
- if (this.dataloaded) {
- callback.call(context || this, this)
- } else {
- this.once('dataloaded', callback, context)
- }
- return this
- },
-
- backupOptions: function () {
- this._backupOptions = L.extend({}, this.options)
- this._backupOptions.tilelayer = L.extend({}, this.options.tilelayer)
- this._backupOptions.limitBounds = L.extend({}, this.options.limitBounds)
- this._backupOptions.permissions = L.extend({}, this.permissions.options)
- },
-
- resetOptions: function () {
- this.options = L.extend({}, this._backupOptions)
- this.options.tilelayer = L.extend({}, this._backupOptions.tilelayer)
- this.permissions.options = L.extend({}, this._backupOptions.permissions)
- },
-
- initShortcuts: function () {
- const globalShortcuts = function (e) {
- if (e.key === 'Escape') {
- if (this.importer.dialog.visible) {
- this.importer.dialog.close()
- } else if (this.editEnabled && this.editTools.drawing()) {
- this.editTools.onEscape()
- } else if (this.measureTools.enabled()) {
- this.measureTools.stopDrawing()
- } else if (this.fullPanel?.isOpen()) {
- this.fullPanel?.close()
- } else if (this.editPanel?.isOpen()) {
- this.editPanel?.close()
- } else if (this.panel.isOpen()) {
- this.panel.close()
- }
- }
-
- // From now on, only ctrl/meta shortcut
- if (!(e.ctrlKey || e.metaKey) || e.shiftKey) return
-
- if (e.key === 'f') {
- L.DomEvent.stop(e)
- this.search()
- }
-
- /* Edit mode only shortcuts */
- if (!this.hasEditMode()) return
-
- // Edit mode Off
- if (!this.editEnabled) {
- switch (e.key) {
- case 'e':
- L.DomEvent.stop(e)
- this.enableEdit()
- break
- }
- return
- }
-
- // Edit mode on
- let used = true
- switch (e.key) {
- case 'e':
- if (!U.SAVEMANAGER.isDirty) this.disableEdit()
- break
- case 's':
- if (U.SAVEMANAGER.isDirty) this.saveAll()
- break
- case 'z':
- if (U.SAVEMANAGER.isDirty) this.askForReset()
- break
- case 'm':
- this.editTools.startMarker()
- break
- case 'p':
- this.editTools.startPolygon()
- break
- case 'l':
- this.editTools.startPolyline()
- break
- case 'i':
- this.importer.open()
- break
- case 'o':
- this.importer.openFiles()
- break
- case 'h':
- this.help.show('edit')
- break
- default:
- used = false
- }
- if (used) L.DomEvent.stop(e)
- }
- L.DomEvent.addListener(document, 'keydown', globalShortcuts, this)
- },
-
- initTileLayers: function () {
- this.tilelayers = []
- for (const props of this.options.tilelayers) {
- const layer = this.createTileLayer(props)
- this.tilelayers.push(layer)
- if (
- this.options.tilelayer &&
- this.options.tilelayer.url_template === props.url_template
- ) {
- // Keep control over the displayed attribution for non custom tilelayers
- this.options.tilelayer.attribution = props.attribution
- }
- }
- if (this.options.tilelayer?.url_template && this.options.tilelayer.attribution) {
- this.customTilelayer = this.createTileLayer(this.options.tilelayer)
- this.selectTileLayer(this.customTilelayer)
- } else {
- this.selectTileLayer(this.tilelayers[0])
- }
- if (this._controls) this._controls.tilelayers.setLayers()
- },
-
- createTileLayer: (tilelayer) => new L.TileLayer(tilelayer.url_template, tilelayer),
-
- selectTileLayer: function (tilelayer) {
- if (tilelayer === this.selected_tilelayer) {
- return
- }
- try {
- this.addLayer(tilelayer)
- this.fire('baselayerchange', { layer: tilelayer })
- if (this.selected_tilelayer) {
- this.removeLayer(this.selected_tilelayer)
- }
- this.selected_tilelayer = tilelayer
- if (
- !Number.isNaN(this.selected_tilelayer.options.minZoom) &&
- this.getZoom() < this.selected_tilelayer.options.minZoom
- ) {
- this.setZoom(this.selected_tilelayer.options.minZoom)
- }
- if (
- !Number.isNaN(this.selected_tilelayer.options.maxZoom) &&
- this.getZoom() > this.selected_tilelayer.options.maxZoom
- ) {
- this.setZoom(this.selected_tilelayer.options.maxZoom)
- }
- } catch (e) {
- console.error(e)
- this.removeLayer(tilelayer)
- U.Alert.error(`${L._('Error in the tilelayer URL')}: ${tilelayer._url}`)
- // Users can put tilelayer URLs by hand, and if they add wrong {variable},
- // Leaflet throw an error, and then the map is no more editable
- }
- this.setOverlay()
- },
-
- eachTileLayer: function (callback, context) {
- const urls = []
- const callOne = (layer) => {
- // Prevent adding a duplicate background,
- // while adding selected/custom on top of the list
- const url = layer.options.url_template
- if (urls.indexOf(url) !== -1) return
- callback.call(context, layer)
- urls.push(url)
- }
- if (this.selected_tilelayer) callOne(this.selected_tilelayer)
- if (this.customTilelayer) callOne(this.customTilelayer)
- this.tilelayers.forEach(callOne)
- },
-
- setOverlay: function () {
- if (!this.options.overlay || !this.options.overlay.url_template) return
- const overlay = this.createTileLayer(this.options.overlay)
- try {
- this.addLayer(overlay)
- if (this.overlay) this.removeLayer(this.overlay)
- this.overlay = overlay
- } catch (e) {
- this.removeLayer(overlay)
- console.error(e)
- U.Alert.error(`${L._('Error in the overlay URL')}: ${overlay._url}`)
- }
- },
-
- _setDefaultCenter: function () {
- this.options.center = this.latLng(this.options.center)
- this.setView(this.options.center, this.options.zoom)
- },
-
- hasData: function () {
- for (const datalayer of this.datalayers_index) {
- if (datalayer.hasData()) return true
- }
- },
-
- hasLayers: function () {
- return Boolean(this.datalayers_index.length)
- },
-
- fitDataBounds: function () {
- const bounds = this.getLayersBounds()
- if (!this.hasData() || !bounds.isValid()) return false
- this.fitBounds(bounds)
- },
-
- initCenter: function () {
- this._setDefaultCenter()
- if (this.options.hash) this.addHash()
- if (this.options.hash && this._hash.parseHash(location.hash)) {
- // FIXME An invalid hash will cause the load to fail
- this._hash.update()
- } else if (this.options.defaultView === 'locate' && !this.options.noControl) {
- this._controls.locate.start()
- } else if (this.options.defaultView === 'data') {
- this.onceDataLoaded(this.fitDataBounds)
- } else if (this.options.defaultView === 'latest') {
- this.onceDataLoaded(() => {
- if (!this.hasData()) return
- const datalayer = this.firstVisibleDatalayer()
- let feature
- if (datalayer) {
- const feature = datalayer.getFeatureByIndex(-1)
- if (feature) {
- feature.zoomTo({ callback: this.options.noControl ? null : feature.view })
- return
- }
- }
- })
- }
- },
-
- latLng: (a, b, c) => {
- // manage geojson case and call original method
- if (!(a instanceof L.LatLng) && a.coordinates) {
- // Guess it's a geojson
- a = [a.coordinates[1], a.coordinates[0]]
- }
- return L.latLng(a, b, c)
- },
-
- handleLimitBounds: function () {
- const south = Number.parseFloat(this.options.limitBounds.south)
- const west = Number.parseFloat(this.options.limitBounds.west)
- const north = Number.parseFloat(this.options.limitBounds.north)
- const east = Number.parseFloat(this.options.limitBounds.east)
- if (
- !Number.isNaN(south) &&
- !Number.isNaN(west) &&
- !Number.isNaN(north) &&
- !Number.isNaN(east)
- ) {
- const bounds = L.latLngBounds([
- [south, west],
- [north, east],
- ])
- this.options.minZoom = this.getBoundsZoom(bounds, false)
- try {
- this.setMaxBounds(bounds)
- } catch (e) {
- // Unusable bounds, like -2 -2 -2 -2?
- console.error('Error limiting bounds', e)
- }
- } else {
- this.options.minZoom = 0
- this.setMaxBounds()
- }
- },
-
- setMaxBounds: function (bounds) {
- // Hack. Remove me when fix is released:
- // https://github.com/Leaflet/Leaflet/pull/4494
- bounds = L.latLngBounds(bounds)
-
- if (!bounds.isValid()) {
- this.options.maxBounds = null
- return this.off('moveend', this._panInsideMaxBounds)
- }
- return L.Map.prototype.setMaxBounds.call(this, bounds)
- },
-
- createDataLayer: function (options = {}, sync = true) {
- options.name = options.name || `${L._('Layer')} ${this.datalayers_index.length + 1}`
- const datalayer = new U.DataLayer(this, options, sync)
-
- if (sync !== false) {
- datalayer.sync.upsert(datalayer.options)
- }
- return datalayer
- },
-
- newDataLayer: function () {
- const datalayer = this.createDataLayer({})
- datalayer.edit()
- },
-
- getDefaultOption: (option) => U.SCHEMA[option]?.default,
-
- getOption: function (option, feature) {
- if (feature) {
- const value = this.rules.getOption(option, feature)
- if (value !== undefined) return value
- }
- if (U.Utils.usableOption(this.options, option)) return this.options[option]
- return this.getDefaultOption(option)
- },
-
- setCenterAndZoom: function () {
- this._setCenterAndZoom()
- U.Alert.success(L._('The zoom and center have been modified.'))
- },
-
- _setCenterAndZoom: function () {
- this.options.center = this.getCenter()
- this.options.zoom = this.getZoom()
- this.isDirty = true
- this._default_extent = false
- },
-
- updateTileLayers: function () {
- const callback = (tilelayer) => {
- this.options.tilelayer = tilelayer.toJSON()
- this.isDirty = true
- }
- if (this._controls.tilelayersChooser) {
- this._controls.tilelayersChooser.openSwitcher({ callback, edit: true })
- }
- },
-
- toGeoJSON: function () {
- let features = []
- this.eachDataLayer((datalayer) => {
- if (datalayer.isVisible()) {
- features = features.concat(datalayer.featuresToGeoJSON())
- }
- })
- const geojson = {
- type: 'FeatureCollection',
- features: features,
- }
- return geojson
- },
-
- eachFeature: function (callback, context) {
- this.eachBrowsableDataLayer((datalayer) => {
- if (datalayer.isVisible()) datalayer.eachFeature(callback, context)
- })
- },
-
- processFileToImport: function (file, layer, type) {
- type = type || U.Utils.detectFileType(file)
- if (!type) {
- U.Alert.error(
- L._('Unable to detect format of file {filename}', {
- filename: file.name,
- })
- )
- return
- }
- if (type === 'umap') {
- this.importFromFile(file, 'umap')
- } else {
- if (!layer) layer = this.createDataLayer({ name: file.name })
- layer.importFromFile(file, type)
- }
- },
-
- importFromUrl: async function (uri) {
- const response = await this.request.get(uri)
- if (response?.ok) {
- this.importRaw(await response.text())
- }
- },
-
- importRaw: function (rawData) {
- const importedData = JSON.parse(rawData)
-
- let mustReindex = false
-
- for (const option of Object.keys(U.SCHEMA)) {
- if (typeof importedData.properties[option] !== 'undefined') {
- this.options[option] = importedData.properties[option]
- if (option === 'sortKey') mustReindex = true
- }
- }
-
- if (importedData.geometry) this.options.center = this.latLng(importedData.geometry)
- importedData.layers.forEach((geojson) => {
- if (!geojson._umap_options && geojson._storage) {
- geojson._umap_options = geojson._storage
- delete geojson._storage
- }
- delete geojson._umap_options?.id // Never trust an id at this stage
- const dataLayer = this.createDataLayer(geojson._umap_options)
- dataLayer.fromUmapGeoJSON(geojson)
- })
-
- this.initTileLayers()
- this.renderControls()
- this.handleLimitBounds()
- this.eachDataLayer((datalayer) => {
- if (mustReindex) datalayer.reindex()
- datalayer.redraw()
- })
- this.propagate()
- this.fire('postsync')
- this.isDirty = true
- },
-
- importFromFile: function (file) {
- const reader = new FileReader()
- reader.readAsText(file)
- reader.onload = (e) => {
- const rawData = e.target.result
- try {
- this.importRaw(rawData)
- } catch (e) {
- console.error('Error importing data', e)
- U.Alert.error(L._('Invalid umap data in {filename}', { filename: file.name }))
- }
- }
- },
-
- openBrowser: function (mode) {
- this.onceDatalayersLoaded(() => this.browser.open(mode))
- },
-
- openCaption: function () {
- this.onceDatalayersLoaded(() => this.caption.open())
- },
-
- eachDataLayer: function (method, context) {
- for (let i = 0; i < this.datalayers_index.length; i++) {
- method.call(context, this.datalayers_index[i])
- }
- },
-
- eachDataLayerReverse: function (method, context, filter) {
- for (let i = this.datalayers_index.length - 1; i >= 0; i--) {
- if (filter && !filter.call(context, this.datalayers_index[i])) continue
- method.call(context, this.datalayers_index[i])
- }
- },
-
- eachBrowsableDataLayer: function (method, context) {
- this.eachDataLayerReverse(method, context, (d) => d.allowBrowse())
- },
-
- eachVisibleDataLayer: function (method, context) {
- this.eachDataLayerReverse(method, context, (d) => d.isVisible())
- },
-
- findDataLayer: function (method, context) {
- for (let i = this.datalayers_index.length - 1; i >= 0; i--) {
- if (method.call(context, this.datalayers_index[i]))
- return this.datalayers_index[i]
- }
- },
-
- backup: function () {
- this.backupOptions()
- this._datalayers_index_bk = [].concat(this.datalayers_index)
- },
-
- reset: function () {
- if (this.editTools) this.editTools.stopDrawing()
- this.resetOptions()
- this.datalayers_index = [].concat(this._datalayers_index_bk)
- // Iter over all datalayers, including deleted if any.
- for (const datalayer of Object.values(this.datalayers)) {
- if (datalayer.isDeleted) datalayer.connectToMap()
- if (datalayer.isDirty) datalayer.reset()
- }
- this.ensurePanesOrder()
- this.initTileLayers()
- this.isDirty = false
- this.onDataLayersChanged()
- },
-
- exportOptions: function () {
- const properties = {}
- for (const option of Object.keys(U.SCHEMA)) {
- if (typeof this.options[option] !== 'undefined') {
- properties[option] = this.options[option]
- }
- }
- return properties
- },
-
- save: async function () {
- this.rules.commit()
- const geojson = {
- type: 'Feature',
- geometry: this.geometry(),
- properties: this.exportOptions(),
- }
- const formData = new FormData()
- formData.append('name', this.options.name)
- formData.append('center', JSON.stringify(this.geometry()))
- formData.append('settings', JSON.stringify(geojson))
- const uri = this.urls.get('map_save', { map_id: this.options.umap_id })
- const [data, _, error] = await this.server.post(uri, {}, formData)
- // FIXME: login_required response will not be an error, so it will not
- // stop code while it should
- if (error) {
- return
- }
- if (data.login_required) {
- window.onLogin = () => this.saveAll()
- window.open(data.login_required)
- return
- }
- this.options.user = data.user
- if (!this.options.umap_id) {
- this.options.umap_id = data.id
- this.permissions.setOptions(data.permissions)
- this.permissions.commit()
- if (data.permissions?.anonymous_edit_url) {
- this.once('saved', () => {
- U.AlertCreation.info(
- L._('Your map has been created with an anonymous account!'),
- Number.Infinity,
- data.permissions.anonymous_edit_url,
- this.options.urls.map_send_edit_link
- ? this.sendEditLinkEmail.bind(this)
- : null
- )
- })
- } else {
- this.once('saved', () => {
- U.Alert.success(L._('Congratulations, your map has been created!'))
- })
- }
- } else {
- if (!this.permissions.isDirty) {
- // Do not override local changes to permissions,
- // but update in case some other editors changed them in the meantime.
- this.permissions.setOptions(data.permissions)
- this.permissions.commit()
- }
- this.once('saved', () => {
- U.Alert.success(data.info || L._('Map has been saved!'))
- })
- }
- // Update URL in case the name has changed.
- if (history?.pushState) {
- history.pushState({}, this.options.name, data.url)
- } else {
- window.location = data.url
- }
- return true
- },
-
- saveAll: async function () {
- if (!U.SAVEMANAGER.isDirty) return
- if (this._default_extent) this._setCenterAndZoom()
- this.backup()
- await U.SAVEMANAGER.save()
- // Do a blind render for now, as we are not sure what could
- // have changed, we'll be more subtil when we'll remove the
- // save action
- this.render(['name', 'user', 'permissions'])
- this.fire('saved')
- },
-
- propagate: function () {
- let els = document.querySelectorAll('.map-name')
- for (const el of els) {
- el.textContent = this.getDisplayName()
- }
- const status = this.permissions.getShareStatusDisplay()
- els = document.querySelectorAll('.share-status')
- for (const el of els) {
- if (status) {
- el.textContent = L._('Visibility: {status}', {
- status: status,
- })
- }
- }
- },
-
- star: async function () {
- if (!this.options.umap_id) {
- return U.Alert.error(L._('Please save the map first'))
- }
- const url = this.urls.get('map_star', { map_id: this.options.umap_id })
- const [data, response, error] = await this.server.post(url)
- if (error) {
- return
- }
- this.options.starred = data.starred
- U.Alert.success(
- data.starred ? L._('Map has been starred') : L._('Map has been unstarred')
- )
- this.renderControls()
- },
-
- geometry: function () {
- /* Return a GeoJSON geometry Object */
- const latlng = this.latLng(this.options.center || this.getCenter())
- return {
- type: 'Point',
- coordinates: [latlng.lng, latlng.lat],
- }
- },
-
- firstVisibleDatalayer: function () {
- return this.findDataLayer((datalayer) => {
- if (datalayer.isVisible()) return true
- })
- },
-
- // TODO: allow to control the default datalayer
- // (edit and viewing)
- // cf https://github.com/umap-project/umap/issues/585
- defaultEditDataLayer: function () {
- let datalayer
- let fallback
- datalayer = this.lastUsedDataLayer
- if (
- datalayer &&
- !datalayer.isDataReadOnly() &&
- datalayer.isBrowsable() &&
- datalayer.isVisible()
- ) {
- return datalayer
- }
- datalayer = this.findDataLayer((datalayer) => {
- if (!datalayer.isDataReadOnly() && datalayer.isBrowsable()) {
- fallback = datalayer
- if (datalayer.isVisible()) return true
- }
- })
- if (datalayer) return datalayer
- if (fallback) {
- // No datalayer visible, let's force one
- fallback.show()
- return fallback
- }
- return this.createDataLayer()
- },
-
- getDataLayerByUmapId: function (umap_id) {
- return this.findDataLayer((d) => d.umap_id === umap_id)
- },
-
- _editControls: function (container) {
- let UIFields = []
- for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
- UIFields.push(`options.${this.HIDDABLE_CONTROLS[i]}Control`)
- }
- UIFields = UIFields.concat([
- 'options.moreControl',
- 'options.scrollWheelZoom',
- 'options.miniMap',
- 'options.scaleControl',
- 'options.onLoadPanel',
- 'options.defaultView',
- 'options.displayPopupFooter',
- 'options.captionBar',
- 'options.captionMenus',
- ])
- builder = new U.FormBuilder(this, UIFields)
- const controlsOptions = L.DomUtil.createFieldset(
- container,
- L._('User interface options')
- )
- controlsOptions.appendChild(builder.build())
- },
-
- _editShapeProperties: function (container) {
- const shapeOptions = [
- 'options.color',
- 'options.iconClass',
- 'options.iconUrl',
- 'options.iconOpacity',
- 'options.opacity',
- 'options.weight',
- 'options.fill',
- 'options.fillColor',
- 'options.fillOpacity',
- 'options.smoothFactor',
- 'options.dashArray',
- ]
-
- builder = new U.FormBuilder(this, shapeOptions)
- const defaultShapeProperties = L.DomUtil.createFieldset(
- container,
- L._('Default shape properties')
- )
- defaultShapeProperties.appendChild(builder.build())
- },
-
- _editDefaultProperties: function (container) {
- const optionsFields = [
- 'options.zoomTo',
- 'options.easing',
- 'options.labelKey',
- 'options.sortKey',
- 'options.filterKey',
- 'options.facetKey',
- 'options.slugKey',
- ]
-
- builder = new U.FormBuilder(this, optionsFields)
- const defaultProperties = L.DomUtil.createFieldset(
- container,
- L._('Default properties')
- )
- defaultProperties.appendChild(builder.build())
- },
-
- _editInteractionsProperties: function (container) {
- const popupFields = [
- 'options.popupShape',
- 'options.popupTemplate',
- 'options.popupContentTemplate',
- 'options.showLabel',
- 'options.labelDirection',
- 'options.labelInteractive',
- 'options.outlinkTarget',
- ]
- builder = new U.FormBuilder(this, popupFields)
- const popupFieldset = L.DomUtil.createFieldset(
- container,
- L._('Default interaction options')
- )
- popupFieldset.appendChild(builder.build())
- },
-
- _editTilelayer: function (container) {
- if (!U.Utils.isObject(this.options.tilelayer)) {
- this.options.tilelayer = {}
- }
- const tilelayerFields = [
- [
- 'options.tilelayer.name',
- { handler: 'BlurInput', placeholder: L._('display name') },
- ],
- [
- 'options.tilelayer.url_template',
- {
- handler: 'BlurInput',
- helpText: `${L._('Supported scheme')}: http://{s}.domain.com/{z}/{x}/{y}.png`,
- placeholder: 'url',
- type: 'url',
- },
- ],
- [
- 'options.tilelayer.maxZoom',
- {
- handler: 'BlurIntInput',
- placeholder: L._('max zoom'),
- min: 0,
- max: this.options.maxZoomLimit,
- },
- ],
- [
- 'options.tilelayer.minZoom',
- {
- handler: 'BlurIntInput',
- placeholder: L._('min zoom'),
- min: 0,
- max: this.options.maxZoomLimit,
- },
- ],
- [
- 'options.tilelayer.attribution',
- { handler: 'BlurInput', placeholder: L._('attribution') },
- ],
- ['options.tilelayer.tms', { handler: 'Switch', label: L._('TMS format') }],
- ]
- const customTilelayer = L.DomUtil.createFieldset(
- container,
- L._('Custom background')
- )
- builder = new U.FormBuilder(this, tilelayerFields)
- customTilelayer.appendChild(builder.build())
- },
-
- _editOverlay: function (container) {
- if (!U.Utils.isObject(this.options.overlay)) {
- this.options.overlay = {}
- }
- const overlayFields = [
- [
- 'options.overlay.url_template',
- {
- handler: 'BlurInput',
- helpText: `${L._('Supported scheme')}: http://{s}.domain.com/{z}/{x}/{y}.png`,
- placeholder: 'url',
- label: L._('Background overlay url'),
- type: 'url',
- },
- ],
- [
- 'options.overlay.maxZoom',
- {
- handler: 'BlurIntInput',
- placeholder: L._('max zoom'),
- min: 0,
- max: this.options.maxZoomLimit,
- },
- ],
- [
- 'options.overlay.minZoom',
- {
- handler: 'BlurIntInput',
- placeholder: L._('min zoom'),
- min: 0,
- max: this.options.maxZoomLimit,
- },
- ],
- [
- 'options.overlay.attribution',
- { handler: 'BlurInput', placeholder: L._('attribution') },
- ],
- [
- 'options.overlay.opacity',
- { handler: 'Range', min: 0, max: 1, step: 0.1, label: L._('Opacity') },
- ],
- ['options.overlay.tms', { handler: 'Switch', label: L._('TMS format') }],
- ]
- const overlay = L.DomUtil.createFieldset(container, L._('Custom overlay'))
- builder = new U.FormBuilder(this, overlayFields)
- overlay.appendChild(builder.build())
- },
-
- _editBounds: function (container) {
- if (!U.Utils.isObject(this.options.limitBounds)) {
- this.options.limitBounds = {}
- }
- const limitBounds = L.DomUtil.createFieldset(container, L._('Limit bounds'))
- const boundsFields = [
- [
- 'options.limitBounds.south',
- { handler: 'BlurFloatInput', placeholder: L._('max South') },
- ],
- [
- 'options.limitBounds.west',
- { handler: 'BlurFloatInput', placeholder: L._('max West') },
- ],
- [
- 'options.limitBounds.north',
- { handler: 'BlurFloatInput', placeholder: L._('max North') },
- ],
- [
- 'options.limitBounds.east',
- { handler: 'BlurFloatInput', placeholder: L._('max East') },
- ],
- ]
- const boundsBuilder = new U.FormBuilder(this, boundsFields)
- limitBounds.appendChild(boundsBuilder.build())
- const boundsButtons = L.DomUtil.create('div', 'button-bar half', limitBounds)
- L.DomUtil.createButton(
- 'button',
- boundsButtons,
- L._('Use current bounds'),
- function () {
- const bounds = this.getBounds()
- this.options.limitBounds.south = L.Util.formatNum(bounds.getSouth())
- this.options.limitBounds.west = L.Util.formatNum(bounds.getWest())
- this.options.limitBounds.north = L.Util.formatNum(bounds.getNorth())
- this.options.limitBounds.east = L.Util.formatNum(bounds.getEast())
- boundsBuilder.fetchAll()
-
- this.sync.update(this, 'options.limitBounds', this.options.limitBounds)
- this.isDirty = true
- this.handleLimitBounds()
- },
- this
- )
- L.DomUtil.createButton(
- 'button',
- boundsButtons,
- L._('Empty'),
- function () {
- this.options.limitBounds.south = null
- this.options.limitBounds.west = null
- this.options.limitBounds.north = null
- this.options.limitBounds.east = null
- boundsBuilder.fetchAll()
- this.isDirty = true
- this.handleLimitBounds()
- },
- this
- )
- },
-
- _editSlideshow: function (container) {
- const slideshow = L.DomUtil.createFieldset(container, L._('Slideshow'))
- const slideshowFields = [
- [
- 'options.slideshow.active',
- { handler: 'Switch', label: L._('Activate slideshow mode') },
- ],
- [
- 'options.slideshow.delay',
- {
- handler: 'SlideshowDelay',
- helpText: L._('Delay between two transitions when in play mode'),
- },
- ],
- [
- 'options.slideshow.easing',
- { handler: 'Switch', label: L._('Animated transitions'), inheritable: true },
- ],
- [
- 'options.slideshow.autoplay',
- { handler: 'Switch', label: L._('Autostart when map is loaded') },
- ],
- ]
- const slideshowBuilder = new U.FormBuilder(this, slideshowFields, {
- callback: () => this.slideshow.setOptions(this.options.slideshow),
- })
- slideshow.appendChild(slideshowBuilder.build())
- },
-
- _editSync: function (container) {
- const sync = L.DomUtil.createFieldset(container, L._('Real-time collaboration'))
- const builder = new U.FormBuilder(this, ['options.syncEnabled'])
- sync.appendChild(builder.build())
- },
-
- _advancedActions: function (container) {
- const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
- const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
- if (this.permissions.isOwner()) {
- const deleteButton = U.Utils.loadTemplate(`
-
`)
- deleteButton.addEventListener('click', () => this.del())
- advancedButtons.appendChild(deleteButton)
-
- L.DomUtil.createButton(
- 'button umap-empty',
- advancedButtons,
- L._('Clear data'),
- this.emptyDataLayers,
- this
- )
- L.DomUtil.createButton(
- 'button umap-empty',
- advancedButtons,
- L._('Remove layers'),
- this.removeDataLayers,
- this
- )
- }
- L.DomUtil.createButton(
- 'button umap-clone',
- advancedButtons,
- L._('Clone this map'),
- this.clone,
- this
- )
- L.DomUtil.createButton(
- 'button umap-download',
- advancedButtons,
- L._('Open share & download panel'),
- this.share.open,
- this.share
- )
- },
-
- editCaption: function () {
- if (!this.editEnabled) return
- if (this.options.editMode !== 'advanced') return
- const container = L.DomUtil.create('div', 'umap-edit-container')
- const metadataFields = ['options.name', 'options.description']
-
- L.DomUtil.createTitle(container, L._('Edit map details'), 'icon-caption')
- const builder = new U.FormBuilder(this, metadataFields, {
- className: 'map-metadata',
- })
- const form = builder.build()
- container.appendChild(form)
-
- const credits = L.DomUtil.createFieldset(container, L._('Credits'))
- const creditsFields = [
- 'options.licence',
- 'options.shortCredit',
- 'options.longCredit',
- 'options.permanentCredit',
- 'options.permanentCreditBackground',
- ]
- const creditsBuilder = new U.FormBuilder(this, creditsFields)
- credits.appendChild(creditsBuilder.build())
- this.editPanel.open({ content: container })
- },
-
- edit: function () {
- if (!this.editEnabled) return
- if (this.options.editMode !== 'advanced') return
- const container = L.DomUtil.create('div')
- L.DomUtil.createTitle(container, L._('Map advanced properties'), 'icon-settings')
- this._editControls(container)
- this._editShapeProperties(container)
- this._editDefaultProperties(container)
- this._editInteractionsProperties(container)
- this.rules.edit(container)
- this._editTilelayer(container)
- this._editOverlay(container)
- this._editBounds(container)
- this._editSlideshow(container)
- if (this.options.websocketEnabled) {
- this._editSync(container)
- }
- this._advancedActions(container)
-
- this.editPanel.open({ content: container, className: 'dark' })
- },
-
- enableEdit: function () {
- L.DomUtil.addClass(document.body, 'umap-edit-enabled')
- this.editEnabled = true
- this.drop.enable()
- this.fire('edit:enabled')
- this.initSyncEngine()
- },
-
- disableEdit: function () {
- if (this.isDirty) return
- this.drop.disable()
- L.DomUtil.removeClass(document.body, 'umap-edit-enabled')
- this.editedFeature = null
- this.editEnabled = false
- this.fire('edit:disabled')
- this.editPanel.close()
- this.fullPanel.close()
- this.sync.stop()
- this.closeInplaceToolbar()
- },
-
- hasEditMode: function () {
- return this.options.editMode === 'simple' || this.options.editMode === 'advanced'
- },
-
- getDisplayName: function () {
- return this.options.name || L._('Untitled map')
- },
-
- initCaptionBar: function () {
- const container = L.DomUtil.create(
- 'div',
- 'umap-caption-bar',
- this._controlContainer
- )
- const name = L.DomUtil.create('h3', 'map-name', container)
- L.DomEvent.disableClickPropagation(container)
- this.addAuthorLink('span', container)
- if (this.getOption('captionMenus')) {
- L.DomUtil.createButton(
- 'umap-about-link flat',
- container,
- L._('Open caption'),
- this.openCaption,
- this
- )
- L.DomUtil.createButton(
- 'umap-open-browser-link flat',
- container,
- L._('Browse data'),
- () => this.openBrowser('data')
- )
- if (this.options.facetKey) {
- L.DomUtil.createButton(
- 'umap-open-filter-link flat',
- container,
- L._('Filter data'),
- () => this.openBrowser('filters')
- )
- }
- }
- this.onceDatalayersLoaded(function () {
- this.slideshow.renderToolbox(container)
- })
- },
-
- askForReset: function (e) {
- this.dialog
- .confirm(L._('Are you sure you want to cancel your changes?'))
- .then(() => {
- this.reset()
- this.disableEdit()
- })
- },
-
- startMarker: function () {
- return this.editTools.startMarker()
- },
-
- startPolyline: function () {
- return this.editTools.startPolyline()
- },
-
- startPolygon: function () {
- return this.editTools.startPolygon()
- },
-
- del: async function () {
- this.dialog
- .confirm(L._('Are you sure you want to delete this map?'))
- .then(async () => {
- const url = this.urls.get('map_delete', { map_id: this.options.umap_id })
- const [data, response, error] = await this.server.post(url)
- if (data.redirect) window.location = data.redirect
- })
- },
-
- clone: async function () {
- this.dialog
- .confirm(L._('Are you sure you want to clone this map and all its datalayers?'))
- .then(async () => {
- const url = this.urls.get('map_clone', { map_id: this.options.umap_id })
- const [data, response, error] = await this.server.post(url)
- if (data.redirect) window.location = data.redirect
- })
- },
-
- removeDataLayers: function () {
- this.eachDataLayerReverse((datalayer) => {
- datalayer._delete()
- })
- },
-
- emptyDataLayers: function () {
- this.eachDataLayerReverse((datalayer) => {
- datalayer.empty()
- })
- },
-
- initLoader: function () {
- this.loader = new L.Control.Loading()
- this.loader.onAdd(this)
- },
-
- getOwnContextMenuItems: function (event) {
- const items = []
- if (this.hasEditMode()) {
- if (this.editEnabled) {
- if (!this.isDirty) {
- items.push({
- label: this.help.displayLabel('STOP_EDIT'),
- action: () => this.disableEdit(),
- })
- }
- if (this.options.enableMarkerDraw) {
- items.push({
- label: this.help.displayLabel('DRAW_MARKER'),
- action: () => this.startMarker(event),
- })
- }
- if (this.options.enablePolylineDraw) {
- items.push({
- label: this.help.displayLabel('DRAW_POLYGON'),
- action: () => this.startPolygon(event),
- })
- }
- if (this.options.enablePolygonDraw) {
- items.push({
- label: this.help.displayLabel('DRAW_LINE'),
- action: () => this.startPolyline(event),
- })
- }
- items.push('-')
- items.push({
- label: L._('Help'),
- action: () => this.help.show('edit'),
- })
- } else {
- items.push({
- label: this.help.displayLabel('TOGGLE_EDIT'),
- action: () => this.enableEdit(),
- })
- }
- }
- if (items.length) {
- items.push('-')
- }
- items.push(
- {
- label: L._('Open browser'),
- action: () => this.openBrowser('layers'),
- },
- {
- label: L._('Browse data'),
- action: () => this.openBrowser('data'),
- }
- )
- if (this.options.facetKey) {
- items.push({
- label: L._('Filter data'),
- action: () => this.openBrowser('filters'),
- })
- }
- items.push(
- {
- label: L._('Open caption'),
- action: () => this.openCaption(),
- },
- {
- label: this.help.displayLabel('SEARCH'),
- action: () => this.search(),
- }
- )
- return items
- },
-
- getContextMenuItems: function (event) {
- const items = []
- if (this.options.urls.routing) {
- items.push('-', {
- label: L._('Directions from here'),
- action: () => this.openExternalRouting(event),
- })
- }
- if (this.options.urls.edit_in_osm) {
- items.push('-', {
- label: L._('Edit in OpenStreetMap'),
- action: () => this.editInOSM(event),
- })
- }
- return items
- },
-
- onContextMenu: function (event) {
- const items = this.getOwnContextMenuItems(event).concat(
- this.getContextMenuItems(event)
- )
- this.contextmenu.open(event.originalEvent, items)
- },
-
- editInOSM: function (e) {
- const url = this.urls.get('edit_in_osm', {
- lat: e.latlng.lat,
- lng: e.latlng.lng,
- zoom: Math.max(this.getZoom(), 16),
- })
- if (url) window.open(url)
- },
-
- openExternalRouting: function (e) {
- const url = this.urls.get('routing', {
- lat: e.latlng.lat,
- lng: e.latlng.lng,
- locale: L.getLocale(),
- zoom: this.getZoom(),
- })
- if (url) window.open(url)
- },
-
- getMap: function () {
- return this
- },
-
- getGeoContext: function () {
- const context = {
- bbox: this.getBounds().toBBoxString(),
- north: this.getBounds().getNorthEast().lat,
- east: this.getBounds().getNorthEast().lng,
- south: this.getBounds().getSouthWest().lat,
- west: this.getBounds().getSouthWest().lng,
- lat: this.getCenter().lat,
- lng: this.getCenter().lng,
- zoom: this.getZoom(),
- }
- context.left = context.west
- context.bottom = context.south
- context.right = context.east
- context.top = context.north
- return context
- },
-
- localizeUrl: function (url) {
- return U.Utils.greedyTemplate(url, this.getGeoContext(), true)
- },
-
- proxyUrl: function (url, ttl) {
- if (this.options.urls.ajax_proxy) {
- url = U.Utils.greedyTemplate(this.options.urls.ajax_proxy, {
- url: encodeURIComponent(url),
- ttl: ttl,
- })
- }
- return url
- },
getFeatureById: function (id) {
let feature
@@ -1837,57 +212,8 @@ U.Map = L.Map.extend({
}
},
- closeInplaceToolbar: function () {
- const toolbar = this._toolbars[L.Toolbar.Popup._toolbar_class_id]
- if (toolbar) toolbar.remove()
- },
-
search: function () {
if (this._controls.search) this._controls.search.open()
},
- getLayersBounds: function () {
- const bounds = new L.latLngBounds()
- this.eachBrowsableDataLayer((d) => {
- if (d.isVisible()) bounds.extend(d.layer.getBounds())
- })
- return bounds
- },
-
- sendEditLinkEmail: async function (formData) {
- const sendLink =
- this.options.urls.map_send_edit_link &&
- this.urls.get('map_send_edit_link', {
- map_id: this.options.umap_id,
- })
- await this.server.post(sendLink, {}, formData)
- },
-
- allProperties: function () {
- return [].concat(...this.datalayers_index.map((dl) => dl._propertiesIndex))
- },
-
- sortedValues: function (property) {
- return []
- .concat(...this.datalayers_index.map((dl) => dl.sortedValues(property)))
- .filter((val, idx, arr) => arr.indexOf(val) === idx)
- .sort(U.Utils.naturalSort)
- },
-
- addAuthorLink: function (element, container) {
- if (this.options.author?.name) {
- const authorContainer = L.DomUtil.add(
- element,
- 'umap-map-author',
- container,
- ` ${L._('by')} `
- )
- L.DomUtil.createLink(
- '',
- authorContainer,
- this.options.author.name,
- this.options.author.url
- )
- }
- },
})
diff --git a/umap/static/umap/vendors/formbuilder/Leaflet.FormBuilder.js b/umap/static/umap/vendors/formbuilder/Leaflet.FormBuilder.js
index 0d819651..6f814904 100644
--- a/umap/static/umap/vendors/formbuilder/Leaflet.FormBuilder.js
+++ b/umap/static/umap/vendors/formbuilder/Leaflet.FormBuilder.js
@@ -63,7 +63,11 @@ L.FormBuilder = L.Evented.extend({
const path = field.split('.')
let value = this.obj
for (const sub of path) {
- value = value[sub]
+ try {
+ value = value[sub]
+ } catch {
+ console.log(field)
+ }
}
return value
},
diff --git a/umap/templates/umap/js.html b/umap/templates/umap/js.html
index 928ed264..7faf49b8 100644
--- a/umap/templates/umap/js.html
+++ b/umap/templates/umap/js.html
@@ -41,5 +41,4 @@
-
-
+
diff --git a/umap/templates/umap/map_init.html b/umap/templates/umap/map_init.html
index e8d4d739..3d970105 100644
--- a/umap/templates/umap/map_init.html
+++ b/umap/templates/umap/map_init.html
@@ -1,12 +1,11 @@
-{% load umap_tags %}
+{% load umap_tags static %}
{% include "umap/messages.html" %}
-
diff --git a/umap/templates/umap/user_dashboard.html b/umap/templates/umap/user_dashboard.html
index 48cbf408..672eb9c1 100644
--- a/umap/templates/umap/user_dashboard.html
+++ b/umap/templates/umap/user_dashboard.html
@@ -1,6 +1,6 @@
{% extends "umap/content.html" %}
-{% load i18n %}
+{% load i18n static %}
{% block head_title %}
{{ SITE_NAME }} - {% trans "My Dashboard" %}
@@ -45,23 +45,22 @@
{% endblock maincontent %}
{% block bottom_js %}
{{ block.super }}
-
{% endblock bottom_js %}
diff --git a/umap/tests/integration/test_import.py b/umap/tests/integration/test_import.py
index 31de9fdd..ad0a42eb 100644
--- a/umap/tests/integration/test_import.py
+++ b/umap/tests/integration/test_import.py
@@ -93,10 +93,10 @@ def test_umap_import_from_textarea(live_server, tilelayer, page, settings):
page.locator('img[src="https://tile.openstreetmap.fr/hot/6/32/21.png"]')
).to_be_visible()
# Should not have imported umap_id, while in the file options
- assert not page.evaluate("U.MAP.options.umap_id")
+ assert not page.evaluate("U.MAP.properties.umap_id")
with page.expect_response(re.compile(r".*/datalayer/create/.*")):
page.get_by_role("button", name="Save").click()
- assert page.evaluate("U.MAP.options.umap_id")
+ assert page.evaluate("U.MAP.properties.umap_id")
def test_import_geojson_from_textarea(tilelayer, live_server, page):