I have a leaflet map that should show some locations in Germany in the form of points. I have tried in the code below to add the csv file I have stored locally in my system but I do not see any points on my map. I have a data that has Latitude and Longitude in it. I am using these two columns to display them on map but I have no success. I would really appreciate if somebody can tell me what is wrong with my code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<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>
<style>
#mapid { height: 880px; }
</style>
<title>OSM and Leaflet</title>
</head>
<body>
<div id="mapid"></div>
<script>
const map = L.map('mapid').setView([50.875, 9.141], 6);
const attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const tiles = L.tileLayer(tileUrl, {attribution});
tiles.addTo(map);
//const marker = L.marker([50.875, 9.141]).addTo(map);
$.get('./data.csv', function(csvString) {
// 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 each row, columns `Latitude`, `Longitude`, and `Title` are required
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);
}
});
/*marker.bindPopup('<h1>hello</h1>');
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function(event){
marker.closePopup();
});*/
</script>
</body>
</html>
