Add configurable popups on markers (PR #339)

Author: PartyNell

docs/customization.rst

@@ -197,6 +197,34 @@ The second way overrides these templates for all your models.
     you need to create a sub-directory named ``mapentity`` in ``main/templates``.
     Then you can create a file named ``override_detail_pdf.html``(or ``.css``) and it will be used for all your models if a specific template is not provided.
 
+Popups
+------
+
+MapEntity displays a popup when clicking on a map object.
+By default, it shows the object's name and a button linking to its detail page.
+
+Configure popup fields for each model using the ``POPUP_CONTENT`` setting:
+
+.. code-block:: python
+    POPUP_CONTENT = {
+        "museum": ["name", "city", "public"],
+    }
+The key is the model name in lowercase (e.g., ``"museum"``), and the value is a list of field names to display.
+The popup title shows the object's string representation (using `__str__()`), with the configured fields displayed below.
+
+If there is a display function for a field in the model then it will be used in priority.
+
+.. code-block:: python
+    @property
+    def public_display(self):
+        return "Public" if self.public else "Not public"
+If no display function exists, the field’s string representation is used by default.
+
+Non-existent fields can be used if a display function exist.
+
+If a model isn't configured in ``POPUP_CONTENT``, the object's string representation is used as the title.
+If a specified field doesn't exist on the model, it won't be displayed. The detail page button is always shown.
+If the option ``displayPopup`` is setup to false, then the popup will not appear when clicking on the feature.
 
 Settings
 -----------

mapentity/models.py

@@ -282,6 +282,12 @@ def get_generic_detail_url(cls):
     def get_detail_url(self):
         return reverse(self._entity.url_name(ENTITY_DETAIL), args=[str(self.pk)])
 
+    def get_popup_url(self):
+        return reverse(
+            f"{self._meta.app_label.lower()}:{self._meta.model_name.lower()}-drf-popup-content",
+            kwargs={"pk": self.pk},
+        )
+
     @property
     def map_image_url(self):
         return self.get_map_image_url()

mapentity/serializers/__init__.py

@@ -5,12 +5,13 @@
     MapentityGeojsonModelSerializer,
 )
 from .gpx import GPXSerializer
-from .helpers import json_django_dumps, plain_text, smart_plain_text
+from .helpers import field_as_string, json_django_dumps, plain_text, smart_plain_text
 from .shapefile import ZipShapeSerializer
 
 __all__ = [
     "plain_text",
     "smart_plain_text",
+    "field_as_string",
     "CSVSerializer",
     "GPXSerializer",
     "MapentityDatatableSerializer",

mapentity/serializers/helpers.py

@@ -27,6 +27,9 @@ def field_as_string(obj, field, ascii=False):
             or isinstance(value, Decimal)
         ):
             value = number_format(value)
+        if hasattr(value, "all"):
+            # convert ManyRelatedManager to QuerySet
+            value = value.all()
         if isinstance(value, list) or isinstance(value, QuerySet):
             value = ", ".join([str(val) for val in value])
     return smart_plain_text(value, ascii)

mapentity/static/mapentity/js/MaplibreMapentity.js

@@ -119,6 +119,7 @@ document.addEventListener('DOMContentLoaded', function() {
         dataUrl: layerUrl,
         primaryKey: primaryKey,
         isLazy: false,
+        displayPopup: true,
     });
 
     const mapReadyEvent = new CustomEvent('entity:map:ready', {

mapentity/static/mapentity/js/MaplibreObjectsLayer.js

@@ -44,7 +44,7 @@ class MaplibreObjectsLayer {
      * @param e {Object} - Événement de clic
      * @private
      */
-    _onClick(e) {
+    async _onClick(e) {
         if (this.options.readonly) {
             return;
         }
@@ -54,8 +54,14 @@ class MaplibreObjectsLayer {
 
         if (features.length > 0 && features[0].source !== 'geojson') {
             const feature = features[0];
-            if (this.options.objectUrl) {
-                window.location = this.options.objectUrl(feature.properties, feature);
+            if(this.options.displayPopup){
+                var popup_content;
+                try{
+                    popup_content =  await this.getPopupContent(this.options.modelname, feature.id);
+                } catch (error) {
+                    popup_content = gettext('Data unreachable');
+                }
+                new maplibregl.Popup().setLngLat(e.lngLat).setHTML(popup_content).addTo(this._map);
             }
         }
     }
@@ -625,4 +631,27 @@ class MaplibreObjectsLayer {
     getBoundsLayer() {
         return this.boundsLayer;
     }
+
+    /**
+     * Fetch data to display in object popup
+     * @returns {Promise<String>}
+     */
+    async getPopupContent(modelname, id){
+        const popup_url = window.SETTINGS.urls.popup.replace(new RegExp('modelname', 'g'), modelname)
+                                          .replace('0', id);
+
+        // fetch data
+        var response = await window.fetch(popup_url);
+        if (!response.ok){
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        } else {
+            // parse data
+            try {
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                throw new Error('Cannot parse data');
+            }
+        }
+    }
 }

mapentity/static/mapentity/js/maplibreTest.js

@@ -23,7 +23,8 @@ window.addEventListener("entity:map", () => {
         category: category,
         primaryKey: primaryKey,
         dataUrl: layerUrl,
-        isLazy: true
+        isLazy: true,
+        displayPopup: false,
     });
 
     objectsLayer.initialize(map.getMap());

mapentity/templates/mapentity/mapentity_popup_content.html

@@ -0,0 +1,9 @@
+<div class="d-flex flex-column justify-content-center">
+    <p class="text-center m-0 p-1"><strong>{{ title }}</strong></p>
+    {% if attributes %}
+        <p class="m-0 p-1">
+            {% for field in attributes %}{{ field|truncatechars:100 }}<br>{% endfor %}
+        </p>
+    {% endif %}
+    <button id="detail-btn" class="btn btn-sm btn-info mt-2" onclick="window.location.href='{{ detail_url }}'">{{ button_label }}</button>
+</div>

mapentity/templates/mapentity/widget.html

@@ -58,12 +58,13 @@
                 const objectsLayer = new MaplibreObjectsLayer(null, {
                     style: typeof style === "function" ? {} : style,
                     modelname: modelname,
-                    readonly: true,
+                    readonly: false,
                     nameHTML: '<span style="color:' + style['color'] + ';">&#x25A3;</span>&nbsp;' + modelname,
                     category: tr("Objects"),
                     dataUrl: layerUrl,
                     primaryKey: generateUniqueId(),
                     isLazy: false,
+                    displayPopup: true,
                 });
                 objectsLayer.initialize(map.getMap());
 

mapentity/tests/__init__.py

@@ -57,6 +57,9 @@ def get_expected_geojson_attrs(self):
     def get_expected_datatables_attrs(self):
         return {}
 
+    def get_expected_popup_content(self):
+        return ""
+
     def setUp(self):
         if self.user:
             self.client.force_login(user=self.user)
@@ -444,6 +447,17 @@ def test_api_geojson_list_for_model(self):
             },
         )
 
+    def test_api_popup_content(self):
+        if self.model is None:
+            return  # Abstract test should not run
+
+        self.obj = self.modelfactory.create()
+        popup_url = self.obj.get_popup_url()
+        response = self.client.get(popup_url)
+        self.assertEqual(response.status_code, 200, f"{popup_url} not found")
+        content_json = response.json()
+        self.assertEqual(content_json, self.get_expected_popup_content())
+
 
 class MapEntityLiveTest(LiveServerTestCase):
     model = None