Update MapScript.js

joh13010 · Jan 16, 2017 · f00c3c5 · f00c3c5
1 parent f7c44bb
commit f00c3c5
Showing 1 changed file with 73 additions and 17 deletions.
diff --git a/MapScript.js b/MapScript.js
@@ -1,6 +1,8 @@
 var map;
-var markersArr = [];
+var markersArr;
 var myLocation = {lat: 0, lng: 0};
+var classArr = [];
+var markerColorsArr = [/* RED*/ "fe5748", /* BLUE*/ "67abfe", /* GREEN*/"69ea48", /* YELLOW*/"f5f500", /* ORANGE*/ "ff8e38"];
 
 // Map constructor
 function initMap() {
@@ -11,6 +13,53 @@ function initMap() {
   });
 }
 
+function classify(fileData) {
+  var classSet = new Set();
+  classArr = [];
+  for(var i=0; i < fileData.data.length; i++) {
+    classSet.add(fileData.data[i].class);
+  }
+  for (let item of classSet.values()) {
+    classArr.push(item);
+  }
+  assignColors();
+}
+
+function assignColors() {
+  var colorArr = randomizeColors();
+  console.log(classArr.length);
+  for (var j = 0; j < markersArr.length; j++) {
+    for (var i = 0; i < classArr.length; i++) {
+      if (classArr[i] == markersArr[j].class_) {
+        console.log(markersArr[j].class_ + " " + classArr[i]);
+        markersArr[j].setIcon(new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + colorArr[i]));
+      }
+    };
+  }
+  addLegend(colorArr);
+}
+
+function randomizeColors() {
+  var markerColors = markerColorsArr;
+  var length = markerColorsArr.length;
+  var randzdColors = [];
+  for (var i = 0; i < classArr.length; i++) {
+    var j = Math.floor(Math.random() * length);
+    randzdColors.push(markerColors[j]);
+    markerColors.splice(j, 1);
+    length--;
+  };
+  return randzdColors;
+}
+
+function addLegend(colors) {
+  document.getElementById("legend-heading").innerHTML = "Legend:" + "<br />";
+  for (var i = 0; i < classArr.length; i++) {
+    var img = document.createElement('img');
+    img.src = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + colors[i];
+    document.getElementById("legend-content").innerHTML += img + ":" + classArr[i] + "<br />";
+  };
+}
 
 function updateMapCenter(fileData) {
   var centerLat = 0;
@@ -24,26 +73,32 @@ function updateMapCenter(fileData) {
   centerLat = centerLatTotal / (fileData.data.length);
   centerLon = centerLonTotal / (fileData.data.length);
   var newCenter = {lat: centerLat, lng: centerLon};
-  console.log("CenterLat: " + centerLatTotal + ". CenterLon: " + centerLonTotal);
   map.setCenter(newCenter);
-  map.setZoom(9);
+  map.setZoom(10);
 }
 
-function addMarker(lt, ln, prov, timeMillis) {
-  var location = new google.maps.LatLng(lt, ln);
-  var marker = new google.maps.Marker({
-    position: location,
-    map: map
-  });
-  if (prov == "GPS") {
-    marker.setIcon("http://maps.gstatic.com/mapfiles/markers2/measle.png");
-  }
-  else {
-    marker.setIcon("http://maps.gstatic.com/mapfiles/markers2/measle_blue.png");
+// This method is only called when the initial CSV file is uploaded
+function addMarkers(data) {
+  markersArr = [];
+  for (var i = 0; i<data.data.length ; i++) {
+    var lat = data.data[i].latitude;
+    var lon = data.data[i].longitude;
+    var prov = data.data[i].Provider;
+    var _class = data.data[i].class;
+    var timeMillis = data.data[i].senseStartTimeMillis;
+    if (lat !== undefined & lon !== undefined) {
+      var location = new google.maps.LatLng(lat, lon);
+      var marker = new google.maps.Marker({
+        position: location,
+        map: map,
+        provider: prov,
+        timeStamp: timeMillis,
+        class_: _class
+      });
+      //marker.setIcon(new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + markerColorsArr[0]));
+      markersArr.push(marker);
+    }
   }
-  marker.provider = prov;
-  marker.timeStamp = timeMillis;
-  markersArr.push(marker);
 }
 
 function updateMarkers(timeStart, timeEnd) {
@@ -58,3 +113,4 @@ function updateMarkers(timeStart, timeEnd) {
     }
   }
 }
+