Skip to content

Commit

Permalink
More work on bird walk.
Browse files Browse the repository at this point in the history 
Details page shows more info (got map working!)
  • Loading branch information
Mark Cottman-Fields committed Nov 22, 2013
1 parent 14c56dd commit 362d798
Show file tree
Hide file tree
Showing 6 changed files with 755 additions and 19 deletions.
24 changes: 23 additions & 1 deletion src/app/birdWalks/_birdWalks.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,26 @@
#locationMap {
width: 100%;
height: 300px;
height: 250px;
margin: 0 0 5px 0;
}

.birdWalkImage {
height: 250px;
}

#birdWalkStats {
width: 100%;
margin: 5px 0 0 0;
}

.markerLabel {
color: black;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
/*width: 40px;*/
border: 2px solid white;
white-space: nowrap;
}
110 changes: 102 additions & 8 deletions src/app/birdWalks/birdWalk.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,105 @@
<div class="row" data-ng-controller="BirdWalkCtrl">
<div data-ng-controller="BirdWalkCtrl">

<h1>{{details.name}}</h1>
<h2>{{walkDetails.name}}</h2>

<p class="lead">{{details.description}}</p>
<img data-ng-src="{{imagesPath + spec.birdWalkSpec.locations[details.locationName].smallImageName}}"
alt="{{details.name}}" class="img-responsive"
title="{{spec.birdWalkSpec.locations[details.locationName].name}}">
{{$parent.spec.birdWalkSpec.walks[params.birdWalkId]}}
<div id="locationMap"></div>
<p class="lead">
{{walkDetails.description}}
<a ng-href="#" class="btn btn-success" role="button">Begin Bird Walk</a>
</p>

<div class="row">
<div class="col-md-6">
<h3 class="hidden-xs hidden-sm">{{locationDetails.name}}</h3>

<div class="row">
<div class="col-md-6">
<img data-ng-src="{{imagesPath + locationDetails.smallImageName}}"
alt="{{details.name}}" class="img-responsive img-thumbnail birdWalkImage"
title="{{locationDetails.name}}">
</div>
<div class="col-md-6">
<div id="locationMap"></div>
</div>
</div>
<div class="caption">


<p class="hidden-xs hidden-sm">{{locationDetails.locationDescription}}
<small class="text-muted">
<a rel="nofollow" data-ng-href="{{locationDetails.locationDescriptionAttributionLink}}">
{{locationDetails.locationDescriptionAttribution}}</a>
</small>
</p>

<h4 class="hidden-xs hidden-sm">{{locationDetails.environmentType}}</h4>

<p class="hidden-xs hidden-sm">{{locationDetails.environmentDescription}}
<small class="text-muted">
<a rel="nofollow" data-ng-href="{{locationDetails.environmentDescriptionAttributionLink}}">
{{locationDetails.environmentDescriptionAttribution}}</a>
</small>
</p>

<p>
<small class="text-muted">
Image Source:
<a rel="nofollow" data-ng-href="{{locationDetails.backgroundImageAttributionLink}}">
{{locationDetails.backgroundImageAttribution}}
</a>
</small>
</p>
</div>
</div>
<div class="col-md-6">

<h3>Waypoints</h3>

<ul data-ng-repeat="waypoint in walkDetails.waypoints">
<li>{{waypoint.name}}</li>
</ul>

<div id="birdWalkStats">
<h3>Status</h3>

<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Your Progress</label>

<div class="col-sm-10">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Your time spent</label>

<div class="col-sm-10">
<p class="form-control-static">30 minutes</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Your annotations</label>

<div class="col-sm-10">
<p class="form-control-static">14 total, most common tag is <em>Koala</em></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Overall annotations</label>

<div class="col-sm-10">
<p class="form-control-static">154 total, most common tag is <em>Magpie</em></p>
</div>
</div>
</form>


</div>

</div>
</div>
</div>
48 changes: 43 additions & 5 deletions src/app/birdWalks/birdWalks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,39 @@ angular.module('bawApp.birdWalks', [])
function BirdWalkCtrl($scope, $resource, $routeParams, $route, $http, BirdWalkService, paths) {

// constants
var CURRENT_LOCATION_ZOOM = 4;
var CURRENT_LOCATION_ZOOM = 8;

// initialise
$scope.imagesPath = paths.site.files.birdWalk.imagesAbsolute;
$scope.params = $routeParams;
BirdWalkService.getUrl(paths.site.files.birdWalk.statsAbsolute, 'birdWalkStats', $scope, null);
BirdWalkService.getUrl(paths.site.files.birdWalk.specAbsolute, 'birdWalkSpec', $scope, function () {
// set up page display
$scope.details = $scope.spec.birdWalkSpec.walks[$scope.params.birdWalkId];
$scope.walkDetails = $scope.spec.birdWalkSpec.walks[$scope.params.birdWalkId];
$scope.locationDetails = $scope.spec.birdWalkSpec.locations[$scope.walkDetails.locationName];

var overviewLocation = new google.maps.LatLng(
$scope.details.overviewLocation.latitude,
$scope.details.overviewLocation.longitude);
$scope.walkDetails.overviewLocation.latitude,
$scope.walkDetails.overviewLocation.longitude);

$scope.locationMap = $scope.createMap('locationMap', overviewLocation, CURRENT_LOCATION_ZOOM);
google.maps.event.trigger($scope.locationMap, 'resize');

var bounds = new google.maps.LatLngBounds();
$scope.walkDetails.waypoints.forEach(function(waypoint){

var markerLocation = new google.maps.LatLng(
waypoint.latitude,
waypoint.longitude);

bounds.extend(markerLocation);
$scope.createMarker($scope.locationMap, markerLocation, waypoint.name);
});

if($scope.walkDetails.waypoints.length < 1){
bounds.extend(overviewLocation);
}

$scope.locationMap.fitBounds(bounds);
});


Expand All @@ -50,5 +68,25 @@ angular.module('bawApp.birdWalks', [])
);
};

$scope.createMarker = function (map, LatLng, title) {

var marker = new MarkerWithLabel({
position: LatLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: title,
labelAnchor: new google.maps.Point(0, 0),
labelClass: "markerLabel" // the CSS class for the label
});

return marker;
// new google.maps.Marker({
// position: LatLng,
// map: map,
// title: title
// });
};


}]);
8 changes: 5 additions & 3 deletions src/app/birdWalks/birdWalks.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,16 @@ <h3>{{walkSpec.name}}
<p>{{walkSpec.description}}</p>

<p>
<a ng-href="birdWalks/{{walkSpec.id}}" class="btn btn-default" role="button">Begin Bird Walk</a>
<a ng-href="birdWalks/{{walkSpec.id}}" class="btn btn-default" role="button">View Bird Walk Details</a>
</p>

<p class="text-muted small">
<p>
<small class="text-muted">
Image Source:
<a data-ng-href="{{$parent.spec.birdWalkSpec.locations[walkSpec.locationName].backgroundImageAttributionLink}}">
<a rel="nofollow" data-ng-href="{{$parent.spec.birdWalkSpec.locations[walkSpec.locationName].backgroundImageAttributionLink}}">
{{$parent.spec.birdWalkSpec.locations[walkSpec.locationName].backgroundImageAttribution}}
</a>
</small>
</p>
<!--
<h3>{{$parent.spec.birdWalkSpec.locations[walkSpec.locationName].name}}</h3>
Expand Down
Loading

0 comments on commit 362d798

Please sign in to comment.