Create a reusable map using Asp.net MVC, OpenLayers, OSM

In a web application, there can be multiple locations which we need to shows a map. Trust me, writing the same code, again and again, is not an appropriate solution at all. It is going to be your maintenance nightmare when you need to do some changing in your code. So in this article, we are going to create a reusable component in Asp.net MVC to show the map on our web applications as many times as we need. 

We use :

• Openlayers (v5.3.0) (OL)
• Asp.net MVC 5
• OpenStreetMap (OSM)

Step 1:

First of all, you need to add the OpenLayers library to your project. OL helps you to create interactive maps on web applications. It can display map tiles, vector data, and markers. You can download this library from here. 

Step 2:

In the second step, we should add a custom helper that creates the map. Create a folder named App_Code which is a reserved folder name in ASP.NET. In the App_Code folder create a new .cshtml file and name it MyMapComponent.cshtml. Then replace the existing content with the following codes:

@helper AddMap()
{
    <link rel="stylesheet" href="/Content/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>
    <script src="/Scripts/ol.js"></script>

    <div id="map" class="map"></div>

    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([37.41, 8.82]),
                zoom: 4
            })
        });
    </script>
}

First, we added js and css files of OL's Library. Then we used <div> HTML element to show the map. You can set any properties to this <div> with css such as height and width.

To call the helper you created, use following code inside of the view:

@MyMapComponent.AddMap()

Step 3:

Let's make our helper more dynamic. To make our helper appropriate for the different type of locations we need to set height and width with input arguments. Also, it is a good idea get longitude and latitude (center of map) and zoom level as input arguments too.

With this explanation we can change our helper with following codes:

@helper AddMap(int height, int width, double longitude, double latitude, int zoomLevel)
{
    <link rel="stylesheet" href="/Content/ol.css" type="text/css">
    <style>
        .map {
            height: @height.ToString()px;
            width: @width.ToString()px;
        }
    </style>
    <script src="/Scripts/ol.js"></script>

    <div id="map" class="map"></div>

    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([@longitude, @latitude]),
                zoom: @zoomLevel
            })
        });
    </script>
}

To call the helper you created, use following code inside of the view:

@MyMapComponent.AddMap(400, 700, 37.41, 8.82, 4)

Useful Links:

• Asp.net MVC
• OpenLayers
• OpenStreetMap

Tags : #Openlayers #Asp.Net_MVC #OpenStreetMap