//Set up map
  var map = L.map('map').setView([38.317236, -84.564147], 15);

  //Basemap
  var base = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    subdomains: 'abcd',
    maxZoom: 19
  }).addTo(map);

  // Add Parcel from gis.gscplanning
  var parcels = L.esri.featureLayer('http://gis.gscplanning.com/arcgis/rest/services/Parcels/FeatureServer/0', {
    simplifyFactor: 0.35,
    precision: 5,
    style: function (feature) {
      return {
        color: '#ff33ff',
        fillOpacity: 0,
        weight: 1
      }
    }
  }).addTo(map);

  var oldId;

  //info pane text
  var defaultInfoPaneText = 'Hover to Inspect<br><em>Click for more info</em>'
  document.getElementById('info-pane').innerHTML = defaultInfoPaneText;
  
  //What to do when mouse leaves a parcel
  parcels.on('mouseout', function(e){
    document.getElementById('info-pane').innerHTML = defaultInfoPaneText;
  });

  //When mouse hovers over a parcel, do the queryRelatedBasic function
  parcels.on('mouseover', queryInfoPane);

  //function that gets parcel info from a related table and then updates the info pane with the address. also, changes the color of the parcels
  function queryInfoPane(e) {
    var query = L.esri.Tasks.queryRelated(parcels).objectIds([e.layer.feature.id]).relationshipId("0").run(function(error, response, raw) {     
      parcels.resetStyle(oldId);
      oldId = e.layer.feature.id;
      document.getElementById('info-pane').innerHTML = response.features[0].properties.Complete_A;
      e.layer.bringToFront();
      parcels.setFeatureStyle(e.layer.feature.id, {
        color: '#ffff33',
        weight: 3,
        fillOpacity: 0.25
      })
    });
  }


  // fire a query when users click on a feature
  parcels.on("click", queryRelated);

  function queryRelated(evt) {
    L.esri.Tasks.queryRelated(parcels).objectIds([evt.layer.feature.id]).relationshipId("0").run(function(error, response, raw) {
      //pull the attributes out of the geoJson response
      if (response.features.length > 0) {
        var results = [];
        for (i=0; i < response.features.length; i++){
          results.push(response.features[i].properties);
        }
        $('#my-table').removeClass('hidden');
        //you can only call refresh() when loading from a url
        $('#my-table').bootstrapTable('destroy');
        $('#my-table').bootstrapTable({
          data: results,
          cache: false,
          striped: true,
          clickToSelect: true,
          columns: [{
              field: 'MapNumber',
              title: 'GIS Map ID',
              sortable: false
          }, {
              field: 'Name1',
              title: 'Owner',
              sortable: false
          }, {
              field: 'Complete_A',
              title: 'Address',
              sortable: false
          }]
        });
      }
    });
  }

  map.on("click", function(){
    //hide the table when the map is clicked
    $('#my-table').bootstrapTable('destroy');
  });