let map = new mapboxgl.Map({
  container: 'map',
  style: 'https://vectortiles1.ams3.digitaloceanspaces.com/utrechtoverdetong/style.json',
  zoom: 15,
  pitch: 0,
  bearing: 0,
  center: [5.11863, 52.0935],
  attributionControl: false
});

let myrests = [
  {
    name: 'Gys',
    reviewed: true
  },{
    name: 'Tiger mama',
    reviewed: false
  }, {
    name: 'Gauchos',
    reviewed: false
  }, {
    name: 'Los Argentinos',
    reviewed: true
  },{
    name: 'De Werfkring',
    reviewed: true
  }
]

map.on('load', function() {

  map.addSource('rests', {
    type: 'vector',
    url: 'https://ta.webmapper.nl/stb/achtergrond/style/tilejson.json'
  })


  expression = ["match", ["get", "name"]];
  
  myrests.forEach(function(row) {
    expression.push(row['name'], row['reviewed'] === true ? 'reviewed' : 'not-reviewed')
  })
  expression.push('not-reviewed');


  let mylayer = map.addLayer({
    "id": 'rests-join',
    'type': 'symbol',
    'source': 'rests',
    'source-layer': 'poi',
    'filter': ['==', 'subclass', 'restaurant'],
    'layout': {
      'icon-image': expression,
      'icon-allow-overlap': true
    }
  });

  function isReviewed(props) {
    for (var i=0; i<myrests.length; i++) {
      if (props.name === myrests[i].name) {
        return true;
      }
    }
    return false;
  }

  map.on('click', 'rests-join', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var name = e.features[0].properties.name;
    var reviewed = isReviewed(e.features[0].properties);


    new mapboxgl.Popup()
      .setLngLat(coordinates)
      .setHTML(`<h2>${name}</h2><p>Bezocht: ${reviewed? 'ja' : 'nee'}`)
      .addTo(map);
  });
  map.on('mouseenter', 'rests-join', function () {
    map.getCanvas().style.cursor = 'pointer';
  });

  map.on('mouseleave', 'rests-join', function () {
    map.getCanvas().style.cursor = '';
  });

})