Google Maps chart

How to create a map for respondent locations

38d87d9852a66eea29da00ae16511664

Updated at October 17th, 2019

Users can use Protobi to plot respondent locations on interactive Google Maps, with icons, heat map, and tooltips that are customizable.

For this example we'll use the 2016 Hacker News Developer Salary Survey with data provided by Data.world. This dataset is already geocoded with latitude and longitude for many (but not all) respondents.

Creating you own Google Map

To create a map like the one above, first identify the data columns that contain latitude and longitude. If your dataset has ZIP Code, State or Addresses but not lat+lng you may need to geocode the data first, our support team can help you with that.


Create a new group element with latitude and longitude as the first two elements, then press the edit icon. Select "Edit JSON..." and set the attribute "chartType" to "GoogleMap".

By default, Protobi will take the first two elements as latitude and longitude. However, you can organize the map differently and set the keys explicitly within chart options:

Protobi shows a marker for each respondent. Protobi dynamically clusters nearby markers together as you zoom out showing an overall count, and splits them apart as you zoom in.

You can customize this by editing the chart options, e.g., turn clustering off by or specify a custom marker image: 

You can also specify custom cluster icon for different scales. Create five images with names PREFIX1.png ... PREFIX5.png where can be anything, upload them to the project and specify the base URL, e.g.:"imagePath":"https://app.protobi.com/v3/datasets/5c23a0bf28bd890004edb591/direct/m" 

You can also show a heat map instead of (or in addition to) markers. By default the heat map represents counts of respondents but you can set other metrics, like patient volume or GDP: 

Click on any marker to view more details. 

You can choose which attributes are shown by setting them as "children" of the map element: 

Detailed JSON chart options

The chartOptions are automatically filled in with intelligent default values, which you can then edit. Below are the primary options:

Was this article helpful?