Six months ago today, I moved across the country to Boston, Massachusetts. After 180 days of exploring my new home and the surrounding area, I realized it’d be pretty damn cool to visualize where I’ve been so far, and what I still have left to see.

I’m certainly not the first one to want to create a HeatMap of my location history, but nothing on the internet was quite what I was looking for… So I decided to build my own. A few hours later, I had a working prototype, and after some tweaks it’s now up on GitHub for anyone to use!

Create your own HeatMap

As long as your phone has location data turned on, you’ll be able to create a heat map to visualize your location history as well.

Here are the three things you’ll need:

1) Your Google Location History — You can download the .json file from Google Takeout. After visiting that link, click on the Select None button to unselect everything. Then, scroll down to and select Location History.

Finally, select Next and start your download. It make take a while for Google to prepare your data, but they will email you when it is ready for download.

Note: If you have an Android Phone your data should be being saved by google automatically. If you use an iPhone, You may need to turn this feature on.

2) A Google Maps API Key — You can create your API Key Here. Simply click on the Get A Key button then click Create A New Project. Once you’ve named your project (whatever you want) you can select Create And Enable API.

3) The Code — You can download the code from the GitHub Repo Here.

Putting it all together

Once you have all three ingredients above, we can put everything together! There are only three steps:

1) Navigate to the folder with the code in the console and run npm install. This will install the dependencies for the project.

2) Open index.html in your favorite code editor. We’re interested in line 103:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=visualization&callback=initMap">

All you need to do is remove the YOUR_API_KEY_HERE and replace it with your Google Maps API Key! Take care to paste between the = and the &.

3) Find where you downloaded your Location History JSON file. Rename that file to location.json. Once you’ve renamed it, you can copy it into the public directory/folder of the project.

4) Go back into the console and start your server with node app.js. This will serve the project on your local machine on port 3000.

5) Navigate to localhost:3000 in your browser and enjoy your heatmap!

Note: Depending on the size of your JSON file, it may take some time for you map to populate

Playing around with your HeatMap

Because different people have traveled more/less than others, I built some custom controls into the map. They’re located at the top:

• Radius — Changes the radius of each data point. Range 0–50.
• Intensity — Changes the maximum intensity of the data. Range 0–1000.
• Opacity — Changes the opacity of the HeatMap overlay. Range: 0–1.

Different combinations work better than others depending on your zoom level and total location data. I recommend playing around with your data until you find something that fits well.

If you want some visual tips, check out the three Bangkok HeatMaps below. All three are the same data, just different settings:

The Code

The Google Maps API has some great starter code on HeatMaps that’s available here. That’s what I started with when building this project.

app.js

This file is used to serve the app locally on your machine. It uses Node JS and Express JS to accomplish this.

index.html

This file houses the meat of the project. Our HTML and JavaScript is all located here. I’m going to walk through the basics of the JavaScript below:

• The initMap(){...} function is where the magic happens.
• Within our initMap we first create a new google maps Map. This map needs a default zoom level, centering coordinates, and map type — in this case, a road map:

map = new google.maps.Map(document.getElementById('map'), {
  zoom: 2,
  center: {lat: 37.775, lng: -122.434},
  mapTypeId: 'roadmap'
});

• The next thing we do is fetch our location data. This is done asynchronously using promises. If you’re not familiar with promises, check out my article on Promises here. Our promise loads in the location data and creates a new Google Maps LatLng (location) for each data point:

fetch('static/location.json').then(function(response) {
  response.json().then(function(result) {
  let locations = result.locations.map((val) => {
    return new google.maps.LatLng(val.latitudeE7 * (10 ** -7),
    val.longitudeE7 * (10 ** -7));
})

• Now that we have a map created and all of our data converted in the Google Maps Objects, we can paint our data on our map. To do this, we create a new layer on our map — a heatmap layer. On this layer we select our data, and set some preferences for how we want this data to look initially:

heatmap = new google.maps.visualization.HeatmapLayer({
  data: locations,
  map: map,
  maxIntensity: maxI,
  radius: rad,
  opacity: opac
});

And that’s really it!

The rest of our JavaScript code is used to allow users to interact with the heatmap and change visualization settings like the radius and opacity of data points. These are not required to create a heatmap as the numbers can just be hardcoded in.

Closing Thoughts

Please check out the GitHub Repo Here, and let me know your thoughts! Also, feel free to suggest an improvement or create a Pull Request if you’d like to contribute to this project.

If you’re ready to learn web development, check out The Ultimate Guide to Learning Full Stack Web Development in 6 months.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇