2013-05-27 20:45:59 +00:00
< html >
< head >
< title > Hack Spots< / title >
2013-05-29 03:05:54 +00:00
< script type = "text/javascript" src = "js/ICanHaz.js" > < / script >
2013-07-30 17:48:52 +00:00
< script type = "text/javascript" src = 'http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js' > < / script >
< script type = "text/javascript" src = 'js/jquery.js ' > < / script >
2013-05-28 03:29:54 +00:00
< script type = "text/javascript" src = 'js/tabletop.js' > < / script >
2013-05-27 20:45:59 +00:00
< script type = "text/javascript" src = 'js/sheetsee.js' > < / script >
2013-05-28 02:29:51 +00:00
< link rel = "shortcut icon" href = "https://raw.github.com/jlord/hack-spots/master/favico.png" / >
2013-05-27 20:45:59 +00:00
2013-06-01 21:59:23 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2013-05-27 20:45:59 +00:00
< link href = 'http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel = 'stylesheet' / >
2013-07-30 18:32:12 +00:00
< link rel = 'stylesheet' type = 'text/css' href = 'http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic' >
2013-07-30 17:48:52 +00:00
< link rel = 'stylesheet' type = 'text/css' href = 'http://fonts.googleapis.com/css?family=Amatic+SC:400,700' >
2013-05-29 03:05:54 +00:00
< link media = "screen" rel = "stylesheet" type = "text/css" href = "css/style.css" >
< link media = "screen" rel = "stylesheet" type = "text/css" href = "css/site.css" >
2013-05-27 20:45:59 +00:00
< / head >
< body >
< div id = "wrapper" >
< h1 > Hack Spots< / h1 >
2013-05-28 01:35:21 +00:00
< div >
< ul class = "nav" >
2013-05-28 03:29:54 +00:00
< li > < strong > The collected favorites of those who hack< / strong > < / li >
2013-05-28 01:35:21 +00:00
< li > < a href = "#info" > INFO< / a > -< / li >
< li > < a href = "http://jlord.github.com/sheetsee.js" target = "_blank" > POWERED BY SHEETSEE.JS< / a > -< / li >
< li > < a href = "http://www.github.com/jlord/hack-spots" target = "_blank" > GITHUB< / a > -< / li >
< li > < a href = "http://www.twitter.com/jllord" target = "_blank" > @JLLORD< / a > < / li >
< / ul >
< / div >
< div class = "container" >
< div id = "rightSide" >
< div id = "latestSpot" > < / div >
< div id = "selectedSpot" > < / div >
< / div >
2013-05-27 20:45:59 +00:00
< div id = "map" > < / div >
< / div >
2013-05-28 01:35:21 +00:00
< div class = "container" >
< input id = "tableFilter" type = "text" placeholder = "filter by.." > < / input >
< span class = "clear button" > Clear< / span > < span class = "resetMap button" > Reset Map< / span >
< span class = "noMatches" > no matches< / span >
< div id = "hackSpotsTable" > < / div >
< / div >
< div id = "info" class = "container" >
2013-07-30 17:59:00 +00:00
< h3 > Contribute!< / h3 >
2013-07-30 18:40:57 +00:00
< 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! For the map you'll need to get the lat and long of the spot, you can get that < a href = "http://www.latlong.net/" target = "_blank" > here< / a > .< / p >
< p > < em > PS. Currently realizing that if you visit this site and someone is currently adding a row and the lat and and long haven't been entered yet, it will kill the map - am jumping on that bug!< / em > < / p >
2013-07-30 18:13:22 +00:00
2013-05-28 01:35:21 +00:00
< 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 >
2013-05-27 20:45:59 +00:00
2013-07-30 17:48:52 +00:00
< p > Besides being a list I've wanted to have, it's a fantastic (or I think so) way of using < a href = "http://jlord.github.io/sheetsee.js" target = "_blank" > sheetsee.js< / a > , which is a little JavaScript library I've been working on. Sheetsee.js helps you hook a Google Spreadsheet (awesome for data and collaboration!) to a website to make data more visual (maps, tables, charts).< / p >
2013-07-30 18:13:22 +00:00
< h3 > Fork-n-Go< / h3 >
2013-07-30 18:45:36 +00:00
< p > This is a work-in-progress example of a fork-n-go project - which means, there is just a < a href = "https://github.com/jlord/hack-spots" target = "_blank" > gh-pages branch in GitHub< / a > for this project so when you fork it, you've got a live and hosted website instantly. BAM! Just copy the spreadsheet headers and create your own spreadsheet, swap out the spreadsheet key in index.html, commit those changes and BAM you've got a live and hosted site with a spreadsheet you control.< / p >
2013-05-28 01:35:21 +00:00
< / div >
2013-05-27 20:45:59 +00:00
< / div > <!-- end wrapper -->
< script id = "hackSpotsTable" type = "text/html" >
< table >
2013-05-28 01:35:21 +00:00
< tr > < th class = "tHeader" > Name< / th > < th class = "tHeader" > Address< / th > < th class = "tHeader" > City< / th > < th class = "tHeader" > State< / th > < th class = "tHeader" > Country< / th > < th class = "" > Elsewhere< / th > < / tr >
2013-05-27 20:45:59 +00:00
{{#rows}}
2013-05-28 01:35:21 +00:00
< tr id = "{{rowNumber}}" class = "spotRow" > < td > {{name}}< / td > < td > {{address}}< / td > < td > {{city}}< / td > < td > {{state}}< / td > < td > {{country}}< / td > < td > < a class = "button" href = "https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target = "_blank" > G Map< / a > < a class = "button" href = "http://www.yelp.com/search?find_desc={{name}},{{city}},{{state}}" target = "_blank" > Yelp< / a > < / td > < / tr >
2013-05-27 20:45:59 +00:00
< tr class = "hideRow" > < td > wifi: {{wifipassword}}< / td > < / tr >
{{/rows}}
< / table >
< / script >
< script id = "latestSpot" type = "text/html" >
{{#rows}}
2013-05-28 01:35:21 +00:00
< h4 class = "fauxButton" > MOST RECENT SPOT< / h4 >
< h2 > {{name}}< / h2 >
< p class = "colorText" > {{address}}, {{city}}, {{state}}
2013-05-27 20:45:59 +00:00
< ul >
2013-05-28 01:35:21 +00:00
< li > < span class = "category" > Wifi:< / span > {{wifipassword}}< / li >
< li > < span class = "category" > Outlets:< / span > {{outlets}}< / li >
< li > < span class = "category" > Couch:< / span > {{couch}}< / li >
< li > < span class = "category" > Large Table:< / span > {{largetable}}< / li >
< li > < span class = "category" > Outdoor Seating:< / span > {{outdoorseating}}< / li >
< li > < span class = "category" > Brewing:< / span > {{brewing}}< / li >
2013-05-28 02:29:51 +00:00
< li > < span class = "category" > Contributed By:< / span > < a href = "http://www.twitter/{{contributerstwitter}}" target = "_blank" > @{{contributerstwitter}}< / a > < / li >
2013-05-28 01:35:21 +00:00
< / ul >
< ul >
< li > < a href = "https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target = "_blank" > View in Google Maps< / a > < / li >
< li > < a href = "http://www.yelp.com/search?find_desc={{name}},{{city}},{{state}}" target = "_blank" > Find on Yelp< / a > < / li >
2013-05-27 20:45:59 +00:00
< / ul >
{{/rows}}
< / script >
< script id = "selectedSpot" type = "text/html" >
{{#rows}}
2013-05-28 01:35:21 +00:00
< h4 class = "fauxButton" > SELECTED SPOT< / h4 >
< h2 > {{name}}< / h2 >
< p class = "colorText" > {{address}}, {{city}}, {{state}}
2013-05-27 20:45:59 +00:00
< ul >
2013-05-28 01:35:21 +00:00
< li > < span class = "category" > Wifi:< / span > {{wifipassword}}< / li >
< li > < span class = "category" > Outlets:< / span > {{outlets}}< / li >
< li > < span class = "category" > Couch:< / span > {{couch}}< / li >
< li > < span class = "category" > Large Table:< / span > {{largetable}}< / li >
< li > < span class = "category" > Outdoor Seating:< / span > {{outdoorseating}}< / li >
< li > < span class = "category" > Brewing:< / span > {{brewing}}< / li >
< / ul >
< ul >
< li > < a href = "https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target = "_blank" > View in Google Maps< / a > < / li >
< li > < a href = "http://www.yelp.com/search?find_desc={{name}},{{city}},{{state}}" target = "_blank" > Find on Yelp< / a > < / li >
2013-05-27 20:45:59 +00:00
< / ul >
{{/rows}}
< / script >
< script type = "text/javascript" >
document.addEventListener('DOMContentLoaded', function() {
2013-05-28 03:29:54 +00:00
var gData
var URL = "0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c"
2013-05-29 03:05:54 +00:00
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
2013-05-28 03:29:54 +00:00
function showInfo(data) {
2013-05-29 02:22:33 +00:00
gData = data
2013-05-29 03:05:54 +00:00
2013-05-27 20:45:59 +00:00
Sheetsee.makeTable(gData, "#hackSpotsTable")
2013-05-28 01:35:21 +00:00
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
2013-05-27 20:45:59 +00:00
2013-05-29 03:05:54 +00:00
// SO MESSY, I KNOW
$('.spotRow').live("click", function(event) {
$('.spotRow').removeClass("selectedRow")
console.log("clicked!")
var rowNumber = $(this).closest("tr").attr("id")
$('#' + rowNumber).addClass("selectedRow")
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
var selectedSpot = ich.selectedSpot({
rows: dataElement
})
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
var selectedCoords = [dataElement[0].lat, dataElement[0].long]
console.log(selectedCoords)
matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
console.log(geoJSON)
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer)
map.setView(selectedCoords, 13)
})
2013-05-27 20:45:59 +00:00
var theLatestSpot = gData.reverse()[0]
2013-05-29 03:05:54 +00:00
var latestSpot = ich.latestSpot({
rows: theLatestSpot
})
2013-05-27 20:45:59 +00:00
$('#latestSpot').html(latestSpot)
2013-05-29 03:05:54 +00:00
function refocusMap(){
var searchTerm = $('#tableFilter').val()
var searchData = Sheetsee.getKeyword(gData, searchTerm)
var searchCoords = ""
// map.setView(viewCoords, zoomLevel)
}
//})
function highlightLastMarker(geoJSON, highlightColor) {
2013-05-29 03:15:44 +00:00
geoJSON[0].properties["marker-color"] = highlightColor
2013-05-29 03:05:54 +00:00
return geoJSON
}
2013-05-28 02:29:51 +00:00
var optionsJSON = ["name", "address", "city", "rowNumber"]
var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
2013-05-29 03:05:54 +00:00
// geoJSON[0].properties["maker-color"] = "#E5FF1D"
2013-05-27 20:45:59 +00:00
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
addPopups(map, markerLayer)
2013-05-29 03:05:54 +00:00
function addPopups(map, markerLayer) {
markerLayer.on('click', function(e) {
// e.layer.feature["marker-color"] = "#ff00ff"
// map.marker(geoJSON, map, 11).addTo(map)
$('.spotRow').removeClass("selectedRow")
var rowNumber = e.layer.feature.opts.rowNumber.toString()
$('#' + rowNumber).addClass("selectedRow")
matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
console.log(geoJSON)
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
addPopups(map, markerLayer)
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
console.log("rowNumber", rowNumber, "dataElement", dataElement)
var selectedSpot = ich.selectedSpot({
rows: dataElement
})
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
var feature = e.layer.feature
var popupContent = '< h2 > ' + feature.opts.name + '< / h2 > '
2013-05-29 03:15:44 +00:00
e.layer.bindPopup(popupContent,{closeButton: false,})
2013-05-29 03:05:54 +00:00
})
}
// .addControl(L.mapbox.geocoderControl('examples.map-vyofok3q'));
$('.resetMap').click(function() {
$('.spotRow').removeClass("selectedRow")
markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
$('#latestSpot').css("display", "inline")
$('#selectedSpot').css("display", "none")
})
function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) {
geoJSON.forEach(function (d) {
if (d.properties["marker-color"] === highlightColor) {
var origColor = gData[0].hexcolor
d.properties["marker-color"] = origColor
}
for (var key in d.opts) {
var value = d.opts[key].toString().toLowerCase()
if (key === 'rowNumber' & & value.match(rowNumber.toString().toLowerCase())) {
d.properties["marker-color"] = highlightColor
return geoJSON
}
}
})
}
}
2013-05-28 03:21:00 +00:00
2013-05-27 20:45:59 +00:00
< / script >
< / body >
2013-05-29 03:05:54 +00:00
< / html >
