added popup in item and items

CHANGES.md

@@ -12,6 +12,7 @@ Note: Minor version `0.X.0` update might break the API, It's recommended to pin
 
 - `type` query parameter to filter collections based on their type (`Function` or `Table`)
 - fixed a small bug in the `tipg_properties` SQL function where the bounds property was not properly transformed to 4326  (author @RemcoMeeuwissen, https://github.com/developmentseed/tipg/pull/87)
+- added popups to leaflet maps on `items` and `item` page. (author @krishnaglodha, https://github.com/developmentseed/tipg/pull/91)
 
 ## [0.2.0] - 2023-06-22
 

tipg/templates/item.html

@@ -39,7 +39,23 @@ <h2>Properties</h2>
       attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
     }
   ));
-  var features = L.geoJSON(geojson).addTo(map);
+  function addPopup(feature, layer) {
+    if (feature.properties) {
+          //popup HTML
+  var HTMLContent = '<div style="overflow-x:scroll">'
+  Object.keys(geojson.properties).map(prop => {
+    HTMLContent += `<b>${prop}</b> : ${geojson.properties[prop]} <br>`
+
+  })
+  HTMLContent += `</div>`
+
+        layer.bindPopup(HTMLContent);
+    }
+}
+  var features = L.geoJSON(geojson, {
+    onEachFeature: addPopup
+}).addTo(map);
+
   map.fitBounds(features.getBounds());
 </script>
 

tipg/templates/items.html

@@ -77,6 +77,7 @@ <h1>Collection Items: {{ response.title or response.id }}</h1>
 </div>
 
 <script>
+  var currentURL = "{{ template.api_root }}/collections/{{ response.id }}/items"
 function changePageSize() {
   var url = "{{ template.api_root }}/collections/{{ response.id }}/items?";
   url += "limit=" + $("#limit").val();
@@ -95,7 +96,13 @@ <h1>Collection Items: {{ response.title or response.id }}</h1>
       attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
     }
   ));
-  var features = L.geoJSON(geojson).addTo(map);
+  function addPopup(feature, layer) {
+   HTMLContent = `<a target="_blank" href="${currentURL}/${feature.id}">${feature.id}</a>`
+   layer.bindPopup(HTMLContent);
+}
+  var features = L.geoJSON(geojson, {
+    onEachFeature: addPopup
+}).addTo(map);
   map.fitBounds(features.getBounds());
 
   //