mapboxgl.accessToken =
  "pk.eyJ1IjoiZGFuZGVubmV5IiwiYSI6Indwc05iZW8ifQ.X8KMtaHslofn7K0TY8A8Ug";
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v10",
  center: [-73.9920797, 40.718394],
  zoom: 13.5
});

map.on("load", function() {
  map.addSource("localBeerBars", {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [-73.9880465, 40.7179191]
          },
          properties: {
            description:
              "<strong>The Grand Delancey</strong><p>115 Delancey St.</p>"
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [-73.9948929, 40.7195736]
          },
          properties: {
            description: "<strong>Randolph Beer</strong><p>343 Broome St.</p>"
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [-73.9846137, 40.7271707]
          },
          properties: {
            description:
              "<strong>Proletariat</strong><p>102 St. Marks Place</p>"
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [-73.9788879, 40.7236828]
          },
          properties: {
            description:
              "<strong>Alphabet City Beer Co.</strong><p>96 Loisaida Ave</p>"
          }
        }
      ]
    }
  });

  map.addSource("visitedBeerBars", {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [-73.9898388, 40.7183774] // Top Hops
          }
        }
      ]
    }
  });

  map.addLayer({
    id: "localBeerBars",
    type: "circle",
    source: "localBeerBars",
    paint: {
      "circle-radius": 8,
      "circle-color": "#e8bf61",
      "circle-stroke-color": "#d68507",
      "circle-stroke-width": 2
    }
  });

  map.addLayer({
    id: "visitedBeerBars",
    type: "circle",
    source: "visitedBeerBars",
    paint: {
      "circle-radius": 8,
      "circle-color": "#79bc61",
      "circle-stroke-color": "#5d765f",
      "circle-stroke-width": 2
    }
  });

  // Create a popup, but don't add it to the map yet.
  const popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  });

  map.on("mouseenter", "localBeerBars", function(e) {
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = "pointer";

    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.description;

    // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup
      .setLngLat(coordinates)
      .setHTML(description)
      .addTo(map);
  });

  map.on("mouseleave", "localBeerBars", function() {
    map.getCanvas().style.cursor = "";
    popup.remove();
  });
});