Skip to content

Commit

Permalink
Added overview map with show/hide control
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikeTschudi
MikeTschudi committed Apr 1, 2016
1 parent 492985e commit cd259bd
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 16 deletions.
Binary file modified images/sprites.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sprites_src/hideOverview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sprites_src/showOverview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,13 @@ <h2 class="screenreaderInfo">Photo gallery</h2>
<span id="emptyHeart" class="heart sprites empty-heart" aria-hidden="false"></span>
<span id="filledHeart" class="heart sprites filled-heart" aria-hidden="false"></span>
</div>
<div id="overviewMap">
<span id="crosshair">+</span>
</div>
<div id="showHideOverview">
<span id="showOverview" class="showHideOverview sprites showOverview"></span>
<span id="hideOverview" class="showHideOverview sprites hideOverview"></span>
</div>
</article>

<div id="sidebarContent" class="sidebarContent fillHeight col-sm-3 col-md-3 repad">
Expand Down
43 changes: 39 additions & 4 deletions js/app/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,21 @@ define(['lib/i18n.min!nls/resources.js', 'prepareAppConfigInfo', 'handleUserSign
candidate: null,
signedIn: false,
completions: 0,
overviewMap: null,
overviewMapVisible: true,


showHeart: function (heartId, makeVisible) {
document.getElementById(heartId).style.display = makeVisible
showIcon: function (iconId, makeVisible) {
document.getElementById(iconId).style.display = makeVisible
? 'block'
: 'none';
},

updateIconToggle: function (state, onIconId, offIconId) {
main.showIcon(onIconId, state);
main.showIcon(offIconId, !state);
},

completeSetup: function () {
var socialMediaReady, avatar;

Expand Down Expand Up @@ -185,6 +192,30 @@ define(['lib/i18n.min!nls/resources.js', 'prepareAppConfigInfo', 'handleUserSign
$("#helpBody")[0].innerHTML = prepareAppConfigInfo.appParams.helpText;
}

// Prepare overview map and its frame's visibility control
main.overviewMap = L.map('overviewMap');
L.esri.basemapLayer("Streets").addTo(main.overviewMap);

if (main.overviewMapVisible) {
$("#overviewMap").css("visibility", "visible");
} else {
$("#overviewMap").css("visibility", "hidden");
}
main.updateIconToggle(main.overviewMapVisible, 'hideOverview', 'showOverview');

$('#showOverview').on('click', function () {
$("#overviewMap").css("display", "block");
main.overviewMapVisible = true;
main.updateIconToggle(main.overviewMapVisible, 'hideOverview', 'showOverview');
});

$('#hideOverview').on('click', function () {
$("#overviewMap").css("display", "none");
main.overviewMapVisible = false;
main.updateIconToggle(main.overviewMapVisible, 'hideOverview', 'showOverview');
});


}).fail(function () {
// If proxy not available, tell the user
$("#signinLoginPrompt").fadeOut("fast", function () {
Expand Down Expand Up @@ -228,8 +259,7 @@ define(['lib/i18n.min!nls/resources.js', 'prepareAppConfigInfo', 'handleUserSign
if (prepareAppConfigInfo.appParams.bestPhotoField) {
// Update selected photo indicator
main.photoSelected = main.iVisiblePhoto === main.iSelectedPhoto;
main.showHeart('emptyHeart', !main.photoSelected);
main.showHeart('filledHeart', main.photoSelected);
main.updateIconToggle(main.photoSelected, 'filledHeart', 'emptyHeart');
$("#hearts").attr("title",
(main.photoSelected
? i18n.tooltips.button_best_image
Expand Down Expand Up @@ -511,6 +541,7 @@ define(['lib/i18n.min!nls/resources.js', 'prepareAppConfigInfo', 'handleUserSign
var showThumbnails = (prepareAppConfigInfo.appParams.thumbnailLimit < 0) ||
(candidate.attachments.length <= prepareAppConfigInfo.appParams.thumbnailLimit);

// Do we have a valid candidate?
main.numPhotos = candidate.attachments.length;
if (!candidate.obj) {
$(document).triggerHandler('show:noSurveys');
Expand All @@ -529,6 +560,10 @@ define(['lib/i18n.min!nls/resources.js', 'prepareAppConfigInfo', 'handleUserSign
main.candidate = candidate;
main.iSelectedPhoto = -1;

// Jump the overview map to candidate.obj.geometry after transforming to lat/long;
// we've asked the server to give us the geometry in lat/long (outSR=4326) for Leaflet
main.overviewMap.setView([candidate.obj.geometry.y, candidate.obj.geometry.x], 16);

// Gallery
var carouselSlidesHolder = $("#carouselSlidesHolder")[0];
$(carouselSlidesHolder).children().remove(); // remove children and their events
Expand Down
57 changes: 45 additions & 12 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,37 @@ header, section, footer, aside, nav, main, article, figure {
overflow-y: auto;
}

#overviewMap {
position: absolute;
right: 8px;
top: 8px;
width: 200px;
height: 200px;
}
#showHideOverview {
position: absolute;
right: 8px;
top: 8px;
width: 16px;
height: 16px;
z-index: 1000;
cursor: pointer;
}
#crosshair {
position: absolute;
left: 93px;
top: 82px;
width: 14px;
height: 28px;
font-size: 24px;
z-index: 1000;
}

/*
.leaflet-map-pane {
transform: translate3d(150px, 150px, 0px);
}
*/

/* ---------- splash ---------- */

Expand Down Expand Up @@ -648,15 +679,17 @@ label+.radio {

/* Generated using http://zerosprites.com/ */
.sprites { background: url(images/sprites.png) no-repeat; }
.FB-f-Logo__blue_29 { width: 29px; height: 29px; background-position: -37px -61px; }
.Twitter_logo_blue_29 { width: 29px; height: 29px; background-position: -67px -61px; }
.empty-heart { width: 64px; height: 60px; background-position: 0 0; }
.empty-star { width: 33px; height: 31px; background-position: -97px -61px; }
.filled-heart { width: 64px; height: 60px; background-position: -66px 0; }
.filled-star { width: 33px; height: 31px; background-position: -97px -93px; }
.gp-29 { width: 29px; height: 29px; background-position: 0 -114px; }
.guest-user_29 { width: 29px; height: 29px; background-position: -30px -114px; }
.left-arrow { width: 36px; height: 52px; background-position: 0 -61px; }
.question-sign { width: 18px; height: 18px; background-position: -37px -91px; }
.right-arrow { width: 36px; height: 52px; background-position: -60px -91px; }
.star { width: 12px; height: 11px; background-position: -97px -125px; }
.FB-f-Logo__blue_29 { width: 29px; height: 29px; background-position: -66px 0; }
.Twitter_logo_blue_29 { width: 29px; height: 29px; background-position: -65px -30px; }
.empty-heart { width: 64px; height: 60px; background-position: 0 -19px; }
.empty-star { width: 33px; height: 31px; background-position: -65px -113px; }
.filled-heart { width: 64px; height: 60px; background-position: 0 -80px; }
.filled-star { width: 33px; height: 31px; background-position: -99px -113px; }
.gp-29 { width: 29px; height: 29px; background-position: -103px -53px; }
.guest-user_29 { width: 29px; height: 29px; background-position: -103px -83px; }
.hideOverview { width: 16px; height: 16px; background-position: -19px 0; }
.left-arrow { width: 36px; height: 52px; background-position: -96px 0; }
.question-sign { width: 18px; height: 18px; background-position: 0 0; }
.right-arrow { width: 36px; height: 52px; background-position: -65px -60px; }
.showOverview { width: 16px; height: 16px; background-position: -36px 0; }
.star { width: 12px; height: 11px; background-position: -53px 0; }

0 comments on commit cd259bd

Please sign in to comment.