diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..f7edf63
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,31 @@
+{
+ "rules": {
+ "indent": [
+ 2,
+ 4
+ ],
+ "quotes": [
+ 2,
+ "single"
+ ],
+ "linebreak-style": [
+ 2,
+ "unix"
+ ],
+ "semi": [
+ 2,
+ "always"
+ ],
+ "strict": [
+ 2,
+ "never"
+ ]
+ },
+ "env": {
+ "browser": true
+ },
+ "globals": {
+ "Sheetsee": true,
+ "$": true
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 9203d43..8d12491 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,7 @@
-
-
@@ -95,123 +93,105 @@
{{/rows}}
-
+ var tableOptions = {
+ 'data': tableData,
+ 'tableDiv': '#hackSpotsTable',
+ 'filterDiv': '#tableFilter'
+ };
+
+ // make the table, and the search bar
+ Sheetsee.makeTable(tableOptions);
+ Sheetsee.initiateTableFilter(tableOptions);
+
+ // create geoJSON with coordinates and other
+ // useful bits from the original data
+ var optionsJSON = ['name', 'address', 'city', 'rowNumber'];
+ var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON);
+
+ // create map, tilelayer (map background), markers and popups
+ var map = Sheetsee.loadMap('map');
+ Sheetsee.addTileLayer(map, 'jllord.n7aml2bc');
+ var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, '
{{ name }}
');
+
+ var theLatestSpot = gData[gData.length - 1];
+ var latestSpot = Sheetsee.ich.latestSpot({
+ rows: theLatestSpot
+ });
+
+ // set it and pan to it
+ $('#latestSpot').html(latestSpot);
+ map.setView([theLatestSpot.lat, theLatestSpot.long], 14);
+
+ // when someone clicks on a row, highlight it and re-center the map
+ $('.spotRow').live('click', function() {
+ $('.spotRow').removeClass('selectedRow');
+ var rowNumber = $(this).closest('tr').attr('id');
+ $('#' + rowNumber).addClass('selectedRow');
+ var dataElement = Sheetsee.getMatches(gData, rowNumber, 'rowNumber');
+ var selectedSpot = Sheetsee.ich.selectedSpot({ rows: dataElement });
+ $('#latestSpot').css('display', 'none');
+ $('#selectedSpot').html(selectedSpot).css('display', 'inline');
+ var selectedCoords = [dataElement[0].lat, dataElement[0].long];
+ map.setView(selectedCoords, 14);
+ });
+
+ // Add click listener to the markerLayer
+ markerLayer.on('click', function(e) {
+ // clear any selected rows
+ $('.spotRow').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 selectedSpot = Sheetsee.ich.selectedSpot({ rows: dataElement });
+ // center the map on the selected element
+ map.panTo([dataElement[0].lat, dataElement[0].long]);
+ // update the spot listing
+ $('#latestSpot').css('display', 'none');
+ $('#selectedSpot').html(selectedSpot).css('display', 'inline');
+ });
+
+ // reset the map, zoom out, and recenter on 0,0
+ $('.resetMap').click(function() {
+ $('.spotRow').removeClass('selectedRow');
+ $('#latestSpot').css('display', 'inline');
+ $('#selectedSpot').css('display', 'none');
+ map.setView([0, 0], 1);
+ });
+
+ // find total number of spots added
+ $('#theNumberofSpots').html(Sheetsee.ich.theNumberofSpots({ numberOfSpots: gData.length }));
+
+ if (window.location.hash) {
+ $('#tableFilter').val(window.location.hash.substring(1)).keyup();
+ $('.spotRow').first().click();
+ }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+ $.getJSON('./stores.json', function(data) {
+ $.each(data, function(key, value) { value.rowNumber = key; });
+ showInfo(data);
+ });
+});
+
+$(document).on('keyup', '#tableFilter', function() {
+ window.location.hash = $(this).val();
+ $('.spotRow').first().click();
+});
+