var Feature = ol.Feature;
var Map = ol.Map;
var Overlay = ol.Overlay;
var Point = ol.geom.Point;
var TileJSON = ol.source.TileJSON;
var VectorSource = ol.source.Vector;
var View = ol.View;
var Icon = ol.style.Icon;
var Style = ol.style.Style;
var TileLayer = ol.layer.Tile;
var VectorLayer = ol.layer.Vector;
var OSM = ol.source.OSM;
var fromLonLat =  ol.proj.fromLonLat;

var defaultLonLat = [ -76.5019, 42.4440];
var defaultWebMerc = fromLonLat(defaultLonLat);


function _rnd(a,b) {
  a = ((typeof a == "undefined") ? 1.0 : a);
  if (typeof b === "undefined") {
    return Math.random()*a;
  }
  return Math.random()*(b-a) + a;
}

//var vectorSource = new VectorSource({ features: [iconFeature], });
var vectorSource = new VectorSource();

var _icon = [];


function example_change_pos() {

  var w = 1/16.0;

  let lonlat = [
    defaultLonLat[0] + _rnd(-w,w),
    defaultLonLat[1] + _rnd(-w,w)];
  let merc = fromLonLat(lonlat);


  _icon[0].feature.getGeometry().setCoordinates(merc);
  vectorLayer.getSource().changed();
}

function example_change_opacity(p) {
  p = ((typeof p === "undefined") ? 0.0 : p);
  _icon[0].style.getImage().setOpacity(p);
  vectorLayer.getSource().changed();
}

// icon can't change image src dynamically,
// so have to replace.
// See https://stackoverflow.com/questions/57341190/how-can-i-change-icon-source-dynamically
//
function example_change_image() {
  var _nuimg = new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'data/bus_gw_90.png',
    });
  _icon[0].style.setImage(_nuimg);
  vectorLayer.getSource().changed();
}

for (var ii=0; ii<10; ii++) {

  var w = 1/32.0;
  let lonlat = [
    defaultLonLat[0] + _rnd(-w,w),
    defaultLonLat[1] + _rnd(-w,w)];
  let merc = fromLonLat(lonlat);

  var iconFeature = new Feature({
    //geometry: new Point([10, 20]),
    geometry: new Point([merc[0], merc[1]]),
    name: 'Null Island',
    population: 4000,
    rainfall: 500,
  });

  var iconStyle = new Style({
    image: new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'data/icon.png',
    }),
  });

  _icon.push({ "style": iconStyle, "feature": iconFeature });
  iconFeature.setStyle(iconStyle);
  vectorSource.addFeature(iconFeature);

}

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

const rasterLayer = new TileLayer({
  //source: ol.source.OSM()
  source: new ol.source.OSM(),
});

const map = new Map({
  layers: [rasterLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: defaultWebMerc,
    zoom: 13,
  }),
});

const element = document.getElementById('popup');

const popup = new Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false,
});
map.addOverlay(popup);

// display popup on click
map.on('click', function (evt) {
  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
    return feature;
  });
});

// change mouse cursor when over marker
map.on('pointermove', function (e) {
  const pixel = map.getEventPixel(e.originalEvent);
  const hit = map.hasFeatureAtPixel(pixel);
  map.getTarget().style.cursor = hit ? 'pointer' : '';
});
// Close the popup when the map is moved
map.on('movestart', function () {
  //$(element).popover('dispose');
});

map.on("postrender", function(event) {
  //console.log("bang...");
});


//----
//

setInterval( function() {
  //console.log("bang");
  //map.render();
}, 1000);