Many organizations use spreadsheets to collaborate and collect data, so we are frequently asked how to create a map from data in this format.
This blueprint is appropriate for any organization trying to map a set of locations from a Google sheet — in order to display offices, emergency shelters, distributed events, and more.
This solution also can be used with more advanced functionality, including data joins to other tilesets, routing between locations, and more.
Set up a Google Spreadsheet with the data for your map. You can duplicate your sheet from this template or start your own. You need longitude and latitude for each point to place your map marker. Name, Address, and additional fields will be displayed in the popups.
Need help with generating lat/long points? You can use Nominatim, an open-source OSM tool, for for forward and reverse geocoding.
Once your table is complete, set sharing settings to 'Anyone with the link can view' so the data is visible without granting access to modify it. In Google Sheets navigate to File → Publish to the Web. Select Comma-Separated Values (CSV) from the drop down menu and then click on the green Publish button.
Copy the Published Link URL and save this to a notepad or some other document to be used later. Your URL should look something like:
Open a text editor and create a file called index.html. Set up the document by copying and pasting this template code into your new HTML file.
Without an access token, the rest of the code will not work.
Note: We recommend using the url restriction feature on the token to avoid token misuse and want to emphasize that only public tokens should be posted to public repositories. You can find out more information about how to securely manage your access tokens here.
Copy and paste your access token into the code, here:
There are several Mapbox-designed map styles that you can choose "out of the box" or you can design your own using the Mapbox Studio style editor. Let’s use Mapbox Streets:
Add Streets Style to your map by replacing <Replace with a Mapbox style url> with mapbox://styles/mapbox/streets-v11.
The code uses csv2geojson to retrieve data from the Google Sheet CSV export that you saved in Step 1 and convert into a geojson.
To connect your Google Sheet, replace the ‘url’ value with your Google Sheet export link.
The next part of the code adds the layer to the map and specifies how it will be styled. In this example, the layer is added as a circle with a 5 px radius and the color is set to purple. You can read more about layer types and available paint and layout properties in the Mapbox Style Specification.
When a user clicks a symbol we want to show a Popup containing more information about the locations stored in our spreadsheet. The text for each popup is set to the fields ‘Name’, ‘Address’, and ‘Phone’.
If you want to add different fields, change the display text (e.g. ‘Address:’) and the e.features.properties.columnName (e.features.properties.Address) to match the corresponding column label in your csv.
You’ve made a web map! But it isn’t a webpage yet… to do that we need some way to host a webpage. There are many different ways to host a webpage. Github Pages is one good solution.
Publish your map with Github Pages
View our finished example map at https://labs.mapbox.com/education/spreadsheet-to-map.
Want to share what you’ve built? Tweet it with #builtwithmapbox