OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Display Marker Using Latitude And Longitude From SQL Database With Leaflet Map In ASP.NET CORE MVC

  • Thread starter Thread starter addsw
  • Start date Start date
A

addsw

Guest
for my website, I am using ASP.net Core MVC on Visual Studios 2019 and SQL Server Management Studio for my database.

I am trying to display markers using data(Latitude and Longitude) from my Database onto a Leaflet map. I came across a website providing a solution for this. However, it was using ASP.net instead of Asp.net Core.

Which parts of the code do I have to change for it to work on my side?

Controller:

Code:
using System;    
using System.Collections.Generic;    
using System.Data;    
using System.Data.Entity;    
using System.Linq;    
using System.Net;    
using System.Web;    
using System.Web.Mvc;    
using WebApplication1.Models;    
    
    
namespace WebApplication1.Controllers    
{    
    public class MapsController : Controller    
    {    
        private test2Entities db = new test2Entities();    
    
        // GET: Maps    
        public ActionResult Index()    
        {    
            return View(db.Maps.ToList());    
        }    
  
        #region [Map]    
        [HttpPost]    
        public JsonResult GetMap()    
        {    
            var data1 = Map();    
            return Json(data1, JsonRequestBehavior.AllowGet);    
        }    
        public IEnumerable<Map> Map()    
        {    
            return (from p in db.Maps    
                    select new    
                    {    
                        Name = p.Name,    
                        Latitude = p.Latitude,    
                        Longitude = p.Longitude,    
                        Location = p.Location,    
                        Description = p.Description,    
                        Id = p.Id    
                    }).ToList()    
                .Select(res => new Map    
                {    
                    Name = res.Name,    
                    Latitude = res.Latitude,    
                    Longitude = res.Longitude,    
                    Location = res.Location,    
                    Description = res.Description,    
                    Id = res.Id        
                });        
        }    
        #endregion        
    }  
}

View:

Code:
@model IEnumerable<WebApplication1.Models.Map>    
    
@{    
    Layout = null;    
}    
    
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />    
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2'></script>    
    
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>    
    
<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>    
    
<script type="text/javascript">    
    
$(document).ready(function () {    
    var map = L.map('map', {    
    
        center: [10.1102278, 77.8958904],    
          minZoom: 4,    
          zoom: 6    
    });    
                $.ajax({    
                    type: "POST",    
                    url: '/Maps/GetMap',    
                    success: function (data) {    
                        var result = JSON.stringify(data);    
    
                        for (var i = 0; i < result.length; ++i) {    
                            var popup ='<b>Name:</b> '+ data[i].Name +    
                            '<br/><b>Latitude:</b> ' + data[i].Latitude +    
                              '<br/><b>Longitude:</b> ' + data[i].Longitude+    
                           '<br/><b>Location:</b> ' + data[i].Location;    
    
    
                            L.marker([data[i].Latitude, data[i].Longitude])    
                                .bindPopup(popup)    
                               .addTo(map);    
                        }    
    
                    },    
                    error: function (xhr) {    
    
                        console.log(xhr.responseText);    
                        alert("Error has occurred..");    
                    }    
                });    
    
                L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {    
                    attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',    
                    subdomains: ['otile1', 'otile2', 'otile3', 'otile4']    
                }).addTo(map);    
    
            });    
    
</script>

<p>for my website, I am using ASP.net Core MVC on Visual Studios 2019 and SQL Server Management Studio for my database.</p>
<p>I am trying to display markers using data(Latitude and Longitude) from my Database onto a Leaflet map. I came across a website providing a solution for this. However, it was using ASP.net instead of Asp.net Core.</p>
<p>Which parts of the code do I have to change for it to work on my side?</p>
<p>Controller:</p>
<pre><code>using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;


namespace WebApplication1.Controllers
{
public class MapsController : Controller
{
private test2Entities db = new test2Entities();

// GET: Maps
public ActionResult Index()
{
return View(db.Maps.ToList());
}

#region [Map]
[HttpPost]
public JsonResult GetMap()
{
var data1 = Map();
return Json(data1, JsonRequestBehavior.AllowGet);
}
public IEnumerable<Map> Map()
{
return (from p in db.Maps
select new
{
Name = p.Name,
Latitude = p.Latitude,
Longitude = p.Longitude,
Location = p.Location,
Description = p.Description,
Id = p.Id
}).ToList()
.Select(res => new Map
{
Name = res.Name,
Latitude = res.Latitude,
Longitude = res.Longitude,
Location = res.Location,
Description = res.Description,
Id = res.Id
});
}
#endregion
}
}
</code></pre>
<p>View:</p>
<pre><code>@model IEnumerable<WebApplication1.Models.Map>

@{
Layout = null;
}

<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2'></script>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>

<script type="text/javascript">

$(document).ready(function () {
var map = L.map('map', {

center: [10.1102278, 77.8958904],
minZoom: 4,
zoom: 6
});
$.ajax({
type: "POST",
url: '/Maps/GetMap',
success: function (data) {
var result = JSON.stringify(data);

for (var i = 0; i < result.length; ++i) {
var popup ='<b>Name:</b> '+ data.Name +
'<br/><b>Latitude:</b> ' + data.Latitude +
'<br/><b>Longitude:</b> ' + data.Longitude+
'<br/><b>Location:</b> ' + data.Location;


L.marker([data.Latitude, data.Longitude])
.bindPopup(popup)
.addTo(map);
}

},
error: function (xhr) {

console.log(xhr.responseText);
alert("Error has occurred..");
}
});

L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
}).addTo(map);

});

</script>
</code></pre>
 
Top