Yelp api bug – Building a website with flask, js, and html – CS50x project

first post here.
I’m existed to join and be a part of this community.
I’m finishing now the final project of Harvard CS50x project.

I’ve created a website which uses Yelp Fusion API for getting a Itineraries in Colorado.
In Itineraries info page, when I pick CO city and itinerary category. Only food results displayed in the map. Even though I pick something else.

I’ll attach here the git repo, app.py and related html pages.

Related part of app.py:

# Web page that ask from user to pick a Colorado city and type of itinerary that he looking for
@app.route('/itinerary', methods=["GET", "POST"])
def itinerary():
    # Get a list of all zip codes in Colorado
    co_zipcodes = zipcodes.filter_by(state='CO')

    # Extract the list of city names from the zip codes
    cities = [zipcode['city'] for zipcode in co_zipcodes]

    # Remove duplicates and sort the list
    cities = sorted(set(cities))

    # Creating a list of all itinerary types
    itinerary_aliases = {
        "Accommodations": "hotels",
        "Adult": "adult",
        "Amusements": "amusementparks, aquariums, arcades",
        "Architecture": "landmarks, monuments",
        "Cultural": "culturalcenter",
        "Historic": "museums",
        "Industrial facilities": "factories",
        "Natural": "parks",
        "Religion": "religiousorgs",
        "Sport": "active",
        "Banks": "banks",
        "Food": "food",
        "Shops": "shopping",
        "Transport": "transport"
    }
    
    if request.method == 'POST':
        # Get the name of the city from the user input
        city = request.form.get('city')
        city = city + " Colorado"

        # Get the type of itinerary
        category_alias = request.form.get('itinerary_type')


        url = f"https://api.yelp.com/v3/businesses/search?location={city}&radius=30000&categories={category_alias}&sort_by=best_match&limit=20"

        headers = {
            "accept": "application/json",
            "Authorization": "Bearer pUf2JzXR1iDFAvIGBsmPvQAyVdXBQCodSnID9Z5sT59BcRYkkWvg_VoXZsfeo0Nj8odHJ1lJYcr6h0AwURBOVqRI-SDMTY5iks0_CRpHznpFz-MXz_Xg3PmHpOQ2ZHYx"
        }

        response = requests.get(url, headers=headers)
        data = response.json()

        return render_template('itinerary_r.html', data=data, city=city)


    else:
        return render_template('itinerary.html', cities=cities, itinerary_aliases=itinerary_aliases)

itinerary.html:

{% extends "layout.html" %}

{% block title %}
    Search for city itineraries
{% endblock %}

{% block main %}
<div class="instructions">
    <h3><p>Please select one of the Colorado's cities and then select a type of itinerary that you are looking for.</p></h3>
</div>
<form action="/itinerary" method="post">
    <div class="mb-3">
        <select name="city" id="city">
            <option value="" disabled selected>Select a city</option>
            {% for city in cities %}
            <option value="{{ city }}">{{ city }}</option>
            {% endfor %}
        </select>
    </div>

    <div class="mb-3">
        <select name="itinerary_type" id="itinerary_type">
            <option value="" disabled selected>Select an itinerary</option>
            {% for itinerary_aliases in itinerary_aliases %}
            <option value="{{ itinerary_aliases }}">{{ itinerary_aliases }}</option>
            {% endfor %}
        </select>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

{% endblock %}

itinerary_r.html

{% extends "layout.html" %}

{% block title %}
    Itineraries search result
{% endblock %}

{% block head %}
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
{% endblock %}

{% block main %}

<div id="map" style="height: 500px; width: 800px; margin: auto;"></div>
<script>
    var data = {{ data|tojson|safe }};
    var city = "{{ city }}";

    // Create the map and set the view to the center of the city
    var map = L.map('map').setView([data.region.center.latitude, data.region.center.longitude], 11);

    // Add the base map layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
        maxZoom: 18
    }).addTo(map);

    // Loop through the search results and add a marker for each business
    for (var i = 0; i < data.businesses.length; i++) {
        var business = data.businesses[i];
        var marker = L.marker([business.coordinates.latitude, business.coordinates.longitude]).addTo(map);
        var popup = "<b>" + business.name + "</b><br>" + business.location.address1 + "<br>" + business.location.city + ", " + business.location.state + " " + business.location.zip_code;
        marker.bindPopup(popup);
    }

    // Add a marker for the center of the city
    var cityMarker = L.marker([data.region.center.latitude, data.region.center.longitude]).addTo(map);
    cityMarker.bindPopup("<b>" + city + "</b>");
</script>

{% endblock %}

Any help would be greatly appreciated.
Boris.

Did the testing through Yelp fusion API website

Everything works fine, probably there is something wrong in app.py function.