I'm trying to use Papa Parse and Leaflet to read a csv file and display the points on a map. There are 6 categories in the csv: title, image, description, url, lat, lng. In that order.
Pretty new to HTML in general, but after several hours of searching I cannot figure out what is wrong with the below code.
<!DOCTYPE html>
<html>
<head>
<title>CSVExtract</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js" integrity="sha512-dfX5uYVXzyU8+KHqj8bjo7UkOdg18PaOtpa48djpNbZHwExddghZ+ZmzWT06R5v6NSk3ZUfsH6FNEDepLx9hPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
Papa.parse('my.csv', {
header: true,
download: true,
dynamicTyping: true,
complete: function (results) {
results.data.forEach(function (row) {
var marker = L.marker([row.lat, row.lng]).addTo(map);
var popupContent = "<h3>" + row.title + "</h3>" +
"<img src='" + row.image + "' alt='Marker Image'>" +
"<p>" + row.description + "</p>" +
"<a href='" + row.url + "' target='_blank'>More Info</a>";
marker.bindPopup(popupContent);
});
}
});
</script>
</body>
</html>
I tried to use a different software (csv parser) and got no results either. The map is being displayed, but the markers on the map are not.
Appreciate any advice on this.