Geographic heat map

Geographic heat maps are an interactive way to identify where something occurs, and demonstrate areas of high and low density.

Below is an example of a heat map showing the locations of Carl's Jr restaurants. Red areas show where there are a high volume of Carl's Jr restaurants in close proximity, while cooler areas show where there are fewer Carl's Jr restaurants.

Click Powered by Mode to duplicate the report and create your own geographic heat map. Learn more about using HTML to customize your reports.

Create a geographic heat map

Add the stylesheet links and script tags to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="https://cdn.rawgit.com/mode/playbook/master/assets/leaflet-heatmap.js"></script>
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.leafletMap(
  {
	title: "Carl's Jr locations",
	height: 500,
	lat_column: "lat",
	lng_column: "lng",
	query_name: "Query 1",
	center_lat: 39.5,
	center_lng: -98.35,
	starting_zoom: 4,
	dot_size: .4,
	dot_opacity: .7
  }
)

</script>

You can customize the map by editing the parameters in the snippet:

• html_element: If not provided, the map will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.
• height: The height of the map. Defaults to 400px.
• title: The map's title.
• lat_column: The dataset column that returns latitude vaules.
• lng_column: The dataset column that returns longitude vaules.
• query_name: The name of the query that returns the map's dataset. If you update the name of the query, you’ll need to update it here as well.
• center_lat: The default center latitude value for the map.
• center_lng: The default center longitude value for the map.
• starting_zoom: The default zoom. Typically ranges from 1 to 15. The higher the value, the greater the zoom.
• dot_size: The size of the heatmap dots. Ranges from 0 to 1. The higher the value, the larger the dots.
• dot_opactiy: The opacity of the heatmap dots. Ranges from 0 to 1. The higher the value, the more opaque the dots.