Permalink
Browse files

Add secondary photos to details view, then merge changes.

  • Loading branch information...
2 parents a247432 + 0badecb commit a1baa19ef0e40153d2428a18abdf68ab29880b5f @mertonium mertonium committed Apr 28, 2011
Showing with 57 additions and 23 deletions.
  1. +0 −1 public/index.html
  2. +1 −1 public/javascripts/details.js
  3. +56 −21 public/javascripts/muralapp.js
View
@@ -7,7 +7,6 @@
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
- <script type="text/javascript" src="javascripts/infobox_packed.js" charset="utf-8"></script>
<script type="text/javascript" src="javascripts/muralapp.js"></script>
<script type="text/javascript" src="javascripts/details.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
@@ -63,7 +63,7 @@
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
- http://stackoverflow.com/questions/27928/how-do-i-calculate-distance-between-two-latitude-longitude-points
+ //http://stackoverflow.com/questions/27928/how-do-i-calculate-distance-between-two-latitude-longitude-points
function _calcDistance(point1, point2) {
var R = 6371; // Radius of the earth in km
var dLat = (point2[0]-point1[0]).toRad(); // Javascript functions in radians
@@ -10,6 +10,7 @@ var Mural = {};
muralIcon: 'mural-icon-pin-32.png',
locationIcon: 'location-icon-pin-32.png'
}, options),
+ //Map Styles
_mapTypeName = 'Map',
_mapTypeDef = [{featureType: "road",elementType: "all",stylers: [{ saturation: -99 },{ hue: "#0000ff" }]},{featureType: "all",elementType: "labels",stylers: [{ visibility: "simplified" }]},{featureType: "road",elementType: "geometry",stylers: [{ visibility: "simplified" }]},{featureType: "road.local",elementType: "labels",stylers: [{ visibility: "on" }]},{featureType: "all",elementType: "geometry",stylers: [{ saturation: -20 }]}],
_mapOptions = {
@@ -21,15 +22,20 @@ var Mural = {};
mapTypeIds: [_mapTypeName, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID]
}
},
+ //Map objects
_map,
_maxExtent = new google.maps.LatLngBounds(
new google.maps.LatLng(39.8723, -75.2803), //-75.6396, 39.5959),
new google.maps.LatLng(40.1379, -74.9557) //-74.5964, 40.4121)
),
_markers = [],
+ _lastSearchLatLng,
+ _myLocationLatLng,
_myLocationMarker,
- _murals = [],
_infoWindow = new google.maps.InfoWindow(),
+ _directionsService = new google.maps.DirectionsService(),
+ //Mural cache
+ _murals = [],
_self = {};
var _clearMarkers = function() {
@@ -88,45 +94,70 @@ var Mural = {};
});
};
+ var calcDistance = function(mural) {
+ var request = {
+ origin:_myLocationLatLng,
+ destination: new google.maps.LatLng(mural.geometry.coordinates[1], mural.geometry.coordinates[0]),
+ travelMode: google.maps.DirectionsTravelMode.WALKING
+ };
+
+ _directionsService.route(request, function(result, status) {
+ if (status == google.maps.DirectionsStatus.OK) {
+ $('.mural-dist-'+mural.properties.assetId).text('You are ' + result.routes[0].legs[0].distance.text + ' away.');
+ }
+ });
+ };
+
var _refreshDetailList = function() {
var $list = $(_options.listTarget).empty(),
html = '<ul data-role="listview" data-inset="true" data-theme="d">';
$.each(_murals, function(i, mural){
- html += '<li><img src="http://www.muralfarm.org/MuralFarm/MediaStream.ashx?AssetId='+
- mural.properties.assetId+'&SC=1" alt="'+mural.properties.Title+'" class="ul-li-icon">' +
- '<a href="details.html?id='+ mural.properties.assetId +'">'+mural.properties.Title+
- '</a><div class="distance">'+parseInt(mural.properties.distance * 3.2808399, 10)+' feet away</div></li>';
+ html += '<li><img src="http://www.muralfarm.org/MuralFarm/MediaStream.ashx?AssetId=' +
+ mural.properties.assetId+'&SC=1" alt="'+mural.properties.Title + '" class="ul-li-icon">' +
+ '<a href="details.html?id='+ mural.properties.assetId +'">' + mural.properties.Title + '</a>';
+
+ if (_myLocationLatLng) {
+ html += '<div class="mural-dist-'+mural.properties.assetId + ' distance"></div>';
+ }
+ html += '</li>';
});
html += '</ul>';
-
$list.append(html);
+ if (_myLocationLatLng) {
+ $.each(_murals, function(i, mural) {
+ calcDistance(mural);
+ });
+ }
+
$list.find('ul').listview();
};
// Where are we?
- _self.findMe = function(latLng) {
+ _self.findMe = function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition( function(position) {
- latLng = latLng || new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+ var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//Clear the marker if it exists
if(_myLocationMarker) {
_myLocationMarker.setMap(null);
}
- //Add a marker on my current location
- _myLocationMarker = new google.maps.Marker({
- map: _map,
- position: latLng,
- icon: _options.locationIcon
- });
-
//If I'm in Philly, go to that location
if (_maxExtent.contains(latLng)) {
- _map.setCenter(latLng);
- _self.refresh();
+ _myLocationLatLng = latLng;
+
+ //Add a marker on my current location
+ _myLocationMarker = new google.maps.Marker({
+ map: _map,
+ position: _myLocationLatLng,
+ icon: _options.locationIcon
+ });
+
+ _map.setCenter(_myLocationLatLng);
+ _self.refresh(_myLocationLatLng);
} else {
alert('We couldn\'t locate you inside of Philly.');
}
@@ -140,16 +171,19 @@ var Mural = {};
_self.refresh = function(latLng) {
// Figure out the bounding box for the query
var f = 0.015;
- latLng = latLng || _map.getCenter();
+ latLng = latLng || _lastSearchLatLng || _map.getCenter();
bbox = {'minx': (latLng.lng()-f),
'miny': (latLng.lat()-f),
'maxx': (latLng.lng()+f),
'maxy': (latLng.lat()+f)
};
+ _lastSearchLatLng = latLng;
+
// Ask for the mural data from muralfarm.org (via our proxy php script)
$.ajax({
- url: 'http://muralapp.iriscouch.com/murals/_design/geo/_spatiallist/radius/full?radius=1000&bbox='+bbox.minx+','+bbox.miny+','+bbox.maxx+','+bbox.maxy,
+ url: 'http://muralapp.iriscouch.com/murals/_design/geo/_spatiallist/radius/full?radius=1000&bbox='+
+ bbox.minx+','+bbox.miny+','+bbox.maxx+','+bbox.maxy,
crossDomain: true,
dataType: 'jsonp',
success: function (data, textStatus, jqXHR) {
@@ -158,6 +192,7 @@ var Mural = {};
function compareDist(a, b) { return a.properties.distance - b.properties.distance; }
_murals.sort(compareDist);
_murals = _murals.slice(0,10);
+
_refreshMarkers();
_refreshDetailList();
}
@@ -173,7 +208,7 @@ var Mural = {};
_map.setMapTypeId(_mapTypeName);
google.maps.event.addListener(_map, 'dragend', function() {
- _self.refresh();
+ _self.refresh(_map.getCenter());
});
};
@@ -199,7 +234,7 @@ $('#map-page').live('pagecreate',function(event){
app.refresh();
});
-$('#list-page').live('pageshow',function(event){
+$('#list-page').live('pagecreate',function(event){
app = app || Mural.App();
app.refresh();
});

0 comments on commit a1baa19

Please sign in to comment.