Leafllet integration 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? Please bear with me if the answer is simple, but 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.

UPDATE

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.

"my for loop sets i to the max value instantly."...have you debugged this using your browser tools? Any errors in the console? Have you stepped through with the browser's debugger? — ADyson
– ADyson, Commented Nov 9, 2018 at 14:42
@ADyson I am sorry, but I didn't understand your first statement in the context of my question.. Error in my console is the following: ReferenceError: L is not defined — Sfmar
– Sfmar, Commented Nov 9, 2018 at 15:18
It is true that in your code shown you have not defined any variable called L before trying to run the "map" function against it. Is this a constant which should be defined by leaflet.js? Possibly the JS file has not loaded before you try to run this code. Check your browser's network tools when you load the page to see whether leaflet.js loaded successfully (you'll see a 200 OK response for that file if it did). And ensure you added the <script tag for leaflet.js inside the <head> section of your page (usually in the Layout bit in MVC) so it loads before any other JS runs — ADyson
– ADyson, Commented Nov 9, 2018 at 15:21
Well I'd expect that if you specify it without any path as "aMap.PNG" then it would have to be in the same folder as your view. If you want to put it in another folder (for tidyness) then specify a relative path which goes from your view to where the file is located. the URL.Content HTML helper can assist with this - see a similar example here: stackoverflow.com/questions/15986980/… — ADyson
– ADyson, Commented Nov 9, 2018 at 15:50
check the file name is exactly correct (e.g. "PNG" not "png"). And again check the network tab to see if a request goes out to load it, and what the status is. (General point - if you find yourself saying "it won't work" or "it won't load", that's usually the time to open your debugging tools to get some more detailed information) — ADyson
– ADyson, Commented Nov 9, 2018 at 16:07

Sfmar · Accepted Answer · 2018-11-09 16:20:22Z

1

With help from @ADyson I 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.

answered Nov 9, 2018 at 16:20

Sfmar

1591 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Leafllet integration with ASP .NET MVC

UPDATE

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related