Permalink
Browse files

sliders are IN!!!

  • Loading branch information...
1 parent 713d777 commit c598e6561e7a86b55949af285a845996e7bb1a61 @tdhatcher tdhatcher committed Apr 15, 2012
Showing with 91 additions and 12 deletions.
  1. +3 −0 web/css/style.css
  2. +21 −9 web/index.html
  3. +67 −3 web/js/location.js
View
3 web/css/style.css
@@ -19,3 +19,6 @@ body {margin:0px auto 0px auto; background:url(../images/bg.jpg) repeat-x #ece4c
#navbar h4 {color:#1a190a; font-size:14px; padding:0; margin:0px 0px 0px 0px; float:left}
#map {height:100%;width:952px; margin:-5px auto 0px auto; background:#d3d2cc; padding:4px}
+
+#controls {width: 960px; margin: 0 auto;}
+#controls ul { list-style: none; margin: 0; padding: 0; }
View
30 web/index.html
@@ -55,16 +55,28 @@
<input id="locationInput" type="text" placeholder="Location" onKeyPress="onLocationKeyPress(event);" />
<div id="divider"></div>
<h3>Personalize the map based on your risk tolerance.</h3>
- <div id="divider"></div>
- <h4>Crime</h4>
- <div id="divider"></div>
- <h4>Cops</h4>
- <div id="divider"></div>
- <h4>Accidents</h4>
</div><!--End navbar-->
- <div id="map"><!--Begin div that map goes into-->
- <div id="map_canvas" style="height:100%;width:100%;"></div>
- </div><!--End div that map goes into-->
+ <div id="controls">
+ <div style="display:inline-block; vertical-align:top; width:240px;">
+ <h2>Severity Rating</h2>
+ <ul>
+ <li>
+ <h4>Crime</h4>
+ <input type="range" min="0" max="4" step="1" value="2" onChange="onRatingChange(event,'crime')" />
+ </li>
+ <li>
+ <h4>Cops</h4>
+ <input type="range" min="0" max="4" step="1" value="2" onChange="onRatingChange(event,'police')" />
+ </li>
+ <li>
+ <h4>Accidents</h4>
+ <input type="range" min="0" max="4" step="1" value="2" onChange="onRatingChange(event,'accidents')" />
+ </li>
+ </ul>
+ </div>
+
+ <div id="map_canvas" style="display:inline-block;height:450px;width:716px;"></div>
+ </div>
</body>
</html>
View
70 web/js/location.js
@@ -1,21 +1,52 @@
var myLocationMarker;
+var locationTimer;
+var locationWait = 900; // interval of inactivity until location updates automatically
+var locationAutoMinChars = 4; // min chars needed to set auto commit timer for location in map
+
+var ratingChangeTimer;
+var ratingChangeWait = 500; // interval of inactivity after changing a rating range slider before committing update
+
function onLocationKeyPress(event)
{
var charCode = event.charCode;
+ var locationValue = getLocationValue();
+
+ // cancel timer
+ if (locationTimer)
+ {
+ clearTimeout(locationTimer);
+ }
if (charCode == 13)
{
- // cancel timer
- updateLocation($("#locationInput").val());
+ updateLocation(locationValue);
}
- else
+ else if (locationValue.length > locationAutoMinChars)
{
// set timer
+ locationTimer = setTimeout("locationTimeoutHandler()", locationWait);
console.info(String.fromCharCode(charCode).toUpperCase());
}
}
+
+
+function getLocationValue()
+{
+ return $("#locationInput").val();
+}
+
+
+
+function locationTimeoutHandler()
+{
+ console.info("Automatically updating location based on new location");
+ updateLocation(getLocationValue());
+}
+
+
+
function updateLocation(location)
{
console.info("Updating location: " + location);
@@ -28,6 +59,8 @@ function updateLocation(location)
geocoder.geocode(requestData, geocodeResultHandler);
}
+
+
function geocodeResultHandler(r, status)
{
console.info("Geocode complete. Status: " + status);
@@ -45,3 +78,34 @@ function geocodeResultHandler(r, status)
map.setCenter(coordinate);
}
}
+
+
+
+function onRatingChange(event, ratingType)
+{
+ ratingValue = event.currentTarget.value;
+ console.info(ratingType + " rating changed to " + ratingValue);
+
+ if (ratingChangeTimer)
+ {
+ clearTimeout(ratingChangeTimer);
+ }
+
+ var method = "updateRating(\"" + ratingType + "\"," + ratingValue + ")";
+ ratingChangeTimer = setTimeout(method, ratingChangeWait);
+}
+
+function updateRating(ratingType, ratingValue)
+{
+ console.info("Updating " + ratingType + " rating value: " + ratingValue);
+
+ if (ratingType == "crime")
+ {
+ }
+ else if (ratingType == "police")
+ {
+ }
+ else if (ratingType == "accidents")
+ {
+ }
+}

0 comments on commit c598e65

Please sign in to comment.