MappIndex.cshtml

@{
    ViewData["Title"] = "Map";
}
<h2>@ViewData["Title"]</h2>
@section HeadScripts{
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
   integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
   crossorigin=""></script>
    <style type="text/css">
   #peta{
       height: 500px;
       width: auto;
       margin: 0 auto;
       border: 0.2em solid #c75c41;
       box-shadow: #55322a;
   }
   </style>
}

<div class="form-group col-md-4">
    <label>Airport Name:</label>
    <input type="text" id="airportName" class="form-control" />
<input type="button" id="btnsubmit" value="Search" class="btn btn-default"/>
</div>
<div id="peta"></div>


@section Scripts{
    <script type="text/javascript">
           
        $(document).ready(function(){
                var mymap = L.map('peta').locate({setView:true, maxZoom:5});
                L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                    id: 'mapbox.streets'
                }).addTo(mymap);

                var markers = [];
                var polyLines = [];
                function Mapping(data){

                    for(let idx=0; idx < markers.length; idx++){
                        markers[idx].removeFrom(mymap);
                    } 

                    markers = [];
                    for (let index = 0; index < data.length; index++) {
                        const element = data[index];
                        
                        console.log(element);

                        var marker = L.marker([element.latitude, element.longitude], { title: element.name +" - " +element.code}).addTo(mymap);
                        marker.bindPopup(element.name +"("+element.code+")").openPopup();
                        markers.push(marker);
                        polyLines.push([element.latitude, element.longitude]);

                        if(index===0){
                            mymap.center = [element.latitude, element.longitude];
                        }
                    }
                  
                }

                $('#btnsubmit').click(function(e){
                    var airportname= $('#airportName').val();
                    $.ajax({
                        url:'/map/search?name='+airportname,
                        method:'GET',
                        success: function(d){
                            console.log(d);
                            Mapping(d);
                        },
                        error: function(msg){
                            console.log(msg);
                        }
                    });
                });

            });
    </script>
}