Leaflet Maps with CSV Data

Figure 13.35 shows a simple point map of some colleges and universities in Connecticut. But instead of individually creating markers in JavaScript using Leaflet’s L.marker() function, the point data is stored in a local CSV file (data.csv) that is easy to modify in Excel or any text editor. Each time the map is loaded by the browser, point data from the CSV file is read and markers are generated “on the fly”.

Figure 13.35: Explore the interactive Leaflet point map with CSV data.

You can adapt this template to create your own point map by following these instructions:

  1. Visit the GitHub repo that stores the code for this template. Make sure you are logged in, and press Use this template button to create a copy of this repository in your own GitHub account.
  2. Put your point data inside data.csv. The only relevant columns that will be read by the template are Latitude, Longitude, and Title. The first two determine the location of the marker, and the last one is displayed in a popup. The order of columns does not matter. There can be other columns in the dataset, but they will be ignored.

Your data can look like the following:

Title,Latitude,Longitude
Trinity College,41.745167,-72.69263
Wesleyan University,41.55709,-72.65691
  1. Depending on the geography of your points, you will want to change the default position of the map on start. In index.html, find the <script> tag, and edit the following chunk of code:
var map = L.map('map', {
  center: [41.57, -72.69], // Default latitude and longitude on start
  zoom: 9,  // Between 1 and 18; decrease to zoom out, increase to zoom in
  scrollWheelZoom: false
});

We used default Leaflet markers for code simplicity, but you may want to use custom icons instead. The code snippet below can give you an idea how to

var marker = L.marker([row.Latitude, row.Longitude], {
  opacity: 1,
  // Customize your icon
  icon: L.icon({
    iconUrl: 'path/to/your/icon.png',
    iconSize: [40, 60]
  })
}).bindPopup(row.Title);

For more information on icon customization, see this helpful Leaflet example.