diff --git a/MapScript.js b/MapScript.js index ab4409a..f33d0c8 100644 --- 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:" + "
"; + 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] + "
"; + }; +} 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