var map;
async function initMap(city='den') {
    let coords = {lat: 39.718166, lng: -104.9812634};
    if(city === 'mex'){
        coords = {lat: 19.0414, lng: -98.2063};
    }
    const response = await fetch('/loadMap');
    var locations = await response.json();
    console.log(locations);
    map = new google.maps.Map(document.getElementById('map'), {
        center: coords,
        zoom: 10
    });

    map.data.loadGeoJson(
        'denver_neighborhoods.geojson');

    map.data.setStyle(function(feature) {
        var reports = feature.getProperty('reports');
        var color = "gray";
        if (reports > 0 && reports < 2) {
            color = "yellow";
        } else if (reports >= 2 && reports < 4){
            color = "orange";
        } else if (reports > 4){
            color = "red";
        }
        return {
            fillColor: color,
            strokeWeight: 1
        }
    });
    // Create an array of alphabetical characters used to label the markers.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var markers = locations.map(function(location, i) {
        location.lat = parseInt(location.lat);
        location.lng = parseInt(location.lng);
        return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
        });
    });

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
