Preview map only on click in user’s dashboard

Refs #1459

umap/models.py

@@ -1,3 +1,4 @@
+import json
 import os
 import time
 
@@ -193,6 +194,40 @@ class Map(NamedModel):
     objects = models.Manager()
     public = PublicManager()
 
+    @property
+    def unique_id(self):
+        return f"map_{self.pk}"
+
+    @property
+    def preview_settings(self):
+        from .views import _urls_for_js
+
+        layers = self.datalayer_set.all()
+        datalayer_data = [c.metadata() for c in layers]
+        map_settings = self.settings
+        if "properties" not in map_settings:
+            map_settings["properties"] = {}
+        map_settings["properties"].update(
+            {
+                "tilelayers": [TileLayer.get_default().json],
+                "datalayers": datalayer_data,
+                "urls": _urls_for_js(),
+                "STATIC_URL": settings.STATIC_URL,
+                "editMode": "disabled",
+                "hash": False,
+                "attributionControl": False,
+                "scrollWheelZoom": False,
+                "umapAttributionControl": False,
+                "noControl": True,
+                "umap_id": self.pk,
+                "onLoadPanel": "none",
+                "captionBar": False,
+                "default_iconUrl": "%sumap/img/marker.png" % settings.STATIC_URL,
+                "slideshow": {},
+            }
+        )
+        return map_settings
+
     def get_absolute_url(self):
         return reverse("map", kwargs={"slug": self.slug or "map", "map_id": self.pk})
 

umap/templates/umap/map_table.html

@@ -1,9 +1,8 @@
-{% load umap_tags umap_tags i18n %}
+{% load umap_tags i18n %}
 <table class="maps">
   {% if not is_ajax %}
     <thead>
       <tr>
-        <th>{% blocktrans %}Map{% endblocktrans %}</th>
         <th>{% blocktrans %}Name{% endblocktrans %}</th>
         <th>{% blocktrans %}Who can see / edit{% endblocktrans %}</th>
         <th>{% blocktrans %}Last save{% endblocktrans %}</th>
@@ -14,10 +13,19 @@
   {% endif %}
   <tbody>
     {% for map_inst in maps %}
+      {{ map_inst.preview_settings|json_script:map_inst.unique_id }}
       <tr>
-        <td>{% map_fragment map_inst prefix=prefix page=request.GET.p %}</td>
         <td>
           <a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
+          <button class="map-opener" data-map-id="{{ map_inst.unique_id }}">{% blocktrans %}Preview{% endblocktrans %}</button>
+          <dialog>
+            <form method="dialog">
+              <div id="{{ map_inst.unique_id }}_target" class="map_fragment"></div>
+              <p class="close-dialog">
+                <button type="submit">Close</button>
+              </p>
+            </form>
+          </dialog>
         </td>
         <td>{{ map_inst.get_share_status_display }} / {{ map_inst.get_edit_status_display }}</td>
         <td>{{ map_inst.modified_at }}</td>
@@ -39,3 +47,33 @@
        class="button more_button neutral">{% trans "More" %}</a>
   </div>
 {% endif %}
+
+<style type="text/css">
+  dialog {
+    width: 90vw;
+    height: 90vh;
+  }
+  .close-dialog {
+    text-align: center;
+  }
+  table.maps .map_fragment {
+    display: block;
+    width: 100%;
+    height: 80vh;
+  }
+  dialog::backdrop {
+    background: #fff5;
+    backdrop-filter: blur(4px);
+  }
+</style>
+
+<script type="text/javascript">
+  for (const mapOpener of document.querySelectorAll("button.map-opener")) {
+    mapOpener.addEventListener('click', (event) => {
+      event.target.nextElementSibling.showModal()
+      const mapId = event.target.dataset.mapId
+      const previewSettings = JSON.parse(document.getElementById(mapId).textContent)
+      const map = new L.U.Map(`${mapId}_target`, previewSettings)
+    })
+  }
+</script>

umap/templatetags/umap_tags.py

@@ -4,9 +4,6 @@ from copy import copy
 from django import template
 from django.conf import settings
 
-from ..models import DataLayer, TileLayer
-from ..views import _urls_for_js
-
 register = template.Library()
 
 
@@ -22,30 +19,7 @@ def umap_js(locale=None):
 
 @register.inclusion_tag("umap/map_fragment.html")
 def map_fragment(map_instance, **kwargs):
-    layers = DataLayer.objects.filter(map=map_instance)
-    datalayer_data = [c.metadata() for c in layers]
-    map_settings = map_instance.settings
-    if "properties" not in map_settings:
-        map_settings["properties"] = {}
-    map_settings["properties"].update(
-        {
-            "tilelayers": [TileLayer.get_default().json],
-            "datalayers": datalayer_data,
-            "urls": _urls_for_js(),
-            "STATIC_URL": settings.STATIC_URL,
-            "editMode": "disabled",
-            "hash": False,
-            "attributionControl": False,
-            "scrollWheelZoom": False,
-            "umapAttributionControl": False,
-            "noControl": True,
-            "umap_id": map_instance.pk,
-            "onLoadPanel": "none",
-            "captionBar": False,
-            "default_iconUrl": "%sumap/img/marker.png" % settings.STATIC_URL,
-            "slideshow": {},
-        }
-    )
+    map_settings = map_instance.preview_settings
     map_settings["properties"].update(kwargs)
     prefix = kwargs.pop("prefix", None) or "map"
     page = kwargs.pop("page", None) or ""