var vectorLayer = new ol.layer.Vector({
    title: "Románské kostely",
    projection: "EPSG:3857",
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON()
    }),
    // I am not sure about the meaning of icons. I think,
    // blue is rotunda and red other church
    style: function(feat, res) {
        var icon = feat.get('icon');
        var img_src = "img/Ol_icon_red.png";
        if (icon == 'rotunda') {
            img_src = "img/Ol_icon_blue.png";
        }
        else if (icon == 'question') {
            img_src = "img/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({
                font: 'bolder 10px serif',
                text: feat.get('title'),
                offsetY: 12,
                textBaseLine: "bottom"
            })
        })];
   }
});

var map = new ol.Map({
  target: "map",
  projection: "EPSG:3857",
  loadTilesWhileAnimating: true,
  loadTilesWhileInteracting: true,
  layers: [
    new ol.layer.Tile({
      title: "OSM Map",
      source: new ol.source.OSM()
    }),
    
    // to be filled in later
    vectorLayer 
  ],
  view: new ol.View({
    //Village Čihošť is the geographical center of Czechia
    center: ol.proj.fromLonLat([15.338611, 49.743889]),
    zoom: 8
  })
});

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function(data) {
  if (httpRequest.readyState != 4 || httpRequest.status != 200) {
      return;
  }
  else {
      csv2geojson.csv2geojson(httpRequest.responseText, {
              latfield: 'lat',
              lonfield: 'lon',
              delimiter: '\t'
          },
          function(err, data) {
              var geoJsonFormat = new ol.format.GeoJSON();
              var features = geoJsonFormat.readFeatures(
                  data, {
                      featureProjection: 'EPSG:3857'
                  }
              );
              var layerSource = vectorLayer.getSource();
              layerSource.addFeatures(features);
          });
}};
httpRequest.open('GET', 'kostely.tsv');
httpRequest.send();

map.controls =  ol.control.defaults({ attribution: false });
map.controls.extend([
  new ol.control.Attribution({
    collapsible: true
  })
]);
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');
}
});