Allow popup on overlay (#5076)

* add popup on overlay

* add default behaviour of popups

* correct LABEL_PER_MODEL

* correct LAYER_PER_MODEL default values

* add documentation

* make quality

* fix paths' popup in forms

* add entry in changelog

* change LABEL_PER_MODEL setting name

* fix ignored custom settings

* modify mapentity dependance

* Use 8.15.0 version of mapentity

* Add get_expected_popup_content method in test to fix test_api_popup_content failure

Author: PartyNell

docs/advanced-configuration/interface.rst

@@ -98,6 +98,8 @@ By default, job cost details are not included in intervention exports. You can e
 
 When enabled, a new column will be added to intervention exports, displaying the total cost for each job.
 
+.. _custom-columns-available:
+
 Custom columns available
 ~~~~~~~~~~~~~~~~~~~~~~~~~
 

docs/advanced-configuration/map-settings.rst

@@ -326,6 +326,26 @@ Since IGN map backgrounds are very dense and colourful, a dark opacity is applie
 
           MAPENTITY_CONFIG['MAP_BACKGROUND_FOGGED'] = False
 
+Popup configuration
+-------------------
+
+Geotrek displays a popup when clicking on an object on the map.
+By default, this popup shows the object's name, its type, and a button linking to its detail page.
+
+You can customize the fields displayed in the popup for each model by defining the ``POPUP_CONTENT`` setting in ``/var/conf/custom.py``:
+
+.. code-block:: python
+
+    POPUP_CONTENT = {
+        "signage": ["code", "type", "conditions"],
+    }
+
+Each key corresponds to a model name written in lowercase (for example, ``"signage"``),
+and each value is a list of field names to display in the popup.
+
+The available fields are the same as those that can be configured for column display and exports.
+For more information, see :ref:`Custom columns available <custom-columns-available>`.
+
 Map screenshots
 ----------------
 

docs/changelog.rst

@@ -14,6 +14,10 @@ CHANGELOG
 
 - Reorganize the "Import data" chapter
 
+**Improvements**
+
+* Add configurable popups on map overlay (refs #4626).
+
 
 2.120.2         (2025-10-28)
 ----------------------------

geotrek/core/static/core/geotrek.forms.snap.js

@@ -41,7 +41,7 @@ MapEntity.GeometryField.GeometryFieldPathMixin = {
      */
     buildPathsLayer: function (objectsLayer) {
         var url_path = window.SETTINGS.urls.path_layer
-        var pathsLayer = MapEntity.pathsLayer({style: {clickable: true}, no_draft: objectsLayer.modelname != 'path'});
+        var pathsLayer = MapEntity.pathsLayer({style: {clickable: true}, no_draft: objectsLayer.modelname != 'path', displayPopup: false});
         if (objectsLayer.modelname != 'path')
             url_path += '?_no_draft=true';
         pathsLayer.load(url_path, true);

geotrek/core/static/core/main.js

@@ -24,7 +24,7 @@ $(window).on('entity:map', function (e, data) {
 
         var pathsLayer = MapEntity.pathsLayer({
             indexing: false,
-            style: { clickable: false },
+            style: { clickable: true },
             modelname: 'path',
             no_draft: data.modelname != 'path',
         });

geotrek/core/static/core/trail.js

@@ -4,7 +4,7 @@ $(window).on('entity:map', function (e, data) {
 	var url = window.SETTINGS.urls[layername];
     var loaded_trail = false;
     var map = data.map;
-    var style = L.Util.extend({ clickable: false },
+    var style = L.Util.extend({ clickable: true },
         window.SETTINGS.map.styles[modelname] || {});
     // Show trail layer in application maps
 	var layer = new L.ObjectsLayer(null, {

geotrek/core/tests/test_views.py

@@ -174,6 +174,14 @@ def get_good_data(self):
             "geom": '{"geom": "LINESTRING (99.0 89.0, 100.0 88.0)", "snap": [null, null]}',
         }
 
+    def get_expected_popup_content(self):
+        return (
+            f'<div class="d-flex flex-column justify-content-center">\n'
+            f'    <p class="text-center m-0 p-1"><strong>{str(self.obj)}</strong></p>\n    \n'
+            f'    <button id="detail-btn" class="btn btn-sm btn-info mt-2" onclick="window.location.href=\'/path/{self.obj.pk}/\'">Detail sheet</button>\n'
+            f"</div>"
+        )
+
     def _post_add_form(self):
         # Avoid overlap, delete all !
         for p in Path.objects.all():
@@ -2287,6 +2295,14 @@ def get_bad_data(self):
             "certifications-MAX_NUM_FORMS": "0",
         }, _("This field is required.")
 
+    def get_expected_popup_content(self):
+        return (
+            f'<div class="d-flex flex-column justify-content-center">\n'
+            f'    <p class="text-center m-0 p-1"><strong>{str(self.obj)}</strong></p>\n    \n'
+            f'    <button id="detail-btn" class="btn btn-sm btn-info mt-2" onclick="window.location.href=\'/trail/{self.obj.pk}/\'">Detail sheet</button>\n'
+            f"</div>"
+        )
+
     def test_detail_page(self):
         trail = TrailFactory()
         response = self.client.get(trail.get_detail_url())

geotrek/diving/static/diving/main.js

@@ -4,7 +4,7 @@ $(window).on('entity:map', function (e, data) {
 	var url = window.SETTINGS.urls[layername];
     var loaded_dive = false;
     var map = data.map;
-    var style = L.Util.extend({ clickable: false },
+    var style = L.Util.extend({ clickable: true },
         window.SETTINGS.map.styles[modelname] || {});
     // Show dive layer in application maps
 	var layer = new L.ObjectsLayer(null, {

geotrek/diving/tests/test_views.py

@@ -54,6 +54,17 @@ def get_good_data(self):
             "geom": '{"type": "Point", "coordinates":[0, 0]}',
         }
 
+    def get_expected_popup_content(self):
+        return (
+            f'<div class="d-flex flex-column justify-content-center">\n'
+            f'    <p class="text-center m-0 p-1"><strong>{str(self.obj)}</strong></p>\n    \n'
+            f'        <p class="m-0 p-1">\n'
+            f"            {str(self.obj.practice)}<br>\n"
+            f"        </p>\n    \n"
+            f'    <button id="detail-btn" class="btn btn-sm btn-info mt-2" onclick="window.location.href=\'/dive/{self.obj.pk}/\'">Detail sheet</button>\n'
+            f"</div>"
+        )
+
 
 class DiveViewsLiveTests(CommonLiveTest):
     model = Dive

geotrek/feedback/static/feedback/main.js

@@ -6,11 +6,11 @@ $(window).on('entity:map', function (e, data) {
     var modelname = 'report';
     var layername = `${modelname}_layer`;
     var url = window.SETTINGS.urls[layername];
-    var loaded_infrastructure = false;
+    var loaded_report = false;
     var map = data.map;
 
     // Show report layer in application maps
-    var style = L.Util.extend({ clickable: false },
+    var style = L.Util.extend({ clickable: true },
         window.SETTINGS.map.styles[modelname] || {});
     var layer = new L.ObjectsLayer(null, {
         modelname: modelname,
@@ -23,10 +23,10 @@ $(window).on('entity:map', function (e, data) {
 
     map.on('layeradd', function (e) {
         var options = e.layer.options || { 'modelname': 'None' };
-        if (!loaded_infrastructure) {
+        if (!loaded_report) {
             if (options.modelname == modelname && options.modelname != data.modelname) {
                 e.layer.load(url);
-                loaded_infrastructure = true;
+                loaded_report = true;
             }
         }
     });