Allow displaying image in POIs (#389)

* Add image to POIs

* fix missing quote

* Swap <hr> position

mapobject/poi.go

@@ -18,6 +18,7 @@ func (this *PoiBlock) onMapObject(mbpos *types.MapBlockCoords, x, y, z int, bloc
 	o.Attributes["name"] = md["name"]
 	o.Attributes["category"] = md["category"]
 	o.Attributes["url"] = md["url"]
+	o.Attributes["image"] = md["image"]
 	o.Attributes["owner"] = md["owner"]
 	o.Attributes["icon"] = md["icon"]
 	o.Attributes["color"] = this.Color

public/css/custom.css

@@ -48,3 +48,8 @@ body {
 .player-popup div.info {
   grid-area: info;
 }
+
+.poi_image {
+  width: 100%;
+  height: auto;
+}

public/js/map/overlays/PoiOverlay.js

@@ -20,18 +20,23 @@ export default AbstractIconOverlay.extend({
   },
 
   createPopup: function(poi){
+    var innerHTML = "";
 
-    if (poi.attributes.url)
-    {
-      return "<a href=\"" + HtmlSanitizer.SanitizeHtml(poi.attributes.url) + "\">" +
-      "<h4>" + HtmlSanitizer.SanitizeHtml(poi.attributes.name) + "</h4></a><hr>" +
-      "<b>Owner: </b> " + HtmlSanitizer.SanitizeHtml(poi.attributes.owner) + "<br>";
+    if (poi.attributes.url) {
+      innerHTML += "<a href=\"" + HtmlSanitizer.SanitizeHtml(poi.attributes.url) + "\">" +
+        "<h4>" + HtmlSanitizer.SanitizeHtml(poi.attributes.name) + "</h4></a>";
+    } else {
+      innerHTML += "<h4>" + HtmlSanitizer.SanitizeHtml(poi.attributes.name) + "</h4>";
     }
-    else
-    {
-      return "<h4>" + HtmlSanitizer.SanitizeHtml(poi.attributes.name) + "</h4><hr>" +
-      "<b>Owner: </b> " + HtmlSanitizer.SanitizeHtml(poi.attributes.owner) + "<br>";
+
+    if (poi.attributes.image) {
+      innerHTML += "<img class=\"poi_image\" src=\"" + HtmlSanitizer.SanitizeHtml(poi.attributes.image) +
+        "\" crossorigin=\"anonymous\" referrerpolicy=\"origin-when-cross-origin\">";
     }
+
+    innerHTML += "<hr><b>Owner: </b> " + HtmlSanitizer.SanitizeHtml(poi.attributes.owner) + "<br>";
+
+    return innerHTML;
   }