function prepNavPanel() {
  var boroIDs = ['mh', 'bk', 'qs', 'xb', 'si', 'all']

  boroIDs.forEach(function (boroID) {
    let buttonEl = document.getElementById(boroID)
    let id = buttonEl.id

    buttonEl.onclick = id !== 'all' ? function (e) {
      e.preventDefault();
      filterLocationList(id);
      clearPopup();
      getBoroView(id);
      map.flyTo({
        center: boroView.coordinates,
        zoom: boroView.zoom,
        speed: 1.3,
        curve: 1.1
      });
      map.setFilter('nycparks-ad16j1', ['==', 'boro', boroView.boro])
    } :
      function (e) {
        e.preventDefault();
        resetLocationList();
        getBoroView('all');
        map.flyTo({
          center: boroView.coordinates,
          zoom: boroView.zoom,
          speed: 1.3,
          curve: 1.1
        });
        map.setFilter('nycparks-ad16j1', ['has', 'boro'])
        clearPopup();
      }
  });
};