Merge pull request #1463 from umap-project/almet/js/client-routing

Add support for JS modules (+module for URLs handling)
2024-01-15 14:46:56 +01:00 · 2024-01-15 14:46:56 +01:00 · 9054d35f0f
commit 9054d35f0f
parent de8e806b28 1eb0f352c9
12 changed files with 321 additions and 237 deletions
--- a/umap/static/umap/js/components/fragment.js
+++ b/umap/static/umap/js/components/fragment.js
@ -0,0 +1,13 @@
+class UmapFragment extends HTMLElement {
+  connectedCallback() {
+    new L.U.Map(this.firstElementChild.id, JSON.parse(this.dataset.settings))
+  }
+}
+
+function register(Class, tagName) {
+  if ('customElements' in window && !customElements.get(tagName)) {
+    customElements.define(tagName, Class)
+  }
+}
+
+register(UmapFragment, 'umap-fragment')
--- a/umap/static/umap/js/modules/global.js
+++ b/umap/static/umap/js/modules/global.js
@ -0,0 +1,8 @@
+import * as L from '../../vendors/leaflet/leaflet-src.esm.js'
+import URLs from './urls.js'
+// Import modules and export them to the global scope.
+// For the not yet module-compatible JS out there.
+
+// Copy the leaflet module, it's expected by leaflet plugins to be writeable.
+window.L = { ...L }
+window.umap = { URLs }
--- a/umap/static/umap/js/modules/urls.js
+++ b/umap/static/umap/js/modules/urls.js
@ -0,0 +1,29 @@
+import { Util } from '../../vendors/leaflet/leaflet-src.esm.js'
+
+export default class URLs {
+  constructor(serverUrls) {
+    this.urls = serverUrls
+  }
+
+  get(urlName, params) {
+    if (typeof this[urlName] === 'function') return this[urlName](params)
+
+    if (this.urls.hasOwnProperty(urlName)) {
+      return Util.template(this.urls[urlName], params)
+    } else {
+      throw `Unable to find a URL for route ${urlName}`
+    }
+  }
+
+  // Update if map_id is passed, create otherwise.
+  map_save({ map_id, ...options }) {
+    if (map_id) return this.get('map_update', { map_id, ...options })
+    return this.get('map_create')
+  }
+
+  // Update the layer if pk is passed, create otherwise.
+  datalayer_save({ map_id, pk }, ...options) {
+    if (pk) return this.get('datalayer_update', { map_id, pk }, ...options)
+    return this.get('datalayer_create', { map_id, pk }, ...options)
+  }
+}
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@ -95,6 +95,7 @@ L.U.Map.include({

    // After calling parent initialize, as we are doing initCenter our-selves
    if (geojson.geometry) this.options.center = this.latLng(geojson.geometry)
+    this.urls = new window.umap.URLs(this.options.urls)

    this.ui = new L.U.UI(this._container)
    this.xhr = new L.U.Xhr(this.ui)
@ -279,10 +280,12 @@ L.U.Map.include({
        url.searchParams.delete('edit')
        history.pushState({}, '', url)
      }
-      if (L.Util.queryString('download'))
-        window.location = L.Util.template(this.options.urls.map_download, {
+      if (L.Util.queryString('download')) {
+        const download_url = this.urls.get('map_download', {
          map_id: this.options.umap_id,
        })
+        window.location = download_url
+      }
    })

    window.onbeforeunload = () => this.isDirty || null
@ -1085,7 +1088,7 @@ L.U.Map.include({
    formData.append('name', this.options.name)
    formData.append('center', JSON.stringify(this.geometry()))
    formData.append('settings', JSON.stringify(geojson))
-    this.post(this.getSaveUrl(), {
+    this.post(this.urls.get('map_save', { map_id: this.options.umap_id }), {
      data: formData,
      context: this,
      callback: function (data) {
@ -1161,42 +1164,25 @@ L.U.Map.include({
  },

  sendEditLink: function () {
-    const url = L.Util.template(this.options.urls.map_send_edit_link, {
-        map_id: this.options.umap_id,
-      }),
-      input = this.ui._alert.querySelector('input'),
-      email = input.value
+    const input = this.ui._alert.querySelector('input')
+    const email = input.value

    const formData = new FormData()
    formData.append('email', email)
+
+    const url = this.urls.get('map_send_edit_link', { map_id: this.options.umap_id })
    this.post(url, {
      data: formData,
    })
  },

-  getEditUrl: function () {
-    return L.Util.template(this.options.urls.map_update, {
-      map_id: this.options.umap_id,
-    })
-  },
-
-  getCreateUrl: function () {
-    return L.Util.template(this.options.urls.map_create)
-  },
-
-  getSaveUrl: function () {
-    return (this.options.umap_id && this.getEditUrl()) || this.getCreateUrl()
-  },
-
  star: function () {
    if (!this.options.umap_id)
      return this.ui.alert({
        content: L._('Please save the map first'),
        level: 'error',
      })
-    let url = L.Util.template(this.options.urls.map_star, {
-      map_id: this.options.umap_id,
-    })
+    const url = this.urls.get('map_star', { map_id: this.options.umap_id })
    this.post(url, {
      context: this,
      callback: function (data) {
@ -1804,9 +1790,7 @@ L.U.Map.include({

  del: function () {
    if (confirm(L._('Are you sure you want to delete this map?'))) {
-      const url = L.Util.template(this.options.urls.map_delete, {
-        map_id: this.options.umap_id,
-      })
+      const url = this.urls.get('map_delete', { map_id: this.options.umap_id })
      this.post(url)
    }
  },
@ -1815,9 +1799,7 @@ L.U.Map.include({
    if (
      confirm(L._('Are you sure you want to clone this map and all its datalayers?'))
    ) {
-      const url = L.Util.template(this.options.urls.map_clone, {
-        map_id: this.options.umap_id,
-      })
+      const url = this.urls.get('map_clone', { map_id: this.options.umap_id })
      this.post(url)
    }
  },
@ -1952,17 +1934,13 @@ L.U.Map.include({
  },

  openExternalRouting: function (e) {
-    const url = this.options.urls.routing
-    if (url) {
-      const params = {
-        lat: e.latlng.lat,
-        lng: e.latlng.lng,
-        locale: L.locale,
-        zoom: this.getZoom(),
-      }
-      window.open(L.Util.template(url, params))
-    }
-    return
+    const url = this.urls.get('routing', {
+      lat: e.latlng.lat,
+      lng: e.latlng.lng,
+      locale: L.locale,
+      zoom: this.getZoom(),
+    })
+    if (url) window.open(url)
  },

  getMap: function () {
--- a/umap/static/umap/js/umap.layer.js
+++ b/umap/static/umap/js/umap.layer.js
@ -1069,23 +1069,6 @@ L.U.DataLayer = L.Evented.extend({
    })
  },

-  getEditUrl: function () {
-    return L.Util.template(this.map.options.urls.datalayer_update, {
-      map_id: this.map.options.umap_id,
-      pk: this.umap_id,
-    })
-  },
-
-  getCreateUrl: function () {
-    return L.Util.template(this.map.options.urls.datalayer_create, {
-      map_id: this.map.options.umap_id,
-    })
-  },
-
-  getSaveUrl: function () {
-    return (this.umap_id && this.getEditUrl()) || this.getCreateUrl()
-  },
-
  getColor: function () {
    return this.options.color || this.map.getOption('color')
  },
@ -1577,7 +1560,11 @@ L.U.DataLayer = L.Evented.extend({
    // Filename support is shaky, don't do it for now.
    const blob = new Blob([JSON.stringify(geojson)], { type: 'application/json' })
    formData.append('geojson', blob)
-    this.map.post(this.getSaveUrl(), {
+    const saveUrl = this.map.urls.get('datalayer_save', {
+      map_id: this.map.options.umap_id,
+      pk: this.umap_id,
+    })
+    this.map.post(saveUrl, {
      data: formData,
      callback: function (data, response) {
        // Response contains geojson only if save has conflicted and conflicts have
--- a/umap/static/umap/test/URLs.js
+++ b/umap/static/umap/test/URLs.js
@ -0,0 +1,54 @@
+import URLs from '../js/modules/urls.js'
+
+describe('URLs', () => {
+  // Mock server URLs that will be used for testing
+  const mockServerUrls = {
+    map_create: '/maps/create',
+    map_update: '/maps/{map_id}/update',
+    datalayer_create: '/maps/{map_id}/datalayers/create',
+    datalayer_update: '/maps/{map_id}/datalayers/{pk}/update',
+  }
+
+  let urls = new URLs(mockServerUrls)
+
+  describe('get()', () => {
+    it('should throw an error if the urlName does not exist', () => {
+      expect(() => urls.get('non_existent')).to.throw()
+    })
+
+    it('should return the correct templated URL for known urlNames', () => {
+      expect(urls.get('map_create')).to.be.equal('/maps/create')
+      expect(urls.get('map_update', { map_id: '123' })).to.be.equal('/maps/123/update')
+    })
+
+    it('should return the correct templated URL when provided with parameters', () => {
+      expect(urls.get('datalayer_update', { map_id: '123', pk: '456' })).to.be.equal(
+        '/maps/123/datalayers/456/update'
+      )
+    })
+  })
+
+  describe('map_save()', () => {
+    it('should return the create URL if no map_id is provided', () => {
+      expect(urls.map_save({})).to.be.equal('/maps/create')
+    })
+
+    it('should return the update URL if a map_id is provided', () => {
+      expect(urls.map_save({ map_id: '123' })).to.be.equal('/maps/123/update')
+    })
+  })
+
+  describe('datalayer_save()', () => {
+    it('should return the create URL if no pk is provided', () => {
+      expect(urls.datalayer_save({ map_id: '123' })).to.be.equal(
+        '/maps/123/datalayers/create'
+      )
+    })
+
+    it('should return the update URL if a pk is provided', () => {
+      expect(urls.datalayer_save({ map_id: '123', pk: '456' })).to.be.equal(
+        '/maps/123/datalayers/456/update'
+      )
+    })
+  })
+})
--- a/umap/static/umap/test/Util.js
+++ b/umap/static/umap/test/Util.js
@ -86,7 +86,7 @@ describe('L.Util', function () {

    it('should handle target option', function () {
      assert.equal(
-        L.Util.toHTML('A simple http://osm.org link', {target: 'self'}),
+        L.Util.toHTML('A simple http://osm.org link', { target: 'self' }),
        'A simple <a href="http://osm.org" target="_self">http://osm.org</a> link'
      )
    })
@ -257,8 +257,8 @@ describe('L.Util', function () {
    it('should accept non ascii chars', function () {
      assert.equal(
        L.Util.greedyTemplate('A phrase with a {Accessibilité} and {переменная}.', {
-          'Accessibilité': 'value',
-          'переменная': 'another',
+          Accessibilité: 'value',
+          переменная: 'another',
        }),
        'A phrase with a value and another.'
      )
@ -475,70 +475,72 @@ describe('L.Util', function () {
    })
  })

-  describe("#normalize()", function () {
-
-    if('should remove accents', function () {
-      // French é
-      assert.equal(L.Util.normalize('aéroport'), 'aeroport')
-      // American é
-      assert.equal(L.Util.normalize('aéroport'), 'aeroport')
-    })
+  describe('#normalize()', function () {
+    if (
+      ('should remove accents',
+      function () {
+        // French é
+        assert.equal(L.Util.normalize('aéroport'), 'aeroport')
+        // American é
+        assert.equal(L.Util.normalize('aéroport'), 'aeroport')
+      })
+    );
  })

-  describe("#sortFeatures()", function () {
+  describe('#sortFeatures()', function () {
    let feat1, feat2, feat3
    before(function () {
-      feat1 = {properties: {}}
-      feat2 = {properties: {}}
-      feat3 = {properties: {}}
+      feat1 = { properties: {} }
+      feat2 = { properties: {} }
+      feat3 = { properties: {} }
    })
    it('should sort feature from custom key', function () {
-      feat1.properties.mykey = "13. foo"
-      feat2.properties.mykey = "7. foo"
-      feat3.properties.mykey = "111. foo"
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "mykey")
+      feat1.properties.mykey = '13. foo'
+      feat2.properties.mykey = '7. foo'
+      feat3.properties.mykey = '111. foo'
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], 'mykey')
      assert.equal(features[0], feat2)
      assert.equal(features[1], feat1)
      assert.equal(features[2], feat3)
    })
    it('should sort feature from multiple keys', function () {
-      feat1.properties.mykey = "13. foo"
-      feat2.properties.mykey = "111. foo"
-      feat3.properties.mykey = "111. foo"
-      feat1.properties.otherkey = "C"
-      feat2.properties.otherkey = "B"
-      feat3.properties.otherkey = "A"
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "mykey,otherkey")
+      feat1.properties.mykey = '13. foo'
+      feat2.properties.mykey = '111. foo'
+      feat3.properties.mykey = '111. foo'
+      feat1.properties.otherkey = 'C'
+      feat2.properties.otherkey = 'B'
+      feat3.properties.otherkey = 'A'
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], 'mykey,otherkey')
      assert.equal(features[0], feat1)
      assert.equal(features[1], feat3)
      assert.equal(features[2], feat2)
    })
    it('should sort feature from custom key reverse', function () {
-      feat1.properties.mykey = "13. foo"
-      feat2.properties.mykey = "7. foo"
-      feat3.properties.mykey = "111. foo"
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "-mykey")
+      feat1.properties.mykey = '13. foo'
+      feat2.properties.mykey = '7. foo'
+      feat3.properties.mykey = '111. foo'
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], '-mykey')
      assert.equal(features[0], feat3)
      assert.equal(features[1], feat1)
      assert.equal(features[2], feat2)
    })
    it('should sort feature from multiple keys with reverse', function () {
-      feat1.properties.mykey = "13. foo"
-      feat2.properties.mykey = "111. foo"
-      feat3.properties.mykey = "111. foo"
-      feat1.properties.otherkey = "C"
-      feat2.properties.otherkey = "B"
-      feat3.properties.otherkey = "A"
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "mykey,-otherkey")
+      feat1.properties.mykey = '13. foo'
+      feat2.properties.mykey = '111. foo'
+      feat3.properties.mykey = '111. foo'
+      feat1.properties.otherkey = 'C'
+      feat2.properties.otherkey = 'B'
+      feat3.properties.otherkey = 'A'
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], 'mykey,-otherkey')
      assert.equal(features[0], feat1)
      assert.equal(features[1], feat2)
      assert.equal(features[2], feat3)
    })
    it('should sort feature with space first', function () {
-      feat1.properties.mykey = "1 foo"
-      feat2.properties.mykey = "2 foo"
-      feat3.properties.mykey = "1a foo"
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "mykey")
+      feat1.properties.mykey = '1 foo'
+      feat2.properties.mykey = '2 foo'
+      feat3.properties.mykey = '1a foo'
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], 'mykey')
      assert.equal(features[0], feat1)
      assert.equal(features[1], feat3)
      assert.equal(features[2], feat2)
--- a/umap/static/umap/test/index.html
+++ b/umap/static/umap/test/index.html
@ -1,57 +1,60 @@
+<!DOCTYPE html>
 <html>
  <head>
    <title>Umap front Tests</title>
    <meta charset="utf-8" />
-    <script src="../vendors/leaflet/leaflet-src.js"></script>
-    <script src="../vendors/editable/Path.Drag.js"></script>
-    <script src="../vendors/editable/Leaflet.Editable.js"></script>
-    <script src="../vendors/hash/leaflet-hash.js"></script>
-    <script src="../vendors/i18n/Leaflet.i18n.js"></script>
-    <script src="../vendors/editinosm/Leaflet.EditInOSM.js"></script>
-    <script src="../vendors/minimap/Control.MiniMap.js"></script>
-    <script src="../vendors/csv2geojson/csv2geojson.js"></script>
-    <script src="../vendors/togeojson/togeojson.js"></script>
-    <script src="../vendors/osmtogeojson/osmtogeojson.js"></script>
-    <script src="../vendors/contextmenu/leaflet.contextmenu.js"></script>
-    <script src="../vendors/loading/Control.Loading.js"></script>
-    <script src="../vendors/markercluster/leaflet.markercluster-src.js"></script>
-    <script src="../vendors/photon/leaflet.photon.js"></script>
-    <script src="../vendors/heat/leaflet-heat.js"></script>
-    <script src="../vendors/fullscreen/Leaflet.fullscreen.js"></script>
-    <script src="../vendors/toolbar/leaflet.toolbar-src.js"></script>
-    <script src="../vendors/formbuilder/Leaflet.FormBuilder.js"></script>
-    <script src="../vendors/measurable/Leaflet.Measurable.js"></script>
-    <script src="../vendors/iconlayers/iconLayers.js"></script>
-    <script src="../vendors/locatecontrol/L.Control.Locate.js"></script>
-    <script src="../vendors/dompurify/purify.js"></script>
-    <script src="../vendors/togpx/togpx.js"></script>
-    <script src="../vendors/tokml/tokml.js"></script>
-    <script src="../vendors/simple-statistics/simple-statistics.min.js"></script>
-    <script src="../vendors/colorbrewer/colorbrewer.js"></script>
-    <script src="../js/umap.core.js"></script>
-    <script src="../js/umap.autocomplete.js"></script>
-    <script src="../js/umap.popup.js"></script>
-    <script src="../js/umap.xhr.js"></script>
-    <script src="../js/umap.forms.js"></script>
-    <script src="../js/umap.icon.js"></script>
-    <script src="../js/umap.features.js"></script>
-    <script src="../js/umap.layer.js"></script>
-    <script src="../js/umap.controls.js"></script>
-    <script src="../js/umap.slideshow.js"></script>
-    <script src="../js/umap.tableeditor.js"></script>
-    <script src="../js/umap.permissions.js"></script>
-    <script src="../js/umap.datalayer.permissions.js"></script>
-    <script src="../js/umap.browser.js"></script>
-    <script src="../js/umap.importer.js"></script>
-    <script src="../js/umap.share.js"></script>
-    <script src="../js/umap.js"></script>
-    <script src="../js/umap.ui.js"></script>
+    <script type="module" src="../js/modules/global.js" defer></script>
+    <script src="../vendors/editable/Path.Drag.js" defer></script>
+    <script src="../vendors/editable/Leaflet.Editable.js" defer></script>
+    <script src="../vendors/hash/leaflet-hash.js" defer></script>
+    <script src="../vendors/i18n/Leaflet.i18n.js" defer></script>
+    <script src="../vendors/editinosm/Leaflet.EditInOSM.js" defer></script>
+    <script src="../vendors/minimap/Control.MiniMap.js" defer></script>
+    <script src="../vendors/csv2geojson/csv2geojson.js" defer></script>
+    <script src="../vendors/togeojson/togeojson.js" defer></script>
+    <script src="../vendors/osmtogeojson/osmtogeojson.js" defer></script>
+    <script src="../vendors/contextmenu/leaflet.contextmenu.js" defer></script>
+    <script src="../vendors/loading/Control.Loading.js" defer></script>
+    <script src="../vendors/markercluster/leaflet.markercluster-src.js" defer></script>
+    <script src="../vendors/photon/leaflet.photon.js" defer></script>
+    <script src="../vendors/heat/leaflet-heat.js" defer></script>
+    <script src="../vendors/fullscreen/Leaflet.fullscreen.js" defer></script>
+    <script src="../vendors/toolbar/leaflet.toolbar-src.js" defer></script>
+    <script src="../vendors/formbuilder/Leaflet.FormBuilder.js" defer></script>
+    <script src="../vendors/measurable/Leaflet.Measurable.js" defer></script>
+    <script src="../vendors/locatecontrol/L.Control.Locate.js" defer></script>
+    <script src="../vendors/dompurify/purify.js" defer></script>
+    <script src="../vendors/togpx/togpx.js" defer></script>
+    <script src="../vendors/tokml/tokml.js" defer></script>
+    <script src="../vendors/iconlayers/iconLayers.js" defer></script>
+    <script src="../vendors/simple-statistics/simple-statistics.min.js" defer></script>
+    <script src="../vendors/colorbrewer/colorbrewer.js" defer></script>
+    <script src="../js/umap.core.js" defer></script>
+    <script src="../js/umap.autocomplete.js" defer></script>
+    <script src="../js/umap.popup.js" defer></script>
+    <script src="../js/umap.xhr.js" defer></script>
+    <script src="../js/umap.forms.js" defer></script>
+    <script src="../js/umap.icon.js" defer></script>
+    <script src="../js/umap.features.js" defer></script>
+    <script src="../js/umap.layer.js" defer></script>
+    <script src="../js/umap.controls.js" defer></script>
+    <script src="../js/umap.slideshow.js" defer></script>
+    <script src="../js/umap.tableeditor.js" defer></script>
+    <script src="../js/umap.permissions.js" defer></script>
+    <script src="../js/umap.datalayer.permissions.js" defer></script>
+    <script src="../js/umap.browser.js" defer></script>
+    <script src="../js/umap.importer.js" defer></script>
+    <script src="../js/umap.share.js" defer></script>
+    <script src="../js/umap.js" defer></script>
+    <script src="../js/umap.ui.js" defer></script>
    <link rel="stylesheet" href="../vendors/leaflet/leaflet.css" />
    <link rel="stylesheet" href="../vendors/minimap/Control.MiniMap.css" />
    <link rel="stylesheet" href="../vendors/editinosm/Leaflet.EditInOSM.css" />
    <link rel="stylesheet" href="../vendors/markercluster/MarkerCluster.css" />
-    <link rel="stylesheet" href="../vendors/markercluster/MarkerCluster.Default.css" />
-    <link rel="stylesheet" href="../vendors/contextmenu/leaflet.contextmenu.css" />
+    <link rel="stylesheet"
+          href="../vendors/markercluster/MarkerCluster.Default.css" />
+    <link rel="stylesheet"
+          href="../vendors/contextmenu/leaflet.contextmenu.css" />
    <link rel="stylesheet" href="../vendors/toolbar/leaflet.toolbar.css" />
    <link rel="stylesheet" href="../vendors/measurable/Leaflet.Measurable.css" />
    <link rel="stylesheet" href="../vendors/iconlayers/iconLayers.css" />
@ -61,7 +64,6 @@
    <link rel="stylesheet" href="../../umap/nav.css" />
    <link rel="stylesheet" href="../../umap/map.css" />
    <link rel="stylesheet" href="../../umap/theme.css" />
-
    <script src="../../../../node_modules/sinon/pkg/sinon.js"></script>
    <script src="../../../../node_modules/mocha/mocha.js"></script>
    <script src="../../../../node_modules/chai/chai.js"></script>
@ -75,36 +77,38 @@
      })
      chai.config.includeStack = true
    </script>
-    <script src="./_pre.js"></script>
-    <script src="./Map.js"></script>
-    <script src="./Map.Init.js"></script>
-    <script src="./Map.Export.js"></script>
-    <script src="./DataLayer.js"></script>
-    <script src="./TableEditor.js"></script>
-    <script src="./Feature.js"></script>
-    <script src="./Marker.js"></script>
-    <script src="./Polyline.js"></script>
-    <script src="./Polygon.js"></script>
-    <script src="./Util.js"></script>
-    <script src="./Controls.js"></script>
-    <script src="./Permissions.js"></script>
-    <script src="./Choropleth.js"></script>
+    <script src="./_pre.js" defer></script>
+    <script src="./Map.js" defer></script>
+    <script src="./Map.Init.js" defer></script>
+    <script src="./Map.Export.js" defer></script>
+    <script src="./DataLayer.js" defer></script>
+    <script src="./TableEditor.js" defer></script>
+    <script src="./Feature.js" defer></script>
+    <script src="./Marker.js" defer></script>
+    <script src="./Polyline.js" defer></script>
+    <script src="./Polygon.js" defer></script>
+    <script src="./Util.js" defer></script>
+    <script src="./Controls.js" defer></script>
+    <script src="./Permissions.js" defer></script>
+    <script src="./Choropleth.js" defer></script>
+    <script type="module" src="./URLs.js" defer></script>
    <style type="text/css">
-      #mocha {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 10000;
-        background-color: white;
-        box-shadow: 0px 0px 8px 0px black;
-        overflow-y: auto;
-        display: none;
-      }
-      #mocha-stats {
-        position: absolute;
-      }
+        #mocha {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 10000;
+            background-color: white;
+            box-shadow: 0px 0px 8px 0px black;
+            overflow-y: auto;
+            display: none;
+        }
+
+        #mocha-stats {
+            position: absolute;
+        }
    </style>
  </head>
  <body>
--- a/umap/templates/umap/content.html
+++ b/umap/templates/umap/content.html
@ -38,6 +38,8 @@
 {% block bottom_js %}
  {{ block.super }}
  <script type="text/javascript">
+    window.addEventListener('DOMContentLoaded', (event => {
+      
    !(function () {
      const ui = new L.U.UI(document.querySelector('header'))
      const xhr = new L.U.Xhr(ui)
@ -66,12 +68,6 @@
          callback: function (data) {
            const container = this.parentNode
            container.innerHTML = data
-            Array.prototype.forEach.call(
-              container.querySelectorAll('script:not([type="application/json"])'),
-              function (item) {
-                eval(item.firstChild.textContent)
-              }
-            )
            const more = document.querySelector('.more_button')
            if (more) {
              L.DomEvent.on(more, 'click', getMore, more)
@ -85,6 +81,8 @@
        L.DomEvent.on(more, 'click', getMore, more)
      }
    })(this)
+    }
+    ))
  </script>
 {% endblock bottom_js %}
 {% block footer %}
--- a/umap/templates/umap/js.html
+++ b/umap/templates/umap/js.html
@ -1,51 +1,62 @@
 {% load compress %}
 {% compress js %}
-  <script src="{{ STATIC_URL }}umap/vendors/leaflet/leaflet-src.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/editable/Path.Drag.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/editable/Leaflet.Editable.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/hash/leaflet-hash.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/i18n/Leaflet.i18n.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/editinosm/Leaflet.EditInOSM.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/minimap/Control.MiniMap.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/csv2geojson/csv2geojson.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/togeojson/togeojson.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/osmtogeojson/osmtogeojson.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/loading/Control.Loading.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/markercluster/leaflet.markercluster-src.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/contextmenu/leaflet.contextmenu.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/photon/leaflet.photon.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/georsstogeojson/GeoRSSToGeoJSON.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/heat/leaflet-heat.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/fullscreen/Leaflet.fullscreen.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/toolbar/leaflet.toolbar-src.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/formbuilder/Leaflet.FormBuilder.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/measurable/Leaflet.Measurable.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/iconlayers/iconLayers.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/togpx/togpx.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/tokml/tokml.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/locatecontrol/L.Control.Locate.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/dompurify/purify.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/colorbrewer/colorbrewer.js"></script>
-  <script src="{{ STATIC_URL }}umap/vendors/simple-statistics/simple-statistics.min.js"></script>
+        <script type="module" src="{{ STATIC_URL }}umap/js/modules/global.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/editable/Path.Drag.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/editable/Leaflet.Editable.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/hash/leaflet-hash.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/i18n/Leaflet.i18n.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/editinosm/Leaflet.EditInOSM.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/minimap/Control.MiniMap.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/csv2geojson/csv2geojson.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/togeojson/togeojson.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/osmtogeojson/osmtogeojson.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/loading/Control.Loading.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/markercluster/leaflet.markercluster-src.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/contextmenu/leaflet.contextmenu.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/photon/leaflet.photon.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/georsstogeojson/GeoRSSToGeoJSON.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/heat/leaflet-heat.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/fullscreen/Leaflet.fullscreen.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/toolbar/leaflet.toolbar-src.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/formbuilder/Leaflet.FormBuilder.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/measurable/Leaflet.Measurable.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/togpx/togpx.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/iconlayers/iconLayers.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/tokml/tokml.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/locatecontrol/L.Control.Locate.js"
+                defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/dompurify/purify.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/colorbrewer/colorbrewer.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/vendors/simple-statistics/simple-statistics.min.js"
+                defer></script>
 {% endcompress %}
-{% if locale %}<script src="{{ STATIC_URL }}umap/locale/{{ locale }}.js"></script>{% endif %}
+{% if locale %}<script src="{{ STATIC_URL }}umap/locale/{{ locale }}.js" defer></script>{% endif %}
 {% compress js %}
-  <script src="{{ STATIC_URL }}umap/js/umap.core.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.autocomplete.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.popup.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.xhr.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.forms.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.icon.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.features.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.permissions.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.datalayer.permissions.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.layer.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.controls.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.slideshow.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.tableeditor.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.browser.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.importer.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.share.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.js"></script>
-  <script src="{{ STATIC_URL }}umap/js/umap.ui.js"></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.core.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.autocomplete.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.popup.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.xhr.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.forms.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.icon.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.features.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.permissions.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.datalayer.permissions.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.layer.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.controls.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.slideshow.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.tableeditor.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.browser.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.importer.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.share.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.ui.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/components/fragment.js" defer></script>
 {% endcompress %}
--- a/umap/templates/umap/map_fragment.html
+++ b/umap/templates/umap/map_fragment.html
@ -1,7 +1,4 @@
 {% load umap_tags %}
-<div id="{{ unique_id }}" class="map_fragment"></div>
-<!-- djlint:off -->
-<script type="text/javascript">
-  new L.U.Map("{{ unique_id }}", {{ map_settings|notag|safe }})
-</script>
-<!-- djlint:on -->
+<umap-fragment data-settings='{{ map_settings|escape }}'>
+  <div id="{{ unique_id }}" class="map_fragment"></div>
+</umap-fragment>
--- a/umap/templates/umap/map_init.html
+++ b/umap/templates/umap/map_init.html
@ -1,7 +1,10 @@
 {% load umap_tags %}
 <div id="map"></div>
 <!-- djlint:off -->
-<script type="text/javascript">
-  let MAP = new L.U.Map("map", {{ map_settings|notag|safe }})
+<script defer type="text/javascript">
+  let MAP
+  window.addEventListener('DOMContentLoaded', (event) => {
+    MAP = new L.U.Map("map", {{ map_settings|notag|safe }});
+  });
 </script>
 <!-- djlint:on -->