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 = 'block';
document.getElementById('map').style.display = 'block';
// Initialize map
map = L.map('map', {
center: [41.5, -88.1],
zoom: 9,
scrollWheelZoom: true,
tap: true
});
/* 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');
// 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];
// Lat = Y Long = X
var marker = L.marker([row.ShapeX, row.ShapeY], {
opacity: 1
}).bindPopup(row.Match_addr);
marker.addTo(map);
}
};
reader.readAsText(file);
});
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;
}
<!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/
[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/
[email protected]/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/
[email protected]/papaparse.min.js"></script>
</head>
<body>
<!-- File upload interface -->
<div id="upload-container">
<div id="upload-box">
<h2>Upload CSV File</h2>
<input type="file" id="file-input" accept=".csv">
</div>
</div>
<!-- Insert HTML division tag to layout the map -->
<div id="map"></div>
</body>
</html>
