Thank you so much i had a challenge loading leaflet library but i had a work around but i used this and worked well.
Made changes on the script too.
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<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>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script type="text/javascript" src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh;"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var map = L.map('map').setView([0, 0], 4); // Set initial map center and zoom level
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Add markers for each coordinate with popups
@foreach (var mapData in Model)
{
<text>
var marker = L.marker([@mapData.latitude, @mapData.longitude]).addTo(map);
marker.bindPopup("Nom Lieu Public: @mapData.nom_lieu_public<br>Latitude: @mapData.latitude<br>Longitude: @mapData.longitude<br>Nom Village: @mapData.nom_village").openPopup();
</text>
}
</script>
</body>
</html>
Controller
public ActionResult Index()
{
List<vm_lieu_public> mapData = new List<vm_lieu_public>();
string conString = DataManager.ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM vm_lieu_public", con))
{
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
mapData.Add(new vm_lieu_public
{
nom_lieu_public = sdr["nom_lieu_public"].ToString(),
latitude = Convert.ToDecimal(sdr["latitude"]),
longitude = Convert.ToDecimal(sdr["longitude"]),
nom_village = sdr["nom_village"].ToString()
});
}
}
con.Close();
}
}
return View(mapData);
}
