Integrating Leaflet with ASP .NET MVC?

Question

I am trying to use Leaflet (https://leafletjs.com/) javascript library in a project built on ASP .NET MVC5.

For the sake of simplicity, let's just say I am trying to run the following code (provided by this tutorial: https://leafletjs.com/examples/crs-simple/crs-simple.html) on a view (Index.cshtml), which uses a predefined layout (_Layout.cshtml):

Index.cshtml

<style>
 #map {
 height: 600px;
}
</style>
<div id="map"></div>
<script>
 var map = L.map('map', {
 crs: L.CRS.Simple,
 minZoom: -5
 });
 var bounds = [[0,0], [1000, 1000]];
 var image = L.imageOverlay('aMap.PNG', bounds).addTo(map);
 map.fitBounds(bounds);
</script>

In the layout view, I placed the following code in the head of the HTML code, as instructed by these guidelines: https://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>

But this doesn't work and I can see that the library is not recognized even by Intellisense.

I have also tried downloading the package and as indicated, I added the files to the project, but having in mind the MVC project structure, I added the leaflet.css file to the Content folder and the rest of the js files to the Scripts folder. And in the layout view, I added:

<link rel="stylesheet" href="~/Content/leaflet.css" />
<script src="~/Scripts/leaflet.js"></script>

Now, Intellisense recognizes the library but still, when running the project the map is not shown in the view.

Am I missing something obvious here, maybe an import?

I am a beginner at using .NET framework and the ASP .NET MVC structure and I am still trying to figure out my way across this framework.

---

Realized I was loading from the Index view so leaflet.js was not being loaded first.

I can now see the leaflet map section but the PNG image is not being loaded. I believe leaflet is not being able to find so where should I place the image in the project structure? I tried placing it in the Content and Scripts folder but no luck.

• Piskr: Hello and welcome to GIS SE, could you provide any errors in the Console of your browser?
• Sfmar: Hello @Piskr! Thanks for replying. In the console from my browser, I got this error: ReferenceError: L is not defined
• Piskr: If you inspect the whole webpage, are there any links for leaflet script? Because the error means that you don't have the library in the html. Try adding it directly to the view
• Sfmar: @Piskr Realized I was loading from the Index view so leaflet.js was not being loaded first. I can now see the leaflet map section but the PNG image is not being loaded. I believe leaflet is not being able to find so where should I place the image in the project structure? I tried placing it in the Content and Scripts folder but no luck.
• Piskr: Did you try to add actual path to the PNG file?

Answer 1

Solved my first problem as already mentioned in the update: I was loading directly from the Index view which didn't enable leaflet.js to load first.

Concerning the problem loading the image, I found the correct path to place it by analysing the path the GET method was using to retrieve the image, which was simply on the main folder of the project, among other folders like Contents, Models, etc.

• Piskr: PS: You can also accept an answer if it solved your problems...
• Sfmar: I tried accepting but it says I can only accept in 2 days and I can only upvote the above comments.