Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
@{
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>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment