The Data

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSV to Heatmap</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script> <div id="map" style="width: 1200px; height: 800px"></div> <script type="text/javascript"charset="utf-8"> //let's read the csv file. if this is finished we call the function to show it on the map. $(document).ready(function() { $.ajax({ type: "GET", url: "2.5_month.csv", dataType: "text", success: function(data){displayData(data)} }); }); //now the function that is called after the file was loaded function displayData(Text){ alert(Text); //here comes the leaflet standard for the basemap: var map = L.map('map').setView([0, 0], 2); var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', { attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, example by <a href="https://digital-geography.com.www378.your-server.de/diggeo">digital-geography.com</a>' }).addTo(map); } </script> This is our CSV to heatmap! See the alert for the data. </body> </html>

alert(Text);

data = $.csv.toObjects(Text);

Visualizing the Data as Heatmap

<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>

data_array= [0,0,0]; //create it before filling for (i = 0; i < data.length; i++) { data_array[i] = [parseFloat(data[i].Latitude), parseFloat(data[i].Longitude), parseFloat(data[i].Magnitude)]; // if values are marked as string in the object else: // data_array[i] = [data[i].lat,data[i].lon,data[i].val]; };

var heat = L.heatLayer(data_array,{ radius: 15, blur: 20, maxZoom: 6, }).addTo(map);

There are so many applications out there but they probably share one thing: export your data as a XXX-delimited table. And it’s also very easy to create a comma-separated text file out of it. You also have some lat/lon values in this table? Great! Let’s make a heatmap with leaflet.For our heatmap we will need a comma separated table with two columns representing the latitudes and longitudes of our rows/observations/points. So let us take this nice file from the USGS as an example (I know they have GeoJSON 😉 ):I am not an JS expert but to get this data in my webapp I use the following code in the index.html. I already add all the leaflet js files and initial coding I need as well:As you see, we call a function at the end of the file loading. Of course we can also do something else in the function when the data was loaded succesfully. Especially for leaflet it is good to have a real JS Object. Instead ofLet’s create this JS Object by replacing this line with:Now look in the code inspector: We have a nice Javascript object in our DOM of the page:So how to get a heatmap out of the CSV file? As you may have noticed I’ve already added a heatmap plugin for leaflet by placing this line in the body of the page:This works directly on Javascript arrays so what we will do is to create a new array out of the JS object. As the example CSV marks the latitude and longitude as well as the magnitude as strings we also need to parse them into real values:This new array will serve as the input for our heatmap:That’s it! I fxxxing love leaflet and its plugins. See the result here:BTW: Does anyone know what is goin on there in Oklahoma (USA)?