update tabletop

This commit is contained in:
Jessica Lord
2014-06-28 15:26:30 -07:00
parent ceff5429ff
commit a78b4f9213
2 changed files with 39 additions and 38 deletions

View File

@@ -1,10 +1,10 @@
<html>
<head>
<title>Hack Spots</title>
<script type="text/javascript" src="js/ICanHaz.js"></script>
<script type="text/javascript" src="js/ICanHaz.js"></script>
<script type="text/javascript" src='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
<script type="text/javascript" src='js/jquery.js '></script>
<script type="text/javascript" src='js/tabletop.js'></script>
<script type="text/javascript" src='js/tabletop1.3.4.js'></script>
<script type="text/javascript" src='js/sheetsee.js'></script>
<script type="text/javascript" src='js/leaflet.markercluster.js'></script>
<link rel="shortcut icon" href="https://raw.github.com/jlord/hack-spots/master/favico.png"/>
@@ -12,9 +12,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic'>
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700'>
<link media="screen" rel="stylesheet" type="text/css" href="css/style.css">
<link media="screen" rel="stylesheet" type="text/css" href="css/site.css">
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700'>
<link media="screen" rel="stylesheet" type="text/css" href="css/style.css">
<link media="screen" rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" href="css/MarkerCluster.css" />
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
</head>
@@ -46,7 +46,7 @@
<div id="info" class="container">
<h3>Contribute!</h3>
<div id="theNumberofSpots"></div>
<p>This website is hooked up to <a href="https://docs.google.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c#gid=0" target="_blank">this Google Spreadsheet</a>, which I've shared, so click and add your favorite hack spots to the bottom of the list! For the map you'll need to <strong>get the lat and long</strong> of the spot, you can get that <a href="http://www.latlong.net/" target="_blank">here</a>. The locating of these places is helpful, so please try to fill out all the columns.</p>
<p>This website is hooked up to <a href="https://docs.google.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c#gid=0" target="_blank">this Google Spreadsheet</a>, which I've shared, so click and add your favorite hack spots to the bottom of the list! For the map you'll need to <strong>get the lat and long</strong> of the spot, you can get that <a href="http://www.latlong.net/" target="_blank">here</a>. The locating of these places is helpful, so please try to fill out all the columns.</p>
<h3>Info</h3>
<p>When I'm visiting a new city I'd like to know which coffee shops have the best vibes, great coffee and are good for hunkering down and having a good hack. Yelp will tell you where the Starbucks is and Foursquare will tell you where your friend's have <em>been</em> - but did they like it and was it a grab in go place or a hack place? Plus, what about the people I don't follow on Foursquare or who can't check-in when in other countries?</p>
@@ -124,13 +124,13 @@
var gData
// var URL = "10z-2P8l88hLF35EodIjigs5cyCD7BtmfZS631JMtIUU" // test new spreadsheets
var URL = "0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c"
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
// so long, so messy
function showInfo(data) {
gData = data
function showInfo(gData) {
gData
// make the table, and the search bar
Sheetsee.makeTable(gData, "#hackSpotsTable")
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
@@ -162,7 +162,7 @@
var startWithLatestRow = data.reverse()
startWithLatestRow.forEach(function(row){
if (!row.lat || !row.long || !row.name || !row.address || !row.city || !row.state ) return
else latestCompleteSpot.push(row)
else latestCompleteSpot.push(row)
})
return latestCompleteSpot[0]
}
@@ -187,6 +187,7 @@
var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
// change the color of the most recently added spot's marker
var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
// create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
@@ -201,7 +202,7 @@
marker.bindPopup(popupContent, {closeButton: false,})
})
markerLayer.on('click', function(e) {
// clear any selected rows
// clear any selected rows
$('.spotRow').removeClass("selectedRow")
// get row number of selected marker
var rowNumber = e.layer.feature.opts.rowNumber.toString()
@@ -217,7 +218,7 @@
// take those details and re-write the selected spot section
var selectedSpot = ich.selectedSpot({
rows: dataElement
})
})
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
})