test

app.js

// Initialize TabletopJS
// This waits for the document to load
// then it calls the function containing everything connected to our spreadsheet
// In this case, this callback is called showInfo
document.addEventListener('DOMContentLoaded', function() {
    var gData
    var URL = "13Xd93PIiGvGh2JQ6uygnsUTTLAlJu7F7TE-doTy-5OY"
        Tabletop.init({ 
            key: URL, 
            callback: showInfo, 
            simpleSheet: true 
        })
})
// Function for creating map, loading in data and placing it in the info pane
function showInfo(gData) {
    //Options for our table
    tableOptions = {
        // What's the data (gData) we'll pass to our table?
        "data": gData, 
        // Where will we be placing the table in our website?
        "tableDiv": "#beerTable", 
        // What element will act as the filter for table?
        "filterDiv": "#tableFilter"
    }

    // put data into table using our table options
    Sheetsee.makeTable(tableOptions)
    // create filter using table options
    Sheetsee.initiateTableFilter(tableOptions)

    // What attribute data do we want from our spreadsheet? Use the column name!
    var optionsJSON = ["rowNumber", "name", "icon", "city", "type"]
    // Let's turn our spreadsheet into GeoJSON so we can add it to a map!
    var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
    // This isn't necessary, but it will let you look at the GeoJSON generated by Sheetsee!
    console.log(geoJSON);

    // Setup map, specifying the id of the div where the map will be located
    var map = Sheetsee.loadMap("map")
    // Add a basemap. We can set that with plain Leaflet
    var stamenToner = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // Our spreadsheet data has been transformed into GeoJSON using Sheetsee
    // Sheetsee allows you to load markers, but they're default pushpins
    // Instead, we'll use Leaflet to transform our GeoJSON into a marker layer.
    // This way we can use our own custom marker icons
    // We'll also create a popup that will show extra information for the clicked location
    markerLayer = L.geoJson(geoJSON,{
        pointToLayer: function(feature,latlng) {
            var featureIcon = L.icon({
                // Beer by Fabián Sanabria from the Noun Project
                iconUrl:'img/beer.png',
                // Set icon size
                iconSize: [18,18],
                // Offset the popup we'll add so it doesn't cover the marker
                popupAnchor: [0, -9]
            })
            var marker = L.marker(latlng,{
                icon: featureIcon
            });
            // We'll access the attributes we want to use with the template feature.opts.<name_of_attribute>
            // This differs a little bit from most GeoJSON in that attributes are usually accessed through feature.properties.<name_of_attribute>
            var popupContent = "<div style='color: whitesmoke;'><h2>" + feature.opts.name + "</h2><p>" + feature.opts.city + " | " + feature.opts.type + "</p><img class='establishmentIcon' src='" + feature.opts.icon + "'></div>"
            marker.bindPopup(popupContent);
            return marker
        }
    }).addTo(map);

    // Set initial map extent to the bounds of the marker layer
    // This way we'll all of our markers when we open the map!
    map.fitBounds(markerLayer.getBounds())

    // Use jQuery w/ Sheetsee so that when you click on a place in the table, the map zooms to the location and the infopane updates
    $('.beerRow').on("click", function(event) {
        // Clear the styling in the table for the previously selected row
        $('.beerRow').removeClass("selectedRow")
        // Select the row of the location clicked in the table
        var rowNumber = $(this).closest("tr").attr("id")
        // Add styling to the selected row
        $('#' + rowNumber).addClass("selectedRow")
        // Sets a variable that is only the data for the selected row
        var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
        // Fits the selected row attributes to the infopane template (selectedBeer)
        var selectedBeer = Sheetsee.ich.selectedBeer({
            rows: dataElement
        })
        console.log(selectedBeer)
        // Adds the filled template as HTML to infopane
        $('#selectedBeer').html(selectedBeer).css("display", "inline")
        // Gets the coordinates of the selected row
        var selectedCoords = [dataElement[0].lat, dataElement[0].long]
        // Set the map view to the selected row's coordinates (w/ fixed zoom level))
        map.setView(selectedCoords, 17)
    })

    // Add click listener to the markerLayer
    markerLayer.on('click', function(e) {
        // clear any selected rows
        $('.beerRow').removeClass("selectedRow")
        // get row number of selected marker
        var rowNumber = e.layer.feature.opts.rowNumber
        // find that row in the table and make consider it selected
        $('#' + rowNumber).addClass("selectedRow")
        // using row number, get the data for the selected spot
        var dataElement = Sheetsee.getMatches(gData, rowNumber.toString(), "rowNumber")
        // take those details and re-write the selected spot section
        var selectedBeer = Sheetsee.ich.selectedBeer({
            rows: dataElement
        })
        // center the map on the selected element
        selectedMarkerLocation = [dataElement[0].lat, dataElement[0].long]
        //map.panTo([dataElement[0].lat, dataElement[0].long])
        map.setView(selectedMarkerLocation, 17)
        // update the spot listing
        $('#selectedBeer').html(selectedBeer).css("display", "inline")
    })

    // resets the map to the extent of the feature layer when you click the reset map button
    $('.resetMap').click(function() {
        // Clear whatever row is selected of the .selectedRow style
        $('.beerRow').removeClass("selectedRow")
        // Clear the infopane of the info about the most recently selected beer place
        $('#selectedBeer').css("display", "none")
        // Center map and set zoom to include all the markers
        map.fitBounds(markerLayer.getBounds())
    })
}

index.html

<html>
    <head>
    
    <!-- Meta  -->
        <title>Lexington Beer Establishments</title>
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- Stylesheets -->
        <link href='https://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
        <!--<link media="screen" rel="stylesheet" type="text/css" href="css/site.css">-->
        <link media="screen" rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/maptimelex/spreadsheet-sorcery/gh-pages/beer-map/css/site.css">

    </head>
<body>

<!-- Main HTML structure -->
    <div id="wrapper">
        <h1>Lexington Area Beer Establishments</h1>
        
        <!-- info pane for our selected beer place and the map -->
        <div class="container">
            <div id="infoPane">
                <!-- This looks empty but we'll use a template with same ID to populate it! -->
                <div id="selectedBeer"></div>
            </div>
            <div id="map"></div>
        </div>

        <!-- Table, table filter, and associated buttons -->
        <div class="container">
            <input id="tableFilter" type="text" placeholder="filter by.."></input>
            | <span class="clear">Clear</span> | <span class="resetMap">Reset Map</span> |
            <br>
            <span class="noMatches">no matches</span>
            <!-- This looks empty but we'll use a template with same ID to populate it! -->
            <div id="beerTable"></div>
        </div>
        <!-- Some info about our map, where it came from, data attribution, etc. -->
        <div id="info" class="container">
            <h3>About the map</h3>
            <p>Data for this map were collected from <a href="http://www.lexbeerscene.com/" target="_blank">LexBeerScene.com's</a> directory of <a href="http://www.lexbeerscene.com/localestablishments" target="_blank">local beer establishments</a>. You can access the Google Spreadsheet of the data <a href="https://docs.google.com/spreadsheets/d/13Xd93PIiGvGh2JQ6uygnsUTTLAlJu7F7TE-doTy-5OY/edit#gid=1993162178" target="_blank">here</a></p>
            <p>This map was primarily built using <a href="http://jlord.us/sheetsee.js/" target="_blank">SheetseeJS</a> and <a href="https://www.mapbox.com/mapbox.js/api/v2.2.3/" target="_blank">MapboxJS</a>/<a href="http://leafletjs.com/" target="_blank">LeafletJS</a>. The design and functionaliy draw heavily on <a href="https://twitter.com/jllord" target="_blank">Jessica Lord's</a> "Hack Spots" map (<a href="http://jlord.us/hack-spots/" target="_blank">map</a> | <a href="https://github.com/jlord/hack-spots" target="_blank">code</a>).</p>
            <p>Icon Credit: <a href="https://thenounproject.com/search/?q=beer&i=124636" target="_blank">Beer by Fabián Sanabria from the Noun Project.</a></p>
        </div>
    </div><!-- end wrapper -->

<!-- Handlebar templates -->

    <!-- Info pane for selected spot -->
    <script id="selectedBeer" type="text/html">
        {{#rows}}
            <h4>SELECTED SPOT</h4>
            <img class="establishmentIcon" src="{{icon}}">
            <h2>{{name}}</h2>
            <p>{{address}}<p>
            <p>{{city}}{{#state}}, {{state}}{{/state}}{{#zip}}, {{zip}}{{/zip}}</p>
            <ul>
                {{#website}}<li><span class="category"><a href="{{website}}" target="_blank">Website</a></span></li>{{/website}}
                {{#phone}}<li><span class="category">Phone:</span> {{phone}}</li>{{/phone}}
                {{#taps}}<li><span class="category"># of Taps:</span> {{taps}}</li>{{/taps}}
                {{#food}}<li><span class="category">Food ?:</span> {{food}}</li>{{/food}}
            </ul>
        {{/rows}}
    </script> 

    <!-- Table -->
    <script id="beerTable" type="text/html">
        <table>
            <tr><th class="tHeader">Name</th><th class="tHeader">City</th><th class="tHeader">Type</th></tr>
            {{#rows}}
                <tr id="{{rowNumber}}" class="beerRow"><td>{{name}}</td><td>{{city}}</td><td>{{type}}</td></tr>
            {{/rows}}
        </table>
    </script>
         

    <!-- Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--<script type="text/javascript" src='js/tabletop1.3.4.js'></script>-->
    <script src='https://cdn.rawgit.com/maptimelex/spreadsheet-sorcery/gh-pages/beer-map/js/tabletop1.3.4.js'></script>
    <!--<script type="text/javascript" src='js/sheetsee.js'></script>-->
    <script src='https://cdn.rawgit.com/maptimelex/spreadsheet-sorcery/gh-pages/beer-map/js/sheetsee.js'></script>

    <!-- Map & Spreadsheet script -->
    <script type="text/javascript" src="app.js"></script>
</body>
</html>