<div class="mapContainer">
        <button class="map-button">Zoom Out</button>
        <div class="sidebarMap">
          <div class="headingMap">
            <h1>Our locations</h1>
          </div>
        <div id="listings" class="listings"></div>
        </div>
      <div id="map" class="map"> </div>
      <div style="clear:both;"></div>
</div>

<script>
  // This will let you use the .remove() function later on
  if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
      if (this.parentNode) {
          this.parentNode.removeChild(this);
      }
    };
  }

  mapboxgl.accessToken = 'pk.eyJ1Ijoib25pcmFjb20iLCJhIjoiY2oyeHk0ODk4MDAwMTJxbzJyMW5nZTlmaSJ9.amZiihhUvpe0LlmvFh7-1Q';

  // This adds the map
  var map = new mapboxgl.Map({
    // container id specified in the HTML
    container: 'map',
    // style URL
    style: 'mapbox://styles/oniracom/cjqic0c9v10uw2stc2roghhbt',
    // initial position in [long, lat] format
    center: [-119.417931, 36.778259],
    // initial zoom
    zoom: 5,
    scrollZoom: false
  });

  var stores = {"features": [{"geometry": {"coordinates": [-122.7161506, 38.3323071], "type": "Point"}, "properties": {"address": "7950 Redwood Dr #8", "city": "Cotati", "country": "United States", "name": "Mercy Wellness Of Cotati", "phone": "(707) 795-1600", "phoneFormatted": "7077951600", "postalCode": "94931", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-122.1089492, 37.6876948], "type": "Point"}, "properties": {"address": "913 E Lewelling Blvd", "city": "Hayward", "country": "United States", "name": "We Are Hemp", "phone": "(510) 276-2628", "phoneFormatted": "5102762628", "postalCode": "94541", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-119.24012, 34.4430724], "type": "Point"}, "properties": {"address": "408 Bryant Cir Unit C", "city": "Ojai", "country": "United States", "name": "Sespe Creek Collective", "phone": "(855) 722-9333", "phoneFormatted": "8557229333", "postalCode": "93023", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-121.487968, 38.5670283], "type": "Point"}, "properties": {"address": "1900 19th St", "city": "Sacramento", "country": "United States", "name": "All About Wellness", "phone": "(916) 454-4327", "phoneFormatted": "9164544327", "postalCode": "95811", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-118.2975643, 33.8585869], "type": "Point"}, "properties": {"address": "1115 W 190th St", "city": "Gardena", "country": "United States", "name": "Beach Medical Marijuana Dispensary Gardena", "phone": "(310) 821-4420", "phoneFormatted": "3108214420", "postalCode": "90248", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-121.4256342, 38.6114915], "type": "Point"}, "properties": {"address": "1841 W El Camino Ave", "city": "Sacramento", "country": "United States", "name": "841 El Camino", "phone": "", "phoneFormatted": "", "postalCode": "95815", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-121.4736268, 38.5692243], "type": "Point"}, "properties": {"address": "1404 28th St", "city": "Sacramento", "country": "United States", "name": "Green Solutions", "phone": "916-706-0489", "phoneFormatted": "9167060489", "postalCode": "95816", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-121.508749, 38.565628], "type": "Point"}, "properties": {"address": "515 Broadway", "city": "Sacramento", "country": "United States", "name": "515 Broadway", "phone": "844-722-9333", "phoneFormatted": "8447229333", "postalCode": "95818", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-122.4187464, 37.7718655], "type": "Point"}, "properties": {"address": "211 12th St", "city": "San Francisco", "country": "United States", "name": "SFFOGG", "phone": "(415) 896-4271", "phoneFormatted": "4158964271", "postalCode": "94103", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-122.2556629, 38.1096562], "type": "Point"}, "properties": {"address": "539 Tennessee St. Vallejo", "city": "CA 94590", "country": "United States", "name": "VHHC LLC", "phone": "(707) 652-5018", "phoneFormatted": "7076525018", "postalCode": "", "state": ""}, "type": "Feature"}, {"geometry": {"coordinates": [-122.3340161, 37.978159], "type": "Point"}, "properties": {"address": "2928 Hilltop Mall Rd", "city": "Richmond", "country": "United States", "name": "Green Remedy", "phone": "(510) 758-7898", "phoneFormatted": "5107587898", "postalCode": "94806", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-122.3377896, 37.9900445], "type": "Point"}, "properties": {"address": "15501 San Pablo Ave. Richmond", "city": "CA 94806", "country": "United States", "name": "Holistic Healing Cooperative", "phone": "510-275-3365", "phoneFormatted": "5102753365", "postalCode": "", "state": ""}, "type": "Feature"}, {"geometry": {"coordinates": [-117.1349655, 32.7696406], "type": "Point"}, "properties": {"address": "2835 Camino del Rio S #100", "city": "San Diego", "country": "United States", "name": "March and Ash", "phone": "(619) 314-7336", "phoneFormatted": "6193147336", "postalCode": "92108", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-118.3901899, 34.1418329], "type": "Point"}, "properties": {"address": "11705 Ventura Blvd", "city": "Studio City", "country": "United States", "name": "Perennial Holistic Wellness Center Inc.", "phone": "(818) 505-3631", "phoneFormatted": "8185053631", "postalCode": "91604", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-118.4480549, 33.9908527], "type": "Point"}, "properties": {"address": "13453 Beach Ave", "city": "Marina Del Rey", "country": "United States", "name": "Marina Caregivers", "phone": "(310) 574-4000", "phoneFormatted": "3105744000", "postalCode": "90292", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-118.3722122, 34.1638419], "type": "Point"}, "properties": {"address": "5142 Vineland Ave", "city": "North Hollywood", "country": "United States", "name": "Zen NoHo", "phone": "(818) 487-3737", "phoneFormatted": "8184873737", "postalCode": "91601", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-122.2605126, 38.1353759], "type": "Point"}, "properties": {"address": "1419 Enterprise St", "city": "Vallejo", "country": "United States", "name": "HTP Group", "phone": "(707) 260-2626", "phoneFormatted": "7072602626", "postalCode": "94589", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-118.4336, 34.2738], "type": "Point"}, "properties": {"address": "13720 Desmond St", "city": "Pacoima", "country": "United States", "name": "California's Choice Collective Distribution", "phone": "", "phoneFormatted": "", "postalCode": "91331", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-118.3326591, 34.1065741], "type": "Point"}, "properties": {"address": "1944 N Cahuenga Blvd", "city": "Los Angeles", "country": "United States", "name": "The Kind Center", "phone": "(323) 318-9053", "phoneFormatted": "3233189053", "postalCode": "90068", "state": "CA"}, "type": "Feature"}, {"geometry": {"coordinates": [-122.4732875, 37.7803486], "type": "Point"}, "properties": {"address": "4811 Geary Blvd", "city": "San Francisco", "country": "United States", "name": "Harvest on Geary Inc", "phone": "(415) 702-6767", "phoneFormatted": "4157026767", "postalCode": "94118", "state": "CA"}, "type": "Feature"}], "type": "FeatureCollection"};

  // This adds the data to the map
  map.on('load', function (e) {
    // This is where your '.addLayer()' used to be, instead add only the source without styling a layer
    map.addSource("places", {
      "type": "geojson",
      "data": stores
    });
    // Initialize the list
    buildLocationList(stores);

  });

  var activeItem = document.getElementsByClassName('active');
     var popUps = document.getElementsByClassName('mapboxgl-popup');
     
 var mapButton = document.querySelector(".map-button");
 mapButton.addEventListener('click', function () {
   map.flyTo({
       center: [-119.417931, 36.778259],
       zoom: 5
     });

   if (activeItem[0]) {
      activeItem[0].classList.remove('active');
   }
   if (popUps[0]) popUps[0].remove();
 });
 
 
  // This is where your interactions with the symbol layer used to be
  // Now you have interactions with DOM markers instead
  stores.features.forEach(function(marker, i) {
    // Create an img element for the marker
    var el = document.createElement('div');
    el.id = "marker-" + i;
    el.className = 'marker';
    // Add markers to the map at all points
    new mapboxgl.Marker(el, {offset: [0, -23]})
        .setLngLat(marker.geometry.coordinates)
        .addTo(map);

    el.addEventListener('click', function(e){
        // 1. Fly to the point
        flyToStore(marker);

        // 2. Close all other popups and display popup for clicked store
        createPopUp(marker);

        // 3. Highlight listing in sidebar (and remove highlight for all other listings)

        e.stopPropagation();
        if (activeItem[0]) {
           activeItem[0].classList.remove('active');
        }

        var listing = document.getElementById('listing-' + i);
        listing.classList.add('active');

    });
  });


  function flyToStore(currentFeature) {
    map.flyTo({
        center: currentFeature.geometry.coordinates,
        zoom: 15
      });
  }

  function createPopUp(currentFeature) {
    if (popUps[0]) popUps[0].remove();


    var popup = new mapboxgl.Popup({closeOnClick: false})
          .setLngLat(currentFeature.geometry.coordinates)
          .setHTML('<h3>'+currentFeature.properties.name+'</h3>' +
            '<h4>' + currentFeature.properties.address + '</h4>')
          .addTo(map);
  }


  function buildLocationList(data) {
    for (i = 0; i < data.features.length; i++) {
      var currentFeature = data.features[i];
      var prop = currentFeature.properties;

      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('div'));
      listing.className = 'item';
      listing.id = "listing-" + i;

      var link = listing.appendChild(document.createElement('a'));
      link.href = '#';
      link.className = 'title';
      listing.dataPosition = i;
      link.innerHTML = prop.name;

      var details = listing.appendChild(document.createElement('div'));
      details.innerHTML = prop.address+'<br>'+prop.city;
      if (prop.phone) {
        details.innerHTML += ' &middot; ' + prop.phoneFormatted;
      }



      listing.addEventListener('click', function(e){
        // Update the currentFeature to the store associated with the clicked link
        var clickedListing = data.features[this.dataPosition];

        // 1. Fly to the point
        flyToStore(clickedListing);

        // 2. Close all other popups and display popup for clicked store
        createPopUp(clickedListing);

        // 3. Highlight listing in sidebar (and remove highlight for all other listings)
        var activeItem = document.getElementsByClassName('active');

        if (activeItem[0]) {
           activeItem[0].classList.remove('active');
        }
        // this.parentNode.classList.add('active');
        this.classList.add('active');

      });
    }
  }


    </script>