From 092e355ffbdfa86bdf6ffa3d85c7a78861f97e85 Mon Sep 17 00:00:00 2001
From: Dominik Moritz <domoritz@gmail.com>
Date: Thu, 13 Jun 2013 23:24:01 +0200
Subject: [PATCH] [#21] Add properties information to popup, lighter style

---
 .../spatial/public/css/geojson_preview.css    | 14 ++++++++++++++
 ckanext/spatial/public/js/geojson_preview.js  | 19 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/ckanext/spatial/public/css/geojson_preview.css b/ckanext/spatial/public/css/geojson_preview.css
index 29d3e64..aeeab75 100644
--- a/ckanext/spatial/public/css/geojson_preview.css
+++ b/ckanext/spatial/public/css/geojson_preview.css
@@ -9,3 +9,17 @@ html, body {
   width: 100%;
   height: 100%;
 }
+
+.popup-table {
+	border-collapse: collapse;
+	border: 1px solid #bbb;
+}
+
+.popup-table td, .popup-table th {
+	border: 1px solid #bbb;
+	padding: 4px;
+}
+
+.popup-table tr:nth-child(even) {
+	background-color: #eee;
+}
\ No newline at end of file
diff --git a/ckanext/spatial/public/js/geojson_preview.js b/ckanext/spatial/public/js/geojson_preview.js
index 46d6c9d..a5435a1 100644
--- a/ckanext/spatial/public/js/geojson_preview.js
+++ b/ckanext/spatial/public/js/geojson_preview.js
@@ -2,6 +2,13 @@
 ckan.module('geojsonpreview', function (jQuery, _) {
   return {
     options: {
+      table: '<table class="popup-table"><tbody>{body}</tbody><table>',
+      row:'<tr><th>{key}</th><td>{value}</td></tr>',
+      style: {
+        opacity: 0.7,
+        fillOpacity: 0.1,
+        weight: 2
+      }
     },
     initialize: function () {
       var self = this;
@@ -59,7 +66,17 @@ ckan.module('geojsonpreview', function (jQuery, _) {
 
     showPreview: function (geojsonFeature) {
       var self = this;
-      var gjLayer = L.geoJson().addTo(self.map);
+      var gjLayer = L.geoJson(undefined, {
+        style: self.options.style,
+        onEachFeature: function(feature, layer) {
+          var body = '';
+          jQuery.each(feature.properties, function(key, value){
+            body += L.Util.template(self.options.row, {key: key, value: value});
+          });
+          var popupContent = L.Util.template(self.options.table, {body: body});
+          layer.bindPopup(popupContent);
+        }
+      }).addTo(self.map);
       gjLayer.addData(geojsonFeature);
       self.map.fitBounds(gjLayer.getBounds());
     }