This commit is contained in:
jllord 2013-05-27 20:21:00 -07:00
parent 3fd2362c6a
commit 745da9107a
3 changed files with 41 additions and 20 deletions

View File

@ -41,7 +41,7 @@ code {font-family: "Consolas", "Ubuntu Mono", monospace; line-height: 22px; font
.fauxButton .selected {background-color: #FF4646;} .fauxButton .selected {background-color: #FF4646;}
.colorText {color: #FF4646; text-transform: uppercase; font-weight: 700;} .colorText {color: #FF4646; text-transform: uppercase; font-weight: 700;}
.leaflet-popup-content h2 {font-family: Lato; font-size: 20px; text-transform: uppercase;} .leaflet-popup-content h2 {font-family: Lato; font-size: 14px; text-transform: uppercase;}
#rightSide {height: 400px; max-width: 350px; width: 100%; float: right; padding-top: 5px;} #rightSide {height: 400px; max-width: 350px; width: 100%; float: right; padding-top: 5px;}
#selectedSpot {display: none;} #selectedSpot {display: none;}

View File

@ -118,26 +118,13 @@
$('#selectedSpot').html(selectedSpot).css("display", "inline") $('#selectedSpot').html(selectedSpot).css("display", "inline")
var selectedCoords = [dataElement[0].lat, dataElement[0].long] var selectedCoords = [dataElement[0].lat, dataElement[0].long]
console.log(selectedCoords) console.log(selectedCoords)
matchGeoJSONbyRowNumber(rowNumber, geoJSON, "#FF4646") matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
console.log(geoJSON) console.log(geoJSON)
Sheetsee.addMarkerLayer(geoJSON, map, 11) var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
addPopups(map, markerLayer)
map.setView(selectedCoords, 13) 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 theLatestSpot = gData.reverse()[0]
var latestSpot = ich.latestSpot({ var latestSpot = ich.latestSpot({
rows: theLatestSpot rows: theLatestSpot
@ -160,7 +147,6 @@
var optionsJSON = ["name", "address", "city", "rowNumber"] var optionsJSON = ["name", "address", "city", "rowNumber"]
var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON) var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646") var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
console.log(geoJSON[0].properties)
// geoJSON[0].properties["maker-color"] = "#E5FF1D" // geoJSON[0].properties["maker-color"] = "#E5FF1D"
var map = Sheetsee.loadMap("map") var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k') Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
@ -169,11 +155,29 @@
function addPopups(map, markerLayer) { function addPopups(map, markerLayer) {
markerLayer.on('click', function(e) { 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 feature = e.layer.feature
var popupContent = '<h2>' + feature.opts.name + '</h2>' var popupContent = '<h2>' + feature.opts.name + '</h2>'
e.layer.bindPopup(popupContent,{closeButton: false,}) e.layer.bindPopup(popupContent,{closeButton: true,})
}) })
} }
// .addControl(L.mapbox.geocoderControl('examples.map-vyofok3q'));
$('.resetMap').click(function() { $('.resetMap').click(function() {
$('.spotRow').removeClass("selectedRow") $('.spotRow').removeClass("selectedRow")
markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11) markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
@ -181,10 +185,27 @@
$('#selectedSpot').css("display", "none") $('#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
}
}
})
}
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
console.log(gData) // console.log(gData)
</script> </script>
</body> </body>
</html> </html>

0
js/site.js Normal file
View File