jlord / hack-spots

Using Sheetsee.js and power of collaboration to collect the best places to get your hack on.

Hi!

This is the code for a website that shows the spots myself, my friends (or Twitter friends) have found to be excellent hacking spots around the whole wide world.

Fork -n- Go!

Here's a fun fact:

GitHub gives free hosting for every repository (see GitHub Pages).

This repo only has a gh-pages branch, the branch GitHub hosts, which means as soon as you fork it, you have a hosted and live version of it yourself! Read more about fork-n-go type of projects.

Next, create a spreadsheet with the same column headers as the original.

Click on the index.html file, click edit and change line 118 (or thereabouts) it looks like:

    document.addEventListener('DOMContentLoaded', function() {
	  	var gData
	  	var URL = "0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c"
			Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } ) 
    }) 

Replace the existing spreadsheet URL key with your spreadsheet's key. You'll find that by clicking (in Google Spreadsheets) File > Publish to the Web > Start Publishing, it will then display the key in a window.

Commit those changes and LIKE WOAH you now have a version of this website hooked to a spreadsheet that you can distrubute however you'd like.

You can find your version at yourGitHubName.github.io/theReposName (in this case /hack-spots).

But How?

A Google Spreadsheet holds all the data and it is connected to this website using the goodies in sheetsee.js. Everytime you visit the website, you'll have the most up to date data that has been entered into the spreadsheet.

hack-spots's Issues

View only spreadsheet?

hack-spots has been awesome an awesome resource for discovering and keeping track of good places to work on my travels, but looks like the spreadsheet's closed for editing. Is this likely to switch back? Thanks! :)

Ordering by value not accurate enough

I have some values such a:

43

12
5
11
16
18
51

when sorted by table, I got:

11
12
16
18
18
43
5
51

Could you tell me where can I fix the code and make these values in right order?

TypeError: geoJSON[0] is undefined

On FF 23.0.1, when hack-spots loads, it fails with the above error. I've tracked it back to gData being == [ ] and that seems to screw up the geoJSON var. I haven't tested this with any other browsers or versions yet.

I'll look more into this and see what I can't figure out.

On Mac OS X Safari, clicking a marker shows "undefined" on the first click, the title on the second click.

First click:

Second click:

The same thing happens in iOS Safari. This does not happen in Chrome (at least not in Chrome Canary).

Pagination

Need some pagination because when the list gets long, it will be long..

TODO

• add pagination
• update mapbox.js
• clean up jquery

Make London happen!

Just added The Breakfast Club, but noticed there isn't a postcode field. Postcode is pretty useful in London, it is sometimes more accurate than searching by street number/name! So it'd be rad if we can have a postcode field, it doesn't need to do anything even.

Hack-spots

#filter

Would be nice to have # hashes auto filter the table, and for the initial map to focus on (one of) the results. Mainly I just want to use this for city/country filter so it's better for sharing.

🌷

Map doesn't always reset correctly

Sometimes you have to click in the table twice for the map to reset correctly.

Ordnance Survey map in the hack-spots

Hi,

Could you tell me where in the sheetsee.js code can I change the crs in order to replace an existing map canvas with Ordnance Survey maps api?

Any hint very appreciated.

Thank you in advance,

mapbox account.

I haven't seen it mentioned anywhere, but should I create my own Mapbox project if I'm using hack-spots as a base for a different project?

New google spreadsheets

When I enter in the spreadsheet key, on a spreadsheet created using the new google spreadsheet, it doesn't work.
I don't know how to make a 'old' google spreadsheet.

How do I move the NumberofSpots line to another part of the page?

I'm trying to move the "x hack spots strong" line to the footer of the page but it isn't working. It is correctly displaying the number of items in my spreadsheet, but when I try to move it to anywhere else on the page using this <div id="theNumberofSpots"></div> or <p><strong><span class="red-text">{{numberOfSpots}}</span> hack spots strong!</p>, it doesn't work.

Any help would be appreciated!

Address oddness for 'state'less addresses

For example it shows up as 213 Songxin Road, Taipei,(extra comma), ideally it should be 213 Songxin Road, Taipei, Taiwan or just 213 Songxin Road, Taipei.

Hex color doesn't work for the last item in spreedsheet

Something broke?

I think something broke cause the webpage is not pulling through the google doc info?

Make clicks work on mobile

When you click with your finger on things in the table on yer phone, it doesn't really work.

Mapbox api seems to be /v3 while they are on /v4 now

Mapbox is on /v4 now, https://www.mapbox.com/help/an-open-platform/#tilejson
Is there any plan to upgrade the lib to support it? I wasn't able to create a /v3 url..

Table isn't sortable, throws Uncaught ReferenceError: gData is not defined

So in playing around with this for my own project, I realized the table sort was broken because the function that handled that couldn't find gData. Some investigation (I'm no javascript pro) lead me to fix this by changing line 132 in index.html to window.gData = gData, 'hoisting' the variable into the global namespace. No idea if this is how you want to solve it, but I wanted to try and be a little more helpful than "it doesn't work".