Heatmap of Farmers Markets in the US

Where are farmers markets most popular? Graphically representing the locations of farmers markets in the United States provides a simple and straightforward way of answering this question.

This heatmap was created using the OpenLayers heatmap layer. The farmers markets data, available here, is from the U.S. Government's Open Data website, www.data.gov, and is provided by the US Department of Agriculture. This data set includes over 8,000 locations, all voluntary and self-reported. As a result, this does not represent every farmers market in the U.S.

Preparing the data.

Before I could start creating a heatmap, I had to make sure the data was complete enough to create the visualization. First, I verified that all of the states in the file were actually states. I found multiple rows containing misspelled states: Calafornia, Miinesota, and Virigina. I corrected these misspellings and continued cleaning up the data by looking at the longitude and latitude coordinates. Since this is what I would be using to plot the data on the heatmap, it was important to make sure that every farmers market location had a pair of coordinates.

The data set contains over 8,000 points and the easiest way to verify the coordinates was by state. So for each state, I glanced through all of the points and looked for two things: blank fields or coordinates that were way off from the others. For both cases, I used the coordinates for the town or cross streets of the farmers market. If the original coordinates were incorrect, I still looked to see where they were pointing. Most of them had longitude and latitude reversed, but some were totally incorrect, pointing to Australia or Europe.

Creating the KML file.

The source for the heatmap layer is a KML file of all of the coordinates. KML, Keyhole Markup Language, is an XML-based file format used to express geographic data. Below is an excerpt from the KML file that I constructed:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Folder>   
      <Placemark>
        <Point>
          <coordinates>-76.135361,36.841885,0</coordinates>
        </Point>
      </Placemark>
    </Folder>
  </Document>
</kml>

It starts with an XML header and a KML namespace declaration. This is followed by the Document and Folder elements that are used as a way to group the contents, in this case the coordinates, together. The Placemark element, followed by a Point element, is what places the following coordinates element on the map. The coordinates element defines the position of the Placemark in terms of longitude, latitude, and altitude.

With over 8,000 coordinate points, there was no way I was going to spend the time and go through each line and add the correct elements to each one. So I created a CSV file and copied over the longitudes and latitudes, and I added an altitude column of just 0s. I opened this in Vim and recorded a macro to place the Placemark, Point, and coordinates elements to the beginning and end of the first line. I then played the macro 8,200 times to get every line.

Creating the JavaScript code.

The heatmap is defined using OpenLayers' JavaScript map and layer variables. Below is the farmer-markets-heatmap.js file that I created to display the KML source of coordinates onto a map.

var mapLayer = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'toner'
  })
});

var heatmapLayer = new ol.layer.Heatmap({
  source: new ol.source.KML({
    extractStyles: false,
    url: 'data/US_Farmers_Markets.kml',
    projection: 'EPSG:3857'
  }),
  radius: 2
});

var map = new ol.Map({
  target: 'map',
  layers: [mapLayer, heatmapLayer],
  controls: [new ol.control.Attribution()],
  view: new ol.View({
    center: ol.proj.transform([-92.5000, 38.5000], 'EPSG:4326', 'EPSG:3857'),
    zoom: 3.5
  })
}); 

The first variable, mapLayer, defines the map tiles. I picked Stamen's black and white Toner map as the background. This will allow the colors of the heatmap to be visible without any disruptions.

The next variable is the heatmapLayer. This layer takes a KML source of latitude, longitude, and altitude coordinates and plots them onto a Spherical Mercator projection.

The final variable, map, creates the OpenLayers Map object. This consists of the two layers, mapLayer and heatmapLayer, and gets projected onto the map. The center point and zoom level are defined in view. The center point is specified as latitude and longitude values and then are translated into the Spherical Mercator projection.

Conclusions.

As the map shows, there are farmers markets in each of the contiguous 48 states. When zoomed in, it becomes clear which cities host farmers markets and how much more popular they are in the major cities than in the smaller towns.

The JavaScript and KML files for this farmers markets heatmap are located on GitHub.

Search Post

Label :