1 files changed, 38 insertions, 2 deletions
diff --git a/kostely.js b/kostely.js
index 89a2a10..d5e6397 100644
--- a/kostely.js
+++ b/kostely.js
@@ -12,13 +12,19 @@ var vectorLayer = new ol.layer.Vector({
         if (icon == 'rotunda') {
             img_src = "Ol_icon_blue.png";
         }
+        else if (icon == 'question') {
+            img_src = "Ol_question_green.png";
+        }
         var offset = feat.get('iconOffset');
         return [new ol.style.Style({
             image: new ol.style.Icon({
                 src: img_src
                 }),
             text: new ol.style.Text({
-                text: feat.get('title')
+                font: 'bolder 10px serif',
+                text: feat.get('title'),
+                offsetY: 12,
+                textBaseLine: "bottom"
             })
         })];
    }
@@ -51,7 +57,6 @@ httpRequest.onreadystatechange = function(data) {
       return;
   }
   else {
-      console.log('Got httpRequest response!');
       csv2geojson.csv2geojson(httpRequest.responseText, {
               latfield: 'lat',
               lonfield: 'lon',
@@ -80,3 +85,34 @@ map.controls.extend([
 map.controls.extend([
   new ol.control.MousePosition()
 ]);
+
+var element = document.getElementById('popup');
+ 
+var popup = new ol.Overlay({
+    element: element,
+    positioning: 'bottom-center',
+    stopEvent: false,
+    offset: [0, -10]
+});
+map.addOverlay(popup);
+
+// display popup on click
+map.on('click', function(evt) {
+var feature = map.forEachFeatureAtPixel(evt.pixel,
+    function(feature) {
+      return feature;
+    });
+
+if (feature) {
+  var coordinates = feature.getGeometry().getCoordinates();
+  popup.setPosition(coordinates);
+  $(element).popover({
+    'placement': 'top',
+    'html': true,
+    'content': feature.get('description')
+  });
+  $(element).popover('show');
+} else {
+  $(element).popover('destroy');
+}
+});