From 362d79861625cf5d5bbff2dafd2d82791ffe0642 Mon Sep 17 00:00:00 2001 From: Mark Cottman-Fields Date: Fri, 22 Nov 2013 14:15:53 +1000 Subject: [PATCH] More work on bird walk. Details page shows more info (got map working!) --- src/app/birdWalks/_birdWalks.scss | 24 +- src/app/birdWalks/birdWalk.tpl.html | 110 ++++- src/app/birdWalks/birdWalks.js | 48 ++- src/app/birdWalks/birdWalks.tpl.html | 8 +- src/common/markerwithlabel.js | 578 +++++++++++++++++++++++++++ src/index.html | 6 +- 6 files changed, 755 insertions(+), 19 deletions(-) create mode 100644 src/common/markerwithlabel.js diff --git a/src/app/birdWalks/_birdWalks.scss b/src/app/birdWalks/_birdWalks.scss index 5eaef061..1187afb7 100644 --- a/src/app/birdWalks/_birdWalks.scss +++ b/src/app/birdWalks/_birdWalks.scss @@ -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; } \ No newline at end of file diff --git a/src/app/birdWalks/birdWalk.tpl.html b/src/app/birdWalks/birdWalk.tpl.html index ca3c54bc..1f996c56 100644 --- a/src/app/birdWalks/birdWalk.tpl.html +++ b/src/app/birdWalks/birdWalk.tpl.html @@ -1,11 +1,105 @@ -
+
-

{{details.name}}

+

{{walkDetails.name}}

-

{{details.description}}

- {{details.name}} - {{$parent.spec.birdWalkSpec.walks[params.birdWalkId]}} -
+

+ {{walkDetails.description}} + Begin Bird Walk +

+ +
+
+ + +
+
+ {{details.name}} +
+
+
+
+
+
+ + + + + + + + +

+ + Image Source: + + {{locationDetails.backgroundImageAttribution}} + + +

+
+
+
+ +

Waypoints

+ +
    +
  • {{waypoint.name}}
    • +
+ +
+

Status

+ +
+
+ + +
+
+
+ 60% Complete +
+
+
+
+
+ + +
+

30 minutes

+
+
+
+ + +
+

14 total, most common tag is Koala

+
+
+
+ + +
+

154 total, most common tag is Magpie

+
+
+
+ + +
+ +
+
diff --git a/src/app/birdWalks/birdWalks.js b/src/app/birdWalks/birdWalks.js index 188948d3..929ade20 100644 --- a/src/app/birdWalks/birdWalks.js +++ b/src/app/birdWalks/birdWalks.js @@ -19,7 +19,7 @@ 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; @@ -27,13 +27,31 @@ angular.module('bawApp.birdWalks', []) 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); }); @@ -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 +// }); + }; + }]); \ No newline at end of file diff --git a/src/app/birdWalks/birdWalks.tpl.html b/src/app/birdWalks/birdWalks.tpl.html index 279f6f9d..7c09d44e 100644 --- a/src/app/birdWalks/birdWalks.tpl.html +++ b/src/app/birdWalks/birdWalks.tpl.html @@ -12,14 +12,16 @@

{{walkSpec.name}}

{{walkSpec.description}}

- Begin Bird Walk + View Bird Walk Details

-

+

+ Image Source: - + {{$parent.spec.birdWalkSpec.locations[walkSpec.locationName].backgroundImageAttribution}} +

+ + <% scripts.forEach( function ( file ) { %> <% }); %> - - +