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 = "Ol_icon_red.png";
        if (icon == 'rotunda') {
            img_src = "Ol_icon_blue.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')
            })
        })];
   }
});

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 {
      console.log('Got httpRequest response!');
      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()
]);