Sign in
x
☰

Google Maps chart

How to create a map for respondent locations

Updated at 2019-06-26 23:37:35 UTC
Google Maps icon showing the familiar white 'G' letter on a green square background alongside the red location pin marker with yellow and blue road elements on a light background.

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.

Protobi Google Map visualization titled 'Respondent location' showing a world map with red location pin markers distributed globally. Heavy concentration of markers appears in North America (United States and Canada) and Western Europe, with additional markers scattered across South America, Africa, Asia, and Australia. Map includes standard Google Maps controls and a yellow person icon in the lower right corner.

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.

Protobi data view showing two side-by-side frequency tables for location_latitude and location_longitude variables. Each table displays unique coordinate values with their frequencies and percentages, with [NA] values showing 52.1% for both variables. Each table includes a Filter text box and Apply button at the top.

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:

JSON editor dialog showing element properties for creating a Google Map. Key settings include chartType set to 'GoogleMap', chartOptions specifying lat and lng keys pointing to location_latitude and location_longitude fields, displayKey as 'map', and title as 'Respondent location'. Cancel and Ok buttons appear at the top right.

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.

Google Map showing respondent locations with automatic marker clustering enabled. Red circular cluster markers with white numbers indicate grouped respondents in high-density areas (179, 123, and 105 visible in United States), while individual red pin markers appear in less dense regions. Yellow circular markers with numbers appear in Europe (21, 34, 44). Individual markers visible across all continents.

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

Google Map showing all respondent locations with custom dark red triangle markers instead of default pins. Markers appear as inverted triangles pointing downward, densely packed in United States and Western Europe with scatter distribution across other continents. All individual markers visible with clustering disabled.

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" 

Google Map showing mixed custom visualization with both custom cluster markers and individual markers. Circular cluster markers in blue and olive green with white numbers indicate grouped respondents (179, 123, 105, 39 in North America; 21, 34, 44 in Europe), while individual dark red triangle markers appear in less dense regions worldwide.

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: 

Google Map showing respondent locations as a heat map visualization. Blue to yellow gradient indicates respondent density, with bright yellow hotspots in United States (multiple intense spots across the country) and lighter blue circular areas showing medium concentrations in Canada, Europe, and other regions. Gradient fades to transparency in areas with no respondents.

press on any marker to view more details. 

Google Map zoomed to northeastern United States showing a popup tooltip displaying respondent details. The white popup card shows: Country: US, State: NY, Total years experience: 13, Title: technical director, Annual base pay: $73,000, Employer: logic technology. Map shows cluster markers and individual triangle markers around the New York, Pennsylvania, and New England region. The number 24 appears in a blue circle in Massachusetts.

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

Protobi tree/hierarchy view showing the map element structure. Header shows 'Global' button, 'N=1655' sample size, and 'Clear' button with Filter box below. The parent element 'map: Respondent location' contains eight child elements listed vertically with blue circular icons: location_latitude, location_longitude, Country, State, Total years experience, Title, Annual base pay, and Employer.

Detailed JSON chart options

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

JSON editor dialog showing detailed chartOptions configuration for Google Map. Visible settings include: lat and lng mappings, width (596) and height (354), heatMap options (visible: false, radius: 4, opacity: 0.8, dissipating: false, gradient array), markerIcon settings (visible: true, url with marker image path, size with height 30 and width 20, anchor and origin arrays), cluster options (visible: true, gridSize: 50, maxZoom: 8, opacity: 0.5, minimumClusterSize: 10, imagePath), zoom: 2, and center coordinates (lat: 37.021007950691125, lng: -31.23704100968907).