Image: include image in popups

src/image.js

@@ -107,3 +107,30 @@ register_hook('hide-details', function () {
     window.clearInterval(showTimer)
   }
 })
+
+register_hook('show-popup', function (data, category, dom, callback) {
+  var div = document.createElement('div')
+  div.className = 'images loading'
+  var imageWrapper
+
+  dom.insertBefore(div, dom.firstChild)
+
+  var currentLoader = ImageLoader(data)
+
+  currentLoader.first({
+  },function (err, img) {
+    div.classList.remove('loading')
+
+    if (!img) {
+      return callback(err)
+    }
+
+    imageWrapper = document.createElement('div')
+    imageWrapper.className = 'imageWrapper'
+    div.appendChild(imageWrapper)
+
+    show(img, {}, imageWrapper)
+
+    callback(null)
+  })
+})

style.css

@@ -251,7 +251,7 @@ ul.overpass-layer-list > li:after {
   clear: both;
 }
 .leaflet-popup-content {
-  max-height: 250px;
+  max-height: 300px;
   overflow: auto;
 }
 .leaflet-popup-content pre {
@@ -425,7 +425,7 @@ a.showDetails {
 }
 
 .leaflet-popup-content {
-  min-width: 200px;
+  min-width: 300px;
 }
 #content {
   font-size: 12px;
@@ -520,6 +520,17 @@ a.showDetails {
 .wikipedia .reference {
   display: none;
 }
+.leaflet-popup-content .images {
+  float: right;
+  margin-left: 0.5em;
+  max-width: 150px;
+  max-height: 100px;
+}
+.leaflet-popup-content .images img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
 #contentDetails .images {
 }
 #contentDetails .images .imageWrapper {