Leaflet Maps with CSV Data
Figure 13.35 shows a simple point map of some colleges and universities
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”.
You can adapt this template to create your own point map by following these instructions:
- 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.
- 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
- 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:
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
For more information on icon customization, see this helpful Leaflet example.