Leaflet: display details on popup click

1 files changed, 34 insertions, 1 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere-leaflet.js b/chimere/static/chimere/js/jquery.chimere-leaflet.js
index 73b86a2..c75a3b7 100644
--- a/chimere/static/chimere/js/jquery.chimere-leaflet.js
+++ b/chimere/static/chimere/js/jquery.chimere-leaflet.js
@@ -254,10 +254,15 @@ See the file COPYING for details.
                             settings.layerClusters.addLayer(marker);
                             return settings.layerClusters;
                         } else {*/
+                            marker.properties = feature.properties;
                             return marker;
                         //}
                     }
                 }).addTo(map);
+                map.on('popupopen', function(e) {
+                    var marker = e.popup._source;
+                    methods.display_feature_detail(marker.properties.pk);
+                });
             }
             settings.layerMarkers.addTo(map);
             settings.layerVectors = L.geoJson().addTo(map);
@@ -553,7 +558,35 @@ See the file COPYING for details.
             } else if ($.hasattr("area", options)) {
                 helpers.zoom_to_area(options["area"]);
             }
-        } // end of init
+        },
+        display_feature_detail: function (pk) {
+            /*
+            * update current detail panel with an AJAX request
+            */
+            var uri = extra_url
+            if (settings.map_id) uri += settings.map_id + "/"
+            uri += "getDetail/" + pk;
+            var params = {}
+            if (settings.simple) { params["simple"] = 1; }
+            $.ajax({url: uri,
+                    data: params,
+                    dataType: "html",
+                    success: function (data) {
+                        if ( settings.display_feature_detail_fx ) {
+                            // Custom function ?
+                            settings.display_feature_detail_fx(data, settings);
+                        }
+                        else {
+                            if (!settings.popupContentFull) {
+                                $('#detail').html(data).show();
+                            }
+                            else {
+                                settings.current_popup.setContentHTML("<div class='cloud'>" + data + "</div>");
+                            }
+                        }
+                    }
+                   });
+        },
     }; // End of public methods
     var helpers = {
         getSubcategories: function (category_id) {