├── LICENSE
├── README.md
├── data.csv
├── index.html
└── leaflet-map-csv.png


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Hands-On Data Visualization
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # leaflet-map-csv
 2 | Build a simple Leaflet map with point markers from a CSV file.
 3 | 
 4 | ![Screenshot](leaflet-map-csv.png)
 5 | 
 6 | ## Demo
 7 | https://handsondataviz.github.io/leaflet-map-csv/
 8 | 
 9 | Sample data of select universities and colleges around CT by HandsOnDataViz.
10 | 
11 | ## Make your own
12 | 
13 | 1. Press **Use this template** button to create a copy of this repository in your own GitHub account.
14 | 2. Put your point data data inside `data.csv`. The only relevant columns that will be read by the template
15 | are `Latitude`, `Longitude`, and `Title` (displayed in a popup). Sample data:
16 | ```
17 | Title,Latitude,Longitude
18 | Trinity College,41.745167,-72.69263
19 | Wesleyan University,41.55709,-72.65691
20 | ```
21 | 
22 | For more information on customization, see [Leaflet documentation](https://leafletjs.com/).
23 | 
24 | ## HandsOnDataViz Tutorial
25 | https://handsondataviz.org/leaflet-maps-with-csv.html
26 | 
27 | ## See other Leaflet templates
28 | * [Simple Leaflet map](https://github.com/HandsOnDataViz/leaflet-map-simple)
29 | * [Leaflet map with open data APIs](https://github.com/HandsOnDataViz/leaflet-maps-open-data-apis)
30 | * [Leaflet map with data from Socrata](https://github.com/HandsOnDataViz/leaflet-socrata)
31 | * [Leaflet polygon map with tabs](https://github.com/HandsOnDataViz/leaflet-map-polygon-tabs)
32 | * [Leaflet heatmap](https://github.com/HandsOnDataViz/leaflet-heatmap)
33 | * [Searcheable Map Template](https://github.com/HandsOnDataViz/searchable-map-template-csv)
34 | * [Leaflet Maps with Google Sheets](https://github.com/HandsOnDataViz/leaflet-maps-with-google-sheets)
35 | * [Leaflet Storymaps with Google Sheets](https://github.com/HandsOnDataViz/leaflet-storymaps-with-google-sheets)
36 | 


--------------------------------------------------------------------------------
/data.csv:
--------------------------------------------------------------------------------
 1 | Group,Title,Image,Description,Address,Latitude,Longitude,Found Address,Match Quality,Source
 2 | a,Trinity College,https://www.edx.org/sites/default/files/trinity1.jpg,"Not in the link <a href=""http://www.trincoll.edu"" target=""_blank"">view website</a> more not in the link","300 Summit St, Hartford CT 06106",41.745167,-72.69263,"300 SUMMIT ST, HARTFORD, CT, 06106",Exact,US Census
 3 | a,Wesleyan University,https://upload.wikimedia.org/wikipedia/commons/4/41/You_are_here_-_T-shirt.jpg,"<a href=""http://wesleyan.edu"" target=""_blank"">view website</a>",45 Wyllys Ave Middletown CT 06459,41.55709,-72.65691,"45 WYLLYS AVE, MIDDLETOWN, CT, 06459",Exact,US Census
 4 | a,Connecticut College,https://upload.wikimedia.org/wikipedia/commons/4/41/You_are_here_-_T-shirt.jpg,"<a href=""http://conncoll.edu"" target=""_blank"">view website</a>","270 Mohegan Ave, New London CT",41.381435,-72.10469,"270 MOHEGAN AVE PKWY, NEW LONDON, CT, 06320",Match,US Census
 5 | a,Yale University,https://upload.wikimedia.org/wikipedia/commons/4/41/You_are_here_-_T-shirt.jpg,"<a href=""http://yale.edu"" target=""_blank"">view website</a>",149 Elm St New Haven CT,41.309155,-72.92635,"149 ELM ST, NEW HAVEN, CT, 06511",Match,US Census
 6 | a,University of Connecticut-Storrs,https://upload.wikimedia.org/wikipedia/commons/4/41/You_are_here_-_T-shirt.jpg,"<a href=""http://uconn.edu"" target=""_blank"">view website</a>","369 Fairfield Way, Storrs CT 06269",41.80665,-72.25352,"369 FAIRFIELD RD, STORRS, CT, 06269",Match,US Census
 7 | a,Capital Community College,https://upload.wikimedia.org/wikipedia/commons/4/41/You_are_here_-_T-shirt.jpg,"<a href=""http://capitalcc.edu"" target=""_blank"">view website</a>",950 Main St Hartford CT,41.69861,-72.72414,"950 MAIN ST, HARTFORD, CT, 06111",Match,US Census
 8 | b,Dinosaur State Park,https://upload.wikimedia.org/wikipedia/commons/4/41/You_are_here_-_T-shirt.jpg,"<a href=""www.dinosaurstatepark.org/"" target=""_blank"">view website</a>",400 West St Rock Hill CT 06067,41.652546,-72.65743,"400 WEST ST, ROCKY HILL, CT, 06067",Match,US Census
 9 | b,Hammonasset State Park,https://upload.wikimedia.org/wikipedia/commons/4/41/You_are_here_-_T-shirt.jpg,"<a href=""www.ct.gov/deep/hammonasset"" target=""_blank"">view website</a>","1288 Boston Post Road, Madison CT 06443",41.273247,-72.56934,"1288 BOSTON POST RD, MADISON, CT, 06443",Match,US Census
10 | c,State Capitol Building,https://upload.wikimedia.org/wikipedia/commons/4/41/You_are_here_-_T-shirt.jpg,State government office,"210 Capitol Ave, Hartford CT 06106",41.762848,-72.68245,"210 CAPITOL AVE, HARTFORD, CT, 06106",Exact,US Census


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>leaflet-map-csv</title>
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta charset="utf-8">
 7 | 
 8 |   <!-- Load Leaflet code library - see updates at http://leafletjs.com/download.html -->
 9 |   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
10 |   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
11 | 
12 |   <!-- Load jQuery and PapaParse to read data from a CSV file -->
13 |   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
14 |   <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
15 | 
16 |   <!-- Position the map with Cascading Style Sheet (CSS) -->
17 |   <style>
18 |     body { margin:0; padding:0; }
19 |     #map { position: absolute; top:0; bottom:0; right:0; left:0; }
20 |   </style>
21 | 
22 | </head>
23 | <body>
24 | 
25 |   <!-- Insert HTML division tag to layout the map -->
26 |   <div id="map"></div>
27 | 
28 |   <!-- Insert Javascript (.js) code to create the map -->
29 |   <script>
30 | 
31 |   // Set up initial map center and zoom level
32 |   var map = L.map('map', {
33 |     center: [41.57, -72.69], // EDIT latitude, longitude to re-center map
34 |     zoom: 9,  // EDIT from 1 to 18 -- decrease to zoom out, increase to zoom in
35 |     scrollWheelZoom: false,
36 |     tap: false
37 |   });
38 | 
39 |   /* Control panel to display map layers */
40 |   var controlLayers = L.control.layers( null, null, {
41 |     position: "topright",
42 |     collapsed: false
43 |   }).addTo(map);
44 | 
45 |   // display Carto basemap tiles with light features and labels
46 |   var light = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
47 |     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
48 |   }).addTo(map); // EDIT - insert or remove ".addTo(map)" before last semicolon to display by default
49 |   controlLayers.addBaseLayer(light, 'Carto Light basemap');
50 | 
51 |   /* Stamen colored terrain basemap tiles with labels */
52 |   var terrain = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {
53 |     attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
54 |   }); // EDIT - insert or remove ".addTo(map)" before last semicolon to display by default
55 |   controlLayers.addBaseLayer(terrain, 'Stamen Terrain basemap');
56 | 
57 |   // see more basemap options at https://leaflet-extras.github.io/leaflet-providers/preview/
58 | 
59 |   // Read markers data from data.csv
60 |   $.get('./data.csv', function(csvString) {
61 | 
62 |     // Use PapaParse to convert string to array of objects
63 |     var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
64 | 
65 |     // For each row in data, create a marker and add it to the map
66 |     // For each row, columns `Latitude`, `Longitude`, and `Title` are required
67 |     for (var i in data) {
68 |       var row = data[i];
69 | 
70 |       var marker = L.marker([row.Latitude, row.Longitude], {
71 |         opacity: 1
72 |       }).bindPopup(row.Title);
73 |       
74 |       marker.addTo(map);
75 |     }
76 | 
77 |   });
78 | 
79 |   map.attributionControl.setPrefix(
80 |     'View <a href="https://github.com/HandsOnDataViz/leaflet-map-csv" target="_blank">code on GitHub</a>'
81 |   );
82 | 
83 |   </script>
84 | </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/leaflet-map-csv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HandsOnDataViz/leaflet-map-csv/cd6ac06fdcee19c84e12950096b2146eb01c7680/leaflet-map-csv.png


--------------------------------------------------------------------------------