Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Template for converting data from Google spreadsheet to Leaflet using Tabletop
Branch: master
Failed to load latest commit information.
cluster_addons Add example using marker cluster plugin
css Style changes
imgs Several tweaks
js Style changes Update readme
index.html Style changes
index_cluster.html Style changes

Tabletop to Leaflet

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.


Something went wrong with that request. Please try again.