How to Cluster Map Markers: Demo and Tutorial

Maps are a great way to show location data. The stories within the numbers appear when you can see them geographically. It might seem natural that the more points you add to a map the better story it tells, but that’s not always the case. Ideally you could summarize the underlying data, which requires map clustering technology. There are several ways to convert hundreds of markers into a reasonable number that still share the underlying story underneath. The approaches vary in effort and programming ability required, but all can bring even more understanding to your geographic data.

End Marker Overload

Marker Overload

We’ve all probably seen web maps like this. There are so many markers on that map, you can’t even see the map. The colors of the markers tell some kind of story, but there’s so much overlap with other icons that you might well just be missing other data.

A map with fewer markers allows the viewer to take in the information, rather than being overwhelmed. The way marker clustering works is that it provides a summary marker that gives you an idea of what’s “below” at closer zoom levels. Typically, you click a clustered marker to automatically zoom into an area with either additional clustered markers or individual markers. The viewer is able to see just enough at each stage to make sense of where to click to investigate further.

Gridded clustering to reduce Marker Overload

One way of creating clustered markers is to overlay a grid, as in the example above. Though, usually a visible grid is not used. Instead, the grid is defined by latitude and longitude coordinates to evenly segment the area of the map currently in view. Then, any markers within a particular grid are removed and replaced by a single marker, often labeled with the number of markers beneath.

Markers clustered

Above is one example of how a clustered map might look. In that example, the meaning of the color is removed in favor of the number of markers. However, you’ll see in the next section an alternative method that keeps that data visible within the clusters.

Copy-Paste Map Clusters

The easiest way to make web maps is to paste spreadsheet data into BatchGeo. You can include addresses, city names, or other location data, which get converted automatically into latitude and longitude coordinates. There are also several clustering options built into the service, which means you can get data-rich, readable maps in minutes.

Marker clustering showing averages

Let’s say you have a spreadsheet with the average household income of every county in the United States. That’s actually the exact example of marker overload from the previous section. At over 3,000 counties to display, the map looks very crowded without clusters. Here’s how to make a much simpler map that better communicates the meaning of the data.

  1. Copy and paste your spreadsheet into the map making tool
  2. Click Validate and Set Options, then Advanced Options
  3. Click Enabled clustering for high density markers
  4. Select the new option to choose average and Median Income (or whatever your data example)
  5. Finally, click Make Map


The result will be a map like this, with the average of the Median Income values for each county in a cluster displayed as the label.

View Household income, average clustering in a full screen map

You can also get a much simpler cluster that merely counts the number of markers below each cluster. To achieve this basic clustering, just skip step 4 in the instructions below. You can see this example on the BatchGeo marker clustering page, along with sum clustering, which adds up all values in a cluster, rather than averaging.

If these examples don’t suit what you need, you’ll likely need to dig in and write a little code yourself, though you may still be able to copy-paste some of it.

Use MarkerClusterer Library

Google Maps is essentially a standard on the web now. It’s everywhere, used by sites big and small. In fact, it’s the foundation of the BatchGeo example above. Though, when you make Google Maps yourself, you’ll need to write the code to perform some of the fancier bits.

Google provides an open source library to help turn existing Google Maps with markers into a clustered map. While you’ll need some programming background, you can find map tutorials on Google’s site. We can’t go into detail in this post about programming Google Maps, but we’ll show enough to see how the MarkerClusterer works.

The short version is that instead of making a marker like this:

var marker = new google.maps.Marker({
  position: {lat: 37.8077333, lng: -122.4750286},
  map: map
});

You add all markers to a clusterer, like this:

var marker1 = new google.maps.Marker({
  position: {lat: 37.8077333, lng: -122.4750286}
});
var marker2 = new google.maps.Marker({
  position: {lat: 37.9077333, lng: -122.5750286}
});
// Continue creating markers like above...
var markers = [marker1, marker2]; // add additional markers to the array if you have them
var markerCluster = new MarkerClusterer(map, markers);

So, instead of including the map variable in each marker, you pass map and an array of markers to the MarkerClusterer, which creates the clusters if necessary.

You’ll also notice that to create Google Maps, you must know the latitude and longitude coordinates. If you don’t already have those for your locations, you’ll need to use a geocoder to convert your addresses (and other location values) into coordinates.

Despite requiring code, using the MarkerClusterer is about as simple as you can get when building Google Maps yourself. If this is too much work, we recommend the copy-paste option above, which provides a lot of advanced mapping in a very simple approach.

However, if you want to dig even deeper, you’ll probably be writing your own clustering algorithm, or building off of other open source technology.

Write Your Own Clustering

This option is the most customizable, but obviously requires some significant coding skills. Since there are hundreds of different directions this could take, we won’t go into details here, but instead give a few resources to consider:

  • Leaflet is an open source library used by the most hardcore of web mappers
  • Leaflet.markercluster is a clustering plugin for Leaflet
  • Anycluster is server-side clustering for use with Geodjango

These and more can be found in this GitHub search for those comfortable with code.

For all others, we recommend checking out our spreadsheet to map tool right now. It’s free and has clustering built in.

Energy Production Worldwide: Who Leads in Oil, Coal, and Natural Gas?

We can thank electricity for many things, including that you’re reading this page right now. In fact, there’s a good chance the device you’ve used to access this site is running on energy created by oil, coal, natural gas, or uranium. (A small percentage of you may live in a windmill, or have a hand crank charger). Transportation, manufacturing, and most industries count on continued energy production. That varies by country, of course. Some are rich in natural resources that leads to one or more of these major energy sources. And a few are rich in most or all of them, as you’ll see on the map and in the analysis below.

View Oil, Coal, Natural Gas, and Uranium World Leaders in a full screen map

Like all BatchGeo maps, you can interact with the map markers to see the underlying data. Another powerful way to understand the data beneath is to use the grouping and filtering feature to find trends. By default, we’re showing the Rank Average, which takes a non-weighted sum of each country’s rank. For example, the United States is ranked third in oil, second in coal, first in natural gas, and ninth in uranium. That country’s ranked average is 3.75.

Top 10 Countries By Energy Production

  1. Russia (#1 in oil)
  2. United States (#1 in natural gas)
  3. China (#1 in coal)
  4. Canada (#2 in uranium)
  5. Kazakhstan (#1 in uranium)
  6. Australia (#3 in uranium)
  7. India (#3 in coal)
  8. Brazil (#10 in oil)
  9. Ukraine (#10 in uranium)
  10. Romania (#14 in uranium)

If we eliminated uranium, Indonesia would not only be in the top 10, but climb to fifth in the rankings. The southeast Asian nation is #5 in coal production and #11 for natural gas. Other specialized energy producers that don’t make the overall top 10 are:

  • Saudi Arabia (#2 in oil)
  • Iran (#3 in natural gas, #6 in oil)
  • Iraq (#4 in oil)
  • Qatar (#5 in natural gas)

Perhaps unsurprisingly, those Middle Eastern nations are so rich in oil and natural gas, they don’t rank as high with coal or uranium. We’ll see them all again in the next section.

Top 10 Oil-Producing Countries

When we think of energy production, oil is the first thing that springs to mind for many. Here are the top 10 by number of barrels produced per day.

  1. Russia (10,250,000)
  2. Saudi Arabia (10,050,000)
  3. United States (8,744,000)
  4. Iraq (4,836,000)
  5. China (3,938,000)
  6. Iran (3,920,000)
  7. Canada (3,652,000)
  8. United Arab Emirates (3,188,000)
  9. Kuwait (3,000,000)
  10. Brazil (2,624,000)

As mentioned previously—and you’ve likely anticipated—the Middle East covers half of the top 10. However, Russia narrowly edged out Saudi Arabia for the top spot, based on 2016 numbers. The U.S. rounds out the top three, followed by Iraq and China.

A couple surprising entrants in the top 10 are Canada and Brazil, both countries large in size. Canada, for example, is second only to Russia in square miles, but is 38th in population.

Top 10 Coal-Producing Countries

If you considered the popularity of energy sources by the frequency they’re written about in the news, coal would likely be second to oil. Here are the top 10 coal producers by million tonnes.

  1. China (3,747)
  2. United States (812.8)
  3. India (677.5)
  4. Australia (484.5)
  5. Indonesia (392)
  6. Russia (373.3)
  7. South Africa (252.1)
  8. Germany (184.3)
  9. Poland (135.5)
  10. Kazakhstan (106.5)

The U.S. (#2) could quadruple its production and still be second to China’s incredible coal production. This is the only category where the overall leader, Russia (#6), drops out of the top five, an order of magnitude behind China.

Top 10 Natural Gas-Producing Countries

Like oil and coal, natural gas is a fossil fuel. However, as the name states, it is a gas. By contrast, oil is a liquid and coal is a solid. Due to already being in a purer form, natural gas burns much cleaner than its fellow fossil fuels. Here are the top 10 natural gas producers by billion cubic meters.

  1. United States (728.2)
  2. Russia (578.7)
  3. Iran (255.5)
  4. Canada (143.1)
  5. Qatar (133.2)
  6. Norway (114.7)
  7. China (107.2)
  8. Saudi Arabia (103.2)
  9. Algeria (82.76)
  10. Netherlands (80.78)

The only category where the U.S. is number one, natural gas has historically been most prominent in the southwest and up through Wyoming and Colorado. Fracking technology has led to Pennsylvania and West Virginia being large producers in the last 10 years.

Again, the Middle East has a strong showing. Iran ranks higher in natural gas production than oil. Qatar, Norway, Algeria, and the Netherlands all make the top 10 in natural gas, but did not make the same list for oil. The closest is Norway at 13th and the lowest is Netherlands, 51st on the oil producers list.

What is a “Cubic Meter” of Gas?

As you might imagine, measuring a gas is more difficult than a liquid or solid. Temperature and pressurization both have an effect on how much gas fits into a cubic meter. Therefore, there are international standards governed by the International Energy Agency. When measuring the volume of natural gas, it must be at 15 °C (59 °F) at atmospheric pressure.

Top 10 Uranium-Producing Countries

The least popular of the four energy sources we’ve covered, nuclear power has a checkered past. From concerns about nuclear weapons powers to catastrophic meltdowns that cause issues for generations, uranium production is not as common as the others. That said, the top three countries overall each make an appearance in these top 10 countries by tonnes of uranium.

  1. Kazakhstan (23,800)
  2. Canada (13,325)
  3. Australia (5,654)
  4. Niger (4,116)
  5. Russia (3,055)
  6. Namibia (2,993)
  7. Uzbekistan (2,385)
  8. China (1,616)
  9. United States (1,256)
  10. Ukraine (1,200)

At almost two times China’s production, Kazakhstan leads the way. The former Soviet country is both a major exporter, as well as having one of the largest reserves. The country is also a major producer of fossil fuels, which puts it fifth overall. In fact, only three of the top 10 uranium producers don’t make the top 10 overall: Niger, Namibia, and Uzbekistan.

Create a Map of World Leaders

Plotting data on a map is one of the best ways to understand the story in the numbers. Find a table of data on Wikipedia or a government website, and it could be mapped with a simple copy and paste. We show details in our open data mapping tutorial.

Already have some data in mind? Create a map now.

The No Code Custom Google Maps Marker Icons With Colors and Images

These days it’s easier than ever to create a map on the web. For thousands of years maps were difficult and people spent their whole lifetimes exploring and studying to improve their maps. Thankfully you don’t need to set sail for an unknown destination, or even leave your computer, to build a map today. Now there is Google Maps to add a map to your site with a few lines of code, or even no code at all.

One of the things that has made maps easier is that you can build upon a base map chosen by experts. Back in the days of exploration, every map was a new map. That means each map was different than another, but it also meant each map project began anew. By using Google Maps, we can let your map stand out by the data you put upon it via map markers.

This post will show how to further customize your map with different colors, labels, and graphics in your map markers. Even better, most of these examples require absolutely zero code.

Easy Single Color Marker Maps

The most basic map you can have has icons that all are the basic Google Maps marker you’re probably familiar with. It’s an reverse teardrop, reddish icon with a black dot in the center. Like this: Google Maps default marker

We’re looking to create customized markers here, so we’ll toss that guy out the window. It’s still best to have the marker look familiar, such as maintaining the same shape. At a minimum, you want to choose a color that jumps out from the map behind it, so your marker will be recognizable. The map we’ll create in this example will give you customizable choices, while also fulfilling the requirements of a good web map.

  1. The first thing you’ll need is a list of locations you want to map. We’ve found just about everyone has a list of their friends’ addresses, perhaps used to send holiday cards.
  2. If it’s in a spreadsheet, you’re ready to simply copy-paste them into this custom map maker
  3. Paste your data into the box, then click “Validate and set options”
  4. For our simple map, “group by” should be set to “Single Color”
  5. Click “Show Advanced Options” and you’ll see some pretty great customization alternatives
    Custom map options
  6. Click into the existing color to select from the seven color options (10 choices for BatchGeo Pro)

View Holiday Card List (no grouping) in a full screen map

You can also change the type of marker we used. You can see in the map above, I chose orange circle markers. This map looks very different than most that are out there, but is still easily readable and explorable. Once saved (email required to send you a link to make future edits), you’ll be able to link the map to others, or even embed in your own website.

Change Markers Based on Data

The first example showed you how to create a simple custom map. The shape and color of the markers go a long way! Where maps really begin to tell a story is when the markers change based on the other data in the map. The most basic map data may only be a list of addresses. But often, our spreadsheets have many different columns. You may have sales data, home prices, or even restaurant health ratings, to name three examples.

The holiday card list included a “type” column, which we used to describe rich, famous, and fictional friends (we keep strange company). A fun customized map would include a different color to represent each of the three friend types. Let’s do it!

  1. Follow the steps from above to create your map, clicking “Validate and set options”
  2. Here we want the “group by” to be set to “Type”
  3. Click “Show Advanced Options” and this time we’ll be able to select a color for each type of friend
    Multiple marker colors

Now we’re creating a map that is very different than many that would have required you to write a bunch of code.

View Holiday Card List in a full screen map

People using the map can even choose to show only certain types. Click the name in the bottom and the map automatically filters to only the colors/types selected. Using these simple tools, you can create customized, interactive maps that will help others understand the data beneath the map.

Fully Customizable Map Markers (Requires Code)

Changing colors and shapes is great, but sometimes you want something even more custom. If you’d like to change the icon itself, you likely need to write some code. Google has some great examples on its site to get you started. Here’s the basic gist of a custom marker for a Google Map:

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(37.8077333, -122.4750286),
  icon: "http://maps.google.com/mapfiles/ms/micons/truck.png",
  map: map
});

These few lines of code uses JavaScript and the Google Maps API to create a marker object with three attributes:

  1. The position of the marker on the map, declared by latitude and longitude coordinates
  2. A URL to an image you want to use as the icon (find more here)
  3. The pre-existing map object (declared elsewhere in code) where you want to put the icon

You would need to repeat this code for every place you want to add to your map. To do this, you’ll need to have the coordinates for each location. If you don’t have them, you’d need to perform your own geocoding. Finally, you’d need to have your own website to load up this code.

If it sounds advanced, it is. In order to have full customization of a map, this is the only real option for map makers. Unless you’re comfortable in code, or have the time to learn, we’d recommend using one of the non-code options we’ve described.

Other Ways to Customize with BatchGeo

The custom map making tool we showed earlier has some other pretty great features in addition to changing marker shapes and colors. You can also label markers with letters or numbers, which can be used in tandem with the map data, optionally displayed below the map.
https://batchgeo.com/

View Scary Place Names for Halloween in a full screen map

Or simply change the base map itself. There are six map styles to completely change the colors from the typical Google Map. You can see a dark example we used above for the Halloween-themed Frightening Places in the US.

Explore more BatchGeo features or make your first map now.