Index: trunk/src/cptms/cptms_map.html
===================================================================
--- trunk/src/cptms/cptms_map.html (revision 303)
+++ trunk/src/cptms/cptms_map.html (revision 304)
@@ -126,4 +126,5 @@
⊕
-
+
+
@@ -195,12 +197,15 @@
var colorZvalues = {"white":5,"lime":10,"yellow":20,"red":30};
var kCMSstartupFile = "cmsStatusD12.json";
+var kCCTVfile = "cctv_locations_D12.json";
var blueFlag = "images/CPTMSImages/icon_cmsBlue.png";
var yellowFlag = "images/CPTMSImages/icon_cmsYellow.png";
+var cctvIcon = "images/CPTMSImages/icon_cctvBlue.png";
var messageList;
var cms_info;
-var markerList = [];
-var cms_showing = true;
+var cmsList = [];
+var cctvList = [];
+var cms_showing = false;
var vds_showing = true;
-
+var cctv_showing = false;
// Build a solid colored icon to use instead of the classic pin
// Use a diamond on N and E directions, circle on S and W directions
@@ -436,15 +441,37 @@
function initButton()
{
+ var cctvBtnDiv = document.getElementById('cctvButton');
+ map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(cctvBtnDiv)
+ cctvBtnDiv.title = 'Click to toggle cctv view';
+ // Setup the click event listeners to toggle icon display
+ cctvBtnDiv.addEventListener('click', function() {
+ cctv_showing = !cctv_showing;
+ // reveal or hide all the icons
+ for (var i = 0; i < cctvList.length; i++)
+ {
+ cctvList[i].setVisible(cctv_showing);
+ }
+ // Determine which button image to show
+ if (cctv_showing)
+ {
+ pic = "images/CPTMSImages/btnDepressed_CCTV.png"
+ }
+ else
+ {
+ pic = "images/CPTMSImages/btnReady_CCTV.png"
+ }
+ document.getElementById('cctvBtnImg').src=pic;
+ });
+
var cmsBtnDiv = document.getElementById('cmsButton');
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(cmsBtnDiv)
cmsBtnDiv.title = 'Click to toggle cms view';
-
// Setup the click event listeners to toggle icon display
cmsBtnDiv.addEventListener('click', function() {
cms_showing = !cms_showing;
// reveal or hide all the icons
- for (var i = 0; i < markerList.length; i++)
- {
- markerList[i].setVisible(cms_showing);
+ for (var i = 0; i < cmsList.length; i++)
+ {
+ cmsList[i].setVisible(cms_showing);
}
// Determine which button image to show
@@ -459,4 +486,5 @@
document.getElementById('cmsBtnImg').src=pic;
});
+
var vdsBtnDiv = document.getElementById('vdsButton');
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(vdsBtnDiv)
@@ -483,12 +511,12 @@
});
}
-function setMarkers()
+function setCMSmarkers()
{
var simpleImage = "";
- loadcmsJSON(function(response)
+ loadJSON(kCMSstartupFile, function(response)
{
// Parse JSON string into object
cms_info = JSON.parse(response);
- console.log(cms_info.data[0].cms);
+ //console.log(cms_info.data[0].cms);
// Process each new marker
for (var i = 0; i < cms_info.data.length; i++)
@@ -506,5 +534,5 @@
.route + " " + cms.location.postmile + " " + cms
.location.locationName
- markerList[i] = new google.maps.Marker(
+ cmsList[i] = new google.maps.Marker(
{
position:
@@ -519,5 +547,6 @@
location: locationInfo
});
- google.maps.event.addListener(markerList[i], 'click',
+ cmsList[i].setVisible(false); // initially hidden
+ google.maps.event.addListener(cmsList[i], 'click',
function()
{
@@ -545,21 +574,46 @@
});
}
-
-function loadcmsJSON(callback)
+function setCCTVmarkers()
{
- var xobj = new XMLHttpRequest();
- xobj.overrideMimeType("application/json");
- xobj.open('GET', kCMSstartupFile, true);
- xobj.onreadystatechange = function()
- {
- if (xobj.readyState == 4 && xobj.status == "200")
+ loadJSON(kCCTVfile, function(response)
+ {
+ // Parse JSON string into object
+ cctv_info = JSON.parse(response);
+ // Process each new marker
+ for (var i = 0; i < cctv_info.data.length; i++)
{
- callback(xobj.responseText);
- }
- };
- // We want ajax to ignore any cached responses
- xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
- xobj.send(null);
+ var cctv = cctv_info.data[i].cctv;
+ var currLat = Number(cctv.location.latitude);
+ var currLong = Number(cctv.location.longitude);
+ var locationInfo = cctv.location.locationName;
+ cctvList[i] = new google.maps.Marker(
+ {
+ position:
+ {
+ lat: currLat,
+ lng: currLong
+ },
+ map: map,
+ icon: cctvIcon,
+ title: "#"+i+" " +locationInfo,
+ cctvid: "" + i,
+ location: locationInfo,
+ index: cctv.index,
+ nearVDS: cctv.location.nearVDS
+ });
+ cctvList[i].setVisible(false); // initially hidden
+ google.maps.event.addListener(cctvList[i], 'click',
+ function()
+ {
+ // fetch the sequential msg #
+ cctvIndex = this.index;
+ alert("here will be the view of cctv: " + cctvIndex);
+ });
+ }
+ });
}
+
+
+
function handleSubmit()
@@ -621,7 +675,7 @@
// Change icon if something was saved
if (outMessage == "||")
- markerList[cmsID].setIcon(yellowFlag);
+ cmsList[cmsID].setIcon(yellowFlag);
else
- markerList[cmsID].setIcon(blueFlag);
+ cmsList[cmsID].setIcon(blueFlag);
var xhttp = new XMLHttpRequest();
@@ -655,6 +709,6 @@
initButton();
getMessage(1); // load the current message file
- setMarkers();
-
+ setCMSmarkers();
+ setCCTVmarkers();
// Start a timer to refresh the map every 10 seconds