Hi,
I want to bind javascript array from database using asp.net with c#.
In below code i have two variable named as "latitudeArr" & "longitudeArr".
I have 2 columns in my database named as "Current_Latitude" & "Current_Longitude".
I want to bind "Current_Latitude" - to - latitudeArr variable and "Current_Longitude" - to - longitudeArr.
I am storing latitude and longitude of vehicle through gps into my database.
So based on that latitude and longitude i am placing markers on map.
For that i want to bind javascript array[latitude and longitude] from my database.
Please find the below javascript:
<script type=”text/javascript”>
var map = null;
var marker = [];
var latitudeArr = [28.549948, 28.552232, 28.551748, 28.551738, 28.548602, 28.554603, 28.545639, 28.544339, 28.553196, 28.545842];
var longitudeArr = [77.268241, 77.268941, 77.269022, 77.270164, 77.271546, 77.268305, 77.26480, 77.26424, 77.265407, 77.264195];
var titleArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var pth = window.location.href;/*get path of image folder*/
var full_path = pth.replace(pth.substr(pth.lastIndexOf('/') + 1), '');
window.onload = function () {
map = new MapmyIndia.Map('map', { center: [28.549948, 77.268241], zoomControl: true, hybrid: true });
/*1.create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passsing it at the minimum div object, all others are optional...
2.all leaflet mapping functions can be called simply on the L object
3.MapmyIndia may extend and in future modify the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section.*/
mapmyindia_number_on_marker();
/***map-events****/
map.on("dblclick", function (e) {
var title = "Text marker sample!";
marker.push(addMarker(e.latlng, "", title));
});
};
function addMarker(position, icon, title, draggable) {
/* position must be instance of L.LatLng that replaces current WGS position of this object. Will always return current WGS position.*/
var event_div = document.getElementById("event-log");
if (icon == '') {
var mk = new L.Marker(position, { draggable: draggable, title: title });/*marker with a default icon and optional param draggable, title */
mk.bindPopup(title);
}
else {
var mk = new L.Marker(position, { icon: icon, draggable: draggable, title: title });/*marker with a custom icon */
mk.bindPopup(title);
}
map.addLayer(mk);/*add the marker to the map*/
/* marker events:*/
mk.on("click", function (e) {
event_div.innerHTML = "Marker clicked<br>" + event_div.innerHTML;
});
return mk;
}
function mapmyindia_fit_markers_into_bound() {
var maxlat = Math.max.apply(null, latitudeArr);
var maxlon = Math.max.apply(null, longitudeArr);
var minlat = Math.min.apply(null, latitudeArr);
var minlon = Math.min.apply(null, longitudeArr);
var southWest = L.latLng(maxlat, maxlon);/*south-west WGS location object*/
var northEast = L.latLng(minlat, minlon);/*north-east WGS location object*/
var bounds = L.latLngBounds(southWest, northEast);/*This class represents bounds on the Earth sphere, defined by south-west and north-east corners*/
map.fitBounds(bounds);/*Sets the center map position and level so that all markers is the area of the map that is displayed in the map area*/
}
/*function to remove markers from map*/
function mapmyindia_removeMarker() {
var markerlength = marker.length;
if (markerlength > 0) {
for (var i = 0; i < markerlength; i++) {
map.removeLayer(marker[i]);/* deletion of marker object from the map */
}
}
delete marker;
marker = [];
document.getElementById("event-log").innerHTML = "";
}
/*function to make number appear on marker*/
function mapmyindia_number_on_marker() {
mapmyindia_removeMarker();
for (var i = 0; i < latitudeArr.length; i++) {
var title = "Mobile : " + titleArr[i] + "\n" + "Truck No :" + titleArr[i];
var icon = L.divIcon({ className: 'my-div-icon', html: "<img style='position:relative;width:35px;height:35px' src=" + "'https://maps.mapmyindia.com/images/2.png'>" + '<span style="position: absolute;left:1.5em;right: 1em;top:0.9em;bottom:3em; font-size:9px;font-weight:bold;width: 1px; color:black;" class="my-div-span">' + (i + 1) + '</span>', iconSize: [10, 10], popupAnchor: [12, -10] });/*function that creates a div over a icon and display content on the div*/
var postion = new L.LatLng(latitudeArr[i], longitudeArr[i]);/*WGS location object*/
marker.push(addMarker(postion, icon, title));
}
mapmyindia_fit_markers_into_bound();
}
</script>
Please help me.
Thanks