Tabletop to Leaflet
The map template is responsive, meaning it works on screens both big and small.
Besides Tabletop.js and Leaflet, the template utilizes the Bootstrap framework.
For more information, check out my blog post.
Setting up Tabletop
Follow the Tabletop.js instructions for setting up the spreadsheet and publishing it.
Make sure your table includes columns titled 'latitude' and 'longitude' with lat, long values for each location. Leaflet needs these values to map our markers. Click to view the example table.
Open up the js/script.js file and add your spreadsheet ID as a value to the spreadsheetKey key in the initializeTabletopObject. This is on line 19 of the file. initializeTabletopObject('0As3JvOeYDO50dF9NWWRiaTdqNmdKQ1lCY3dpdDhZU3c');
Setting up Leaflet
The data will then be sent to the startUpLeafet function. We will loop through the data and create variables for each column in the spreadsheet. In the js/script.js file, change lines 45 through 49 to match with the column names in your Google spreadsheet. NOTE: your numbers may be off by a few lines if you have more or less columns than the example table:
var dataOne = tabletopData[num].brewery; var dataTwo = tabletopData[num].address; var dataThree = tabletopData[num].city; var dataFour= tabletopData[num].phone; var dataFive = tabletopData[num].website;
Similarily, we will scroll down to lines 63 to 70 (again, your numbers may be off) and change the text in popup variable to the names of your columns. So change 'Address', 'City', etc. to the appropriate column names:
var popup = "<div class=popup_box" + "id=" + num + ">"; popup += "<div class='popup_box_header'><strong>" + dataOne + "</strong></div>"; popup += "<hr />"; popup += "<strong>Address:</strong> " + dataTwo + "<br />"; popup += "<strong>City:</strong> " + dataThree + "<br />"; popup += "<strong>Phone:</strong> " + dataFour + "<br />"; popup += "<strong>Website:</strong> " + dataFive + "<br />"; popup += "</div>";
Styling the map
This example uses plain blue markers provided by Leaflet but plenty of options are available. For more, visit their website.
You also style the map's sidebar, header, buttons, etc. using the css/style.css file. Here's an example using a black template.