From bbe81077d31aca07e0f3d8de4f9c12d55d71732a Mon Sep 17 00:00:00 2001 From: jlord Date: Tue, 28 May 2013 19:22:33 -0700 Subject: [PATCH] cleaned a little tiny bit --- index.html | 117 +++++++++-------------------------------------------- js/site.js | 81 +++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+), 98 deletions(-) diff --git a/index.html b/index.html index bdc6c23..6d6347c 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,19 @@ Hack Spots - + + - - - + + +
@@ -103,119 +104,39 @@ - - \ No newline at end of file + diff --git a/js/site.js b/js/site.js index e69de29..f03791f 100644 --- a/js/site.js +++ b/js/site.js @@ -0,0 +1,81 @@ + +// this is so super messy right now, sorry! + + $('.spotRow').live("click", function(event) { + $('.spotRow').removeClass("selectedRow") + console.log("clicked!") + // get the row number from the table's class and select it + var rowNumber = $(this).closest("tr").attr("id") + $('#' + rowNumber).addClass("selectedRow") + // filter out that rownumber from the data + var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber") + // use icanhas to make spot detail div + var selectedSpot = ich.selectedSpot({ rows: dataElement }) + // swap out latest spot for selected spot with its new content + $('#latestSpot').css("display", "none") + $('#selectedSpot').html(selectedSpot).css("display", "inline") + // grab the lat/long associated with that rownumber to + // redraw the map + var selectedCoords = [dataElement[0].lat, dataElement[0].long] + // change the marker color for this element in the geoJSON + matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646") + // add the new marker layer, popups and reset view to zoon in more + var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13) + addPopups(map, markerLayer) + map.setView(selectedCoords, 13) + }) + + // the most recently added spot should show by default + // and have a matching red marker + function highlightLastMarker(geoJSON, highlightColor) { + geoJSON[0].properties["marker-color"] = highlightColor + return geoJSON + } + + function addPopups(map, markerLayer) { + markerLayer.on('click', function(e) { + // e.layer.feature["marker-color"] = "#ff00ff" + // map.marker(geoJSON, map, 11).addTo(map) + $('.spotRow').removeClass("selectedRow") + var rowNumber = e.layer.feature.opts.rowNumber.toString() + $('#' + rowNumber).addClass("selectedRow") + matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646") + console.log(geoJSON) + var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11) + addPopups(map, markerLayer) + var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber") + console.log("rowNumber", rowNumber, "dataElement", dataElement) + var selectedSpot = ich.selectedSpot({ + rows: dataElement + }) + $('#latestSpot').css("display", "none") + $('#selectedSpot').html(selectedSpot).css("display", "inline") + var feature = e.layer.feature + var popupContent = '

' + feature.opts.name + '

' + e.layer.bindPopup(popupContent,{closeButton: false,}) + }) + } + + $('.resetMap').click(function() { + $('.spotRow').removeClass("selectedRow") + Sheetsee.addMarkerLayer(geoJSON, map, 11) + $('#latestSpot').css("display", "inline") + $('#selectedSpot').css("display", "none") + }) + + function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) { + geoJSON.forEach(function (d) { + if (d.properties["marker-color"] === highlightColor) { + var origColor = gData[0].hexcolor + d.properties["marker-color"] = origColor + } + + 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 + } + } + }) + }