i am javascript jedi

index.html

@@ -6,7 +6,7 @@
 		<script src='js/jquery.js '></script>
 		<script type="text/javascript" src='js/d3.js'></script>
 		<script type="text/javascript" src='js/sheetsee.js'></script>
-		<link rel="shortcut icon" href="https://raw.github.com/jllord/sheetsee-cache/master/favicon-p.png"/>
+		<link rel="shortcut icon" href="https://raw.github.com/jlord/hack-spots/master/favico.png"/>
 
     <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
     <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic' rel='stylesheet' type='text/css'>
@@ -71,6 +71,7 @@
 			  	<li><span class="category">Large Table:</span> {{largetable}}</li>
 			  	<li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li>
 			  	<li><span class="category">Brewing:</span> {{brewing}}</li>
+			  	<li><span class="category">Contributed By:</span> <a href="http://www.twitter/{{contributerstwitter}}" target="_blank">@{{contributerstwitter}}</a></li>
 		  	</ul>
 		  	<ul>
 		  		<li><a href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a></li>
@@ -117,9 +118,25 @@
 		  $('#selectedSpot').html(selectedSpot).css("display", "inline")
 		  var selectedCoords = [dataElement[0].lat, dataElement[0].long]
 		  console.log(selectedCoords)
-		  map.setView(selectedCoords, 17)
+		  matchGeoJSONbyRowNumber(rowNumber, geoJSON, "#FF4646")
+		  console.log(geoJSON)
+		  Sheetsee.addMarkerLayer(geoJSON, map, 11)
+		  map.setView(selectedCoords, 13)
  		})
 
+ 		function matchGeoJSONbyRowNumber(rowNumber, geoJSON, highlightColor) {
+	 		geoJSON.forEach(function (d) {
+	    	for (var key in d.opts) {
+	      	var value = d.opts[key].toString().toLowerCase()
+	   			if (key === 'rowNumber' && value.match(rowNumber.toString().toLowerCase())) {
+	     	    d.properties["marker-color"] = highlightColor
+	     	    return geoJSON
+	     		}
+	     		// else { console.log("no match") }
+	    	}
+ 			})
+ 		}
+
 
   	var theLatestSpot = gData.reverse()[0]
 	  var latestSpot = ich.latestSpot({
@@ -133,11 +150,18 @@
 			var searchCoords = ""
 			// map.setView(viewCoords, zoomLevel)
 	  }
-
    }) 
 
-	  var optionsJSON = ["name", "address", "city", "rownumber"]
-    var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
+	function highlightLastMarker(geoJSON, highlightColor) {
+		geoJSON.reverse()[0].properties["marker-color"] = highlightColor
+		return geoJSON
+	}
+
+	  var optionsJSON = ["name", "address", "city", "rowNumber"]
+    var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
+    var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
+    console.log(geoJSON[0].properties)
+    // geoJSON[0].properties["maker-color"] = "#E5FF1D"
 		var map = Sheetsee.loadMap("map")
 		Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
 		var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)