var map = new GLMap('map', {
  position: { latitude: 1.290270, longitude: 103.851959 },
  zoom: 16,
  minZoom: 12,
  maxZoom: 20,
  tilt: 50,
  state: false // stores map position/rotation in url
});

var osmb = new OSMBuildings({
  baseURL: './OSMBuildings',
  minZoom: 15,
  maxZoom: 22,
  attribution: '© 3D <a href="https://osmbuildings.org/copyright/">OSM Buildings</a>'
}).addTo(map);

osmb.addMapTiles(
  'https://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png',
  {
    attribution: '© Data <a href="https://openstreetmap.org/copyright/">OpenStreetMap</a> · © Map <a href="https://mapbox.com">MapBox</a>'
  }
);

osmb.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/uejws863/tile/{z}/{x}/{y}.json');

//***************************************************************************

map.on('pointermove', function (e) {
  var id = osmb.getTarget(e.x, e.y);
  if (id) {
    document.body.style.cursor = 'pointer';
    osmb.highlight(id, '#f08000');
  } else {
    document.body.style.cursor = 'default';
    osmb.highlight(null);
  }
});

var pointerDownOn = null;
map.on('pointerdown', function (e) {
  var id = osmb.getTarget(e.x, e.y);
  if (id) {
    pointerDownOn = id;
  }
});
map.on('pointerup', function (e) {
  var id = osmb.getTarget(e.x, e.y);
  if (id == pointerDownOn) {
    alert(id);
  }
  pointerDownOn = null;
});

var controlButtons = document.querySelectorAll('.control button');

for (var i = 0; i < controlButtons.length; i++) {
  controlButtons[i].addEventListener('click', function(e) {
    var button = this;
    var parentClassList = button.parentNode.classList;
    var direction = button.classList.contains('inc') ? 1 : -1;
    var increment;
    var property;

    if (parentClassList.contains('tilt')) {
      property = 'Tilt';
      increment = direction*10;
      map.setTilt(map.getTilt()+increment);
    }
    if (parentClassList.contains('rotation')) {
      property = 'Rotation';
      increment = direction*10;
      map.setRotation(map.getRotation()+increment);
    }
    if (parentClassList.contains('zoom')) {
      property = 'Zoom';
      increment = direction*1;
      map.setZoom(map.getZoom()+increment);
    }
  });
}