Create a map of your sales or customers with Mapbox

When you sell digital or physical products online, people all over the world (or country) buy your products. I thought it would be fun to see where the people that buy my products are from. Those type of maps are typically used for social proof as they show potential customers that you are a trusted business and have served customers globally.

It gives potential customers a feel of how many customers you have and where they are located. You could possibly add the order amount or the product bought as well, to give a better indication of which products are popular.

Customer maps from Databuzz, Revolve and Sofatray.

I’m going to make this map for my SaaS product Checkout Page. My customers are people who “connect” their Stripe account to my service. I have exported their data and turned it into a CSV file. The starting point of this tutorial will be you getting your customer or sales data as a CSV file.

---

If you think this is too much work — I’m building a tool that turns your data into a pretty map easily. You can leave your email here for an invite to the beta. If you want your map now, you can pay me $20, send me your address data and I will do it manually using an early version of my tool.

---

1. Get your customer/sales data as a CSV file

Most e-commerce platforms offer a way to export your sales or customer data. Often this export will be in the CSV format, which you can open in Google Sheets, Numbers (Mac OS) or Microsoft Excel. Here are some links that should help you to get your initial export for a couple of platforms:

• Shopify Orders https://help.shopify.com/en/manual/orders/export-orders
• Shopify Customers https://help.shopify.com/en/manual/customers/import-export-customers
• Etsy Orders https://help.etsy.com/hc/en-gb/articles/360000343328-Downloading-a-Spreadsheet-of-Your-Sold-Transactions

• Stripe - Stripe payments and customers exports don’t include Billing or Shipping addresses. It is however possible to get these via the API as JSON as explained here https://stripe.com/docs/api/charges/list. I use the following code to save my customers to a json file, which I then convert to a CSV file via https://konklone.io/json/

  curl https://api.stripe.com/v1/customers?limit=9999 \
  -u [YOUR_API_KEY]: \
  -G \
  -o data.json

• WooCommerce https://docs.woocommerce.com/document/ordercustomer-csv-export/
• SquareSpace https://support.squarespace.com/hc/en-us/articles/206540677-Exporting-orders
• Wix https://support.wix.com/en/article/exporting-orders-in-wix-stores
• BigCommerce https://support.bigcommerce.com/s/article/Importing-Exporting-Orders

If you use a different ecommerce platform, simply Google ’[name of your ecommerce platform] export orders’ to find out how you can export your data.

2. Get coordinates from your addresses

To put the addresses of your orders or customers on a map, they need to be converted to coordinates. This process is called geocoding. The most accurate way to do this is by using the Google Maps API, but I didn’t want to code. I found a geocoding service that geocodes address data and returns it in CSV format.

Open up the CSV file you exported in step 1 in a spreadsheet editor (I use Google Sheets). To improve the accuracy of the geocoding tool it’s best to organise your data in readable addresses. I aligned my columns like this:

Address	Postcode	City	Country
…	…	…	…
…	…	…	…

This allowed me to copy them into the geocoder easily and is also helpful to paste the results back in.

The service sometimes returns a lot of possible addresses, meaning you will have to select the correct address out of a list of options.

Once geocoded, you scroll down to the results and copy them. Go back to the CSV file and add two columns to the right of the country column: latitude and longitude. To prevent overwriting the original data, I created a new tab/spreadsheet in Google Sheets, where I pasted the results. I then selected all the latitude and longitude items and copied them to my clipboard. I then went back to the customer data spreadsheets and pasted the coordinate date in the latitude and longitude columns.

3. Export to CSV

You now want to export your data to a CSV file. Mapbox has some restrictions on what it can read. If you’re running into issues, this document might help: https://www.mapbox.com/help/troubleshoot-csv/.

A few gotchas:

• Some spreadsheet editors export all empty rows and unnamed columns. It can be worth removing the unused rows at the bottom and right of your data.
• Make sure your exported file contains Comma Separated Values and not Semicolon Separated Values. Mapbox only accepts the former.

4. Upload dataset to Mapbox

We’ll use Mapbox to create the map. Mapbox offers some really nice map styles and you’re able to customise them as well. If you don’t have a Mapbox account yet, create one here https://www.mapbox.com/signup/.

To be able to map your data on a map in Mapbox, you need to add it as a dataset. Let’s go to Datasets in the studio dashboard to add it. Press the New dataset button, click the upload tab and upload your CSV file. Press confirm, give your dataset a name, click Create and click Start editing. You should be able to see your datapoints on a map now.

5. Convert data to a Tileset

To use the Dataset in the Styles editor, it needs to be converted to a Tileset. Go to Tilesets and click New tileset. Press the Create from dataset tab, select the dataset you just created in step 4 and export it to a tileset.

6. Add your data to a map

This is the fun part! We can finally design and create the map. Go to Styles and create a new Style. You can start with the Basic style, use a template or upload a style yourself. I chose Light as it matches the design of checkoutpage.co, where I will use the map.

Now press the Add layer button and add your dataset to the list of active sources. You should now see your data appear on the map. Nice!

You can click the Type tab to change the looks of your data. This also allows you to use a value from the dataset you’ve uploaded, such as the total order amount. Once you’ve added your layer you can select it and change the way it looks, the positioning, et cetera. I’m going for the icon of a bag and because I don’t have so many items mapped out, I’ll make the icon a bit larger.

7. Use your map

I simply wanted an image, so I’m simply taking a screenshot of the map. If you need a larger image, for example to print, there’s a print option in the top right corner. This is however limited to 5 prints and needs to contain Mapbox attribution.

You can also embed your map interactively on your website. To do this, click Share and then Use. This will show some code you can copy and paste into your website to embed the map itself.

No time to do all this?

This process takes quite some time, which is annoying. Especially if you want to make a new map next month, or next year. I’m working on a tool that automates most of the process. It’s working, but I haven’t built the interface yet. Want to hear more? Leave your email below. If you want your map now, you can pay me $20, send your raw data and I’ll turn it into a map for you, using the tool I’ve built.