448 lines
14 KiB
JavaScript
448 lines
14 KiB
JavaScript
// JavaScript Document
|
|
|
|
//Importing google map api
|
|
//document.write("<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&type=restaurant,establishment,fire_station&client=gme-teramatrix'></script>");
|
|
var mapApiKey = System.Configuration.ConfigurationManager.AppSettings["GoogleId"];
|
|
//(mapApiKey);
|
|
//var src1 = "https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=" + mapApiKey;
|
|
document.write("<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&type=restaurant,establishment,fire_station&key=" + mapApiKey+"'></script>");
|
|
|
|
//Creating ccplGoogleMap class
|
|
ccplGoogleMap.prototype.constructor = ccplGoogleMap;
|
|
|
|
//Constructor of ccplGoogleMap class
|
|
function ccplGoogleMap(mapDiv, myOptions) {
|
|
|
|
//Creating an instance of google.maps.Map class
|
|
this.googleMap = new google.maps.Map(mapDiv, myOptions);
|
|
//Logic to set map type id
|
|
if (myOptions.mapType == 'ROADMAP') {
|
|
this.googleMap.setMapTypeId(google.maps.MapTypeId.ROADMAP);
|
|
}
|
|
else if (myOptions.mapType == 'SATELLITE') {
|
|
this.googleMap.setMapTypeId(google.maps.MapTypeId.SATELLITE);
|
|
}
|
|
else if (myOptions.mapType == 'HYBRID') {
|
|
this.googleMap.setMapTypeId(google.maps.MapTypeId.HYBRID);
|
|
}
|
|
else {
|
|
this.googleMap.setMapTypeId(google.maps.MapTypeId.TERRAIN);
|
|
}
|
|
//Setting the center of map
|
|
this.googleMap.setCenter(new google.maps.LatLng(myOptions.centerLatitude, myOptions.centerLongitude));
|
|
//Array for storing
|
|
this.latlng = new Array();
|
|
this.polyListener = null;
|
|
var c = 0;
|
|
}
|
|
|
|
ccplGoogleMap.prototype.setCenter = function (latitude, longitude) {
|
|
this.googleMap.panTo(new google.maps.LatLng(latitude, longitude));
|
|
}
|
|
//Adding function to create latlng object
|
|
ccplGoogleMap.prototype.generateLatLng = function (lat, lng) {
|
|
return new google.maps.LatLng(lat, lng);
|
|
|
|
}
|
|
|
|
//function register the zoom event to google map
|
|
ccplGoogleMap.prototype.zoomEvent = function () {
|
|
/*var myGoogleMap=this.googleMap;
|
|
google.maps.event.addListener(myGoogleMap, 'zoom_changed', function() {
|
|
switch(myGoogleMap.getZoom()){
|
|
case 0:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*62914.56);
|
|
}
|
|
}
|
|
break;
|
|
case 1:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*31457.28);
|
|
}
|
|
}
|
|
break;
|
|
case 2:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*15728.64);
|
|
}
|
|
}
|
|
break;
|
|
case 3:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*7864.32);
|
|
}
|
|
}
|
|
break;
|
|
case 4:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*3932.16);
|
|
}
|
|
}
|
|
break;
|
|
case 5:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*1966.08);
|
|
}
|
|
}
|
|
break;
|
|
case 6:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*983.04);
|
|
}
|
|
}
|
|
break;
|
|
case 7:
|
|
for(i in sUnit){
|
|
var url1=sUnit[i].getIcon();
|
|
var url2=sUnit[i].transMarker.getIcon();
|
|
var index1=url1.lastIndexOf("/");
|
|
var index2=url2.lastIndexOf("/");
|
|
var img1=url1.substring(index1+1);
|
|
var img2=url2.substring(index2+1);
|
|
if(img1.substring(0,5)!="small"){
|
|
img1="small".concat(img1);
|
|
}
|
|
url1=url1.replace(url1.substring(index1+1),img1);
|
|
sUnit[i].setIcon(url1);
|
|
if(img2.substring(0,5)!="small"){
|
|
img2="small".concat(img2);
|
|
}
|
|
urll2=url2.replace(url2.substring(index2+1),img2);
|
|
sUnit[i].transMarker.setIcon(url2);
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*491.52);
|
|
}
|
|
}
|
|
break;
|
|
case 8:
|
|
for(i in sUnit){
|
|
var url1=sUnit[i].getIcon();
|
|
var url2=sUnit[i].transMarker.getIcon();
|
|
var index1=url1.lastIndexOf("/");
|
|
var index2=url2.lastIndexOf("/");
|
|
var img1=url1.substring(index1+1);
|
|
var img2=url2.substring(index2+1);
|
|
if(img1.substring(0,5)=="small" || img1.substring(0,5)=="large"){
|
|
img1=img1.replace(img1.substring(0,5),"");
|
|
}
|
|
url1=url1.replace(url1.substring(index1+1),img1);
|
|
sUnit[i].setIcon(url1);
|
|
if(img2.substring(0,5)=="small" || img2.substring(0,5)=="large"){
|
|
img2=img2.replace(img2.substring(0,5),"");
|
|
}
|
|
url2=url2.replace(url2.substring(index2+1),img2);
|
|
sUnit[i].transMarker.setIcon(url2);
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*245.76);
|
|
}
|
|
}
|
|
break;
|
|
case 9:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*122.88);
|
|
}
|
|
}
|
|
break;
|
|
case 10:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*61.44);
|
|
}
|
|
}
|
|
break;
|
|
case 11:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*30.74);
|
|
}
|
|
}
|
|
break;
|
|
case 12:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*15.36);
|
|
}
|
|
}
|
|
break;
|
|
case 13:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*7.68);
|
|
}
|
|
}
|
|
break;
|
|
case 14:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*3.84);
|
|
}
|
|
}
|
|
break;
|
|
case 15:
|
|
for(i in sUnit){
|
|
var url1=sUnit[i].getIcon();
|
|
var url2=sUnit[i].transMarker.getIcon();
|
|
var index1=url1.lastIndexOf("/");
|
|
var index2=url2.lastIndexOf("/");
|
|
var img1=url1.substring(index1+1);
|
|
var img2=url2.substring(index2+1);
|
|
if(img1.substring(0,5)=="small" || img1.substring(0,5)=="large"){
|
|
img1=img1.replace(img1.substring(0,5),"");
|
|
}
|
|
url1=url1.replace(url1.substring(index1+1),img1);
|
|
sUnit[i].setIcon(url1);
|
|
if(img2.substring(0,5)=="small" || img2.substring(0,5)=="large"){
|
|
img2=img2.replace(img2.substring(0,5),"");
|
|
}
|
|
url2=url2.replace(url2.substring(index2+1),img2);
|
|
sUnit[i].transMarker.setIcon(url2);
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*1.92);
|
|
}
|
|
}
|
|
break;
|
|
case 16:
|
|
for(i in sUnit){
|
|
var url1=sUnit[i].getIcon();
|
|
var url2=sUnit[i].transMarker.getIcon();
|
|
var index1=url1.lastIndexOf("/");
|
|
var index2=url2.lastIndexOf("/");
|
|
var img1=url1.substring(index1+1);
|
|
var img2=url2.substring(index2+1);
|
|
if(img1.substring(0,5)!="large"){
|
|
img1="large".concat(img1);
|
|
}
|
|
url1=url1.replace(url1.substring(index1+1),img1);
|
|
sUnit[i].setIcon(url1);
|
|
if(img2.substring(0,5)!="large"){
|
|
//img2=img2.concat("large");
|
|
}
|
|
url2=url2.replace(url2.substring(index2+1),img2);
|
|
sUnit[i].transMarker.setIcon(url2);
|
|
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*0.96);
|
|
}
|
|
}
|
|
break;
|
|
case 17:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*0.48);
|
|
}
|
|
}
|
|
break;
|
|
case 18:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*0.24);
|
|
}
|
|
}
|
|
break;
|
|
case 19:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*0.12);
|
|
}
|
|
}
|
|
break;
|
|
case 20:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*0.06);
|
|
}
|
|
}
|
|
break;
|
|
case 21:
|
|
for(i in sUnit){
|
|
for(j in sUnit[i].groupID){
|
|
sUnit[i].groupID[j].setRadius((j+3)*0.03);
|
|
}
|
|
}
|
|
break;
|
|
|
|
}
|
|
});*/
|
|
|
|
}
|
|
|
|
//Adding function to create marker
|
|
ccplGoogleMap.prototype.addMarker = function (unitOptions) {
|
|
|
|
//Creating an instance of google.maps.Marker class
|
|
var marker = new google.maps.Marker({ position: new google.maps.LatLng(unitOptions.unitLatitude, unitOptions.unitLongitude), map: this.googleMap, icon: unitOptions.unitImage, title: unitOptions.unitName, zIndex: 10 });
|
|
marker.transMarker = new google.maps.Marker({ position: new google.maps.LatLng(unitOptions.unitLatitude, unitOptions.unitLongitude), map: this.googleMap, icon: unitOptions.transparentImage, title: unitOptions.unitName, zIndex: 10 });
|
|
marker.groupID = new Array();
|
|
|
|
//Adding circle to unit according to unit groups thats its belong
|
|
/*for(i in unitOptions.unitGroups){
|
|
|
|
//Creating an instance of google.maps.Circle class
|
|
var circle=new google.maps.Circle({center:new google.maps.LatLng(unitOptions.unitLatitude,unitOptions.unitLongitude), map:this.googleMap,radius:(i+3)*1.92,strokeWeight: 4,strokeColor:unitOptions.unitGroups[i].color,fillOpacity:0,zIndex:-1});
|
|
circle.id=unitOptions.unitGroups[i].groupID;
|
|
marker.groupID[i]=circle;
|
|
}*/
|
|
marker.id = unitOptions.unitID;
|
|
marker.transMarker.id = unitOptions.unitID;
|
|
marker.unitName = unitOptions.unitName;
|
|
return marker;
|
|
}
|
|
|
|
//Adding function to attach infowindow to open by click on unit
|
|
ccplGoogleMap.prototype.attachInfo = function (marker, message, func) {
|
|
//creating instance of google.maps.InfoWindow()
|
|
var infowindow = new google.maps.InfoWindow(
|
|
{
|
|
content: message,
|
|
size: new google.maps.Size(50, 50)
|
|
});
|
|
var infoMap = this.googleMap;
|
|
marker.infoCheck = false;
|
|
//Adding a listen to click event on marker to show infowindow
|
|
google.maps.event.addListener(marker, 'click', function () {
|
|
if (marker.infoCheck == false) {
|
|
func(marker.id);
|
|
infowindow.open(infoMap, marker);
|
|
marker.infoCheck = true;
|
|
}
|
|
|
|
});
|
|
google.maps.event.addListener(infowindow, 'closeclick', function () {
|
|
marker.infoCheck = false;
|
|
})
|
|
infowindow.id = marker.id;
|
|
return infowindow;
|
|
}
|
|
|
|
//Adding function to create Circular Geofence
|
|
ccplGoogleMap.prototype.createCircularGeoFence = function (geoFenceOptions) {
|
|
|
|
//Creating an instance of google.maps.Circle
|
|
|
|
var geoFence = new google.maps.Circle({
|
|
center: new google.maps.LatLng(geoFenceOptions.centerLatitude, geoFenceOptions.centerLongitude), map: this.googleMap, radius: geoFenceOptions.radius, strokeWeight: 2, fillColor: geoFenceOptions.color, fillOpacity: 0.3, strokeColor: geoFenceOptions.color, zIndex: 5
|
|
});
|
|
geoFence.id = geoFenceOptions.geoFenceID;
|
|
return geoFence;
|
|
}
|
|
|
|
//Adding function to register an event for polygon geofence
|
|
ccplGoogleMap.prototype.registerPolyGonEvent = function () {
|
|
//registering click event on map to get latitude and longitude
|
|
this.polyListener = google.maps.event.addListener(map, 'click', function (event)//Adding listener to click event on map for creating marker
|
|
{
|
|
latlng[c] = event.latLng;
|
|
c++;
|
|
});
|
|
|
|
}
|
|
|
|
|
|
//Adding function to create polygon geofence
|
|
ccplGoogleMap.prototype.createPolygonGeoFence = function (geoFenceOptions) {
|
|
//Creating an instance of google.maps.Polygon class
|
|
var polygonGeoFence = new google.maps.Polygon({
|
|
paths: this.latlng,
|
|
strokeColor: "#FF0000",
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: geoFenceOptions.color,
|
|
fillOpacity: 0.35,
|
|
map: this.googleMap
|
|
});
|
|
c = 0;
|
|
polygonGeoFence.id = geoFenceOptions.geoFenceID;
|
|
//removing click event from map
|
|
google.maps.event.removeListener(this.polyListener);
|
|
return polygonGeoFence;
|
|
}
|
|
|
|
//Adding function to create polygon geofence
|
|
ccplGoogleMap.prototype.createExistingPolygonGeoFence = function (geoFenceOptions) {
|
|
//Creating an instance of google.maps.Polygon class
|
|
var ppath = new Array();
|
|
for (i in geoFenceOptions.path) {
|
|
ppath[i] = new google.maps.LatLng(geoFenceOptions.path[i].latitude, geoFenceOptions.path[i].longitude);
|
|
}
|
|
var polygonGeoFence = new google.maps.Polygon({
|
|
paths: ppath,
|
|
strokeColor: geoFenceOptions.color,
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: geoFenceOptions.color,
|
|
fillOpacity: 0.3,
|
|
map: this.googleMap
|
|
});
|
|
|
|
polygonGeoFence.id = geoFenceOptions.geoFenceID;
|
|
//removing click event from map
|
|
|
|
return polygonGeoFence;
|
|
}
|
|
|
|
|
|
//Function to draw path of a unit
|
|
ccplGoogleMap.prototype.drawPath = function (pathOptions) {
|
|
//variable store point of path
|
|
var upath = new Array();
|
|
for (i in pathOptions.path) {
|
|
upath[i] = new google.maps.LatLng(pathOptions.path[i].latitude, pathOptions.path[i].longitude);
|
|
}
|
|
|
|
//instantiating the google.maps.Polyline class
|
|
var unitPath = new google.maps.Polyline({
|
|
path: upath,
|
|
strokeColor: pathOptions.color,
|
|
strokeOpacity: 0.6,
|
|
strokeWeight: 4,
|
|
map: this.googleMap
|
|
});
|
|
//unitPath.id=pathOptions.unitID;
|
|
return unitPath;
|
|
}
|
|
|
|
//Adding function to calculate distance between two points
|
|
ccplGoogleMap.prototype.distanceBetweenTwoPoints = function (p1, p2) {
|
|
|
|
var R = 6371; // earth's mean radius in km
|
|
|
|
var dLat = rad(p2.lat() - p1.lat());
|
|
var dLong = rad(p2.lng() - p1.lng());
|
|
|
|
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong / 2) * Math.sin(dLong / 2);
|
|
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
var d = R * c;
|
|
|
|
return d.toFixed(3);
|
|
}
|
|
//Function to draw path of a unit
|
|
ccplGoogleMap.prototype.drawOpenFence = function (pathOptions) {
|
|
//variable store point of path
|
|
var upath = new Array();
|
|
for (i in pathOptions.path) {
|
|
upath[i] = new google.maps.LatLng(pathOptions.path[i].latitude, pathOptions.path[i].longitude);
|
|
}
|
|
|
|
//instantiating the google.maps.Polyline class
|
|
var unitPath = new google.maps.Polyline({
|
|
path: upath,
|
|
strokeColor: pathOptions.color,
|
|
strokeOpacity: 0.6,
|
|
strokeWeight: 4,
|
|
map: this.googleMap
|
|
});
|
|
unitPath.id = pathOptions.id;
|
|
return unitPath;
|
|
|
|
}
|