Created
January 7, 2026 01:59
-
-
Save chaseleinart/c4c417c93ffa04bebc48bc2e0a3516c0 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>leaflet-map-csv</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta charset="utf-8"> | |
| <!-- Load Leaflet code library - see updates at http://leafletjs.com/download.html --> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> | |
| <!-- Load jQuery and PapaParse to read data from a CSV file --> | |
| <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script> | |
| <!-- Position the map with Cascading Style Sheet (CSS) --> | |
| <style> | |
| body { margin:0; padding:0; font-family: Arial, sans-serif; } | |
| #map { position: absolute; top:0; bottom:0; right:0; left:0; display: none; } | |
| #upload-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background: #f5f5f5; | |
| } | |
| #upload-box { | |
| background: white; | |
| padding: 40px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| text-align: center; | |
| } | |
| #file-input { | |
| margin: 20px 0; | |
| padding: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- File upload interface --> | |
| <div id="upload-container"> | |
| <div id="upload-box"> | |
| <h2>Upload CSV File</h2> | |
| <p>Select a CSV file with x, y coordinates to display on the map</p> | |
| <input type="file" id="file-input" accept=".csv"> | |
| </div> | |
| </div> | |
| <!-- Insert HTML division tag to layout the map --> | |
| <div id="map"></div> | |
| <!-- Insert Javascript (.js) code to create the map --> | |
| <script> | |
| var map, controlLayers; | |
| // Handle file upload | |
| document.getElementById('file-input').addEventListener('change', function(e) { | |
| var file = e.target.files[0]; | |
| if (!file) return; | |
| // Hide upload interface, show map | |
| document.getElementById('upload-container').style.display = 'none'; | |
| document.getElementById('map').style.display = 'block'; | |
| // Initialize map | |
| map = L.map('map', { | |
| center: [41.57, -72.69], | |
| zoom: 9, | |
| scrollWheelZoom: false, | |
| tap: false | |
| }); | |
| /* Control panel to display map layers */ | |
| controlLayers = L.control.layers( null, null, { | |
| position: "topright", | |
| collapsed: false | |
| }).addTo(map); | |
| // display Carto basemap tiles with light features and labels | |
| var light = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attribution">CARTO</a>' | |
| }).addTo(map); | |
| controlLayers.addBaseLayer(light, 'Carto Light basemap'); | |
| /* Stamen colored terrain basemap tiles with labels */ | |
| var terrain = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', { | |
| 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>.' | |
| }); | |
| controlLayers.addBaseLayer(terrain, 'Stamen Terrain basemap'); | |
| // Read the uploaded CSV file | |
| var reader = new FileReader(); | |
| reader.onload = function(event) { | |
| var csvString = event.target.result; | |
| // Use PapaParse to convert string to array of objects | |
| var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data; | |
| // For each row in data, create a marker and add it to the map | |
| for (var i in data) { | |
| var row = data[i]; | |
| var marker = L.marker([row.Latitude, row.Longitude], { | |
| opacity: 1 | |
| }).bindPopup(row.Title); | |
| marker.addTo(map); | |
| } | |
| }; | |
| reader.readAsText(file); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment