app/photos/photos.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

//Utility functions for map info window
function mapit(obj) {
    lat = parseFloat(obj.attr('data-latitude'));
    lon = parseFloat(obj.attr('data-longitude'));
    elid= obj.attr('data-imgid');
    map = L.map(document.getElementById("mw-"+elid));
    centerCoord = new L.LatLng(lat, lon);
    zoom = 8;
    L.tileLayer.provider('Esri.WorldTopoMap', {maxZoom: 18, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Tiles &copy; Esri and the GIS User Community'}).addTo(map);
    map.setView(centerCoord, zoom);
    L.marker([lat, lon]).addTo(map);
}
    //########## utility functions to create/remove map container ############
function create_map(obj) {
    //find id of this image caption:
    var imgid = obj.attr('data-imgid');
    //create container divs
    $('<div class="map-container" id="mc-'+imgid+'">').insertBefore($(obj).parent().parent());
    //$(obj).parent().parent().parent().prepend('<div class="map-container" id="mc-'+imgid+'">');
    $('#mc-'+imgid).append('<div class="map-wrapper" id="mw-'+imgid+'">');
    //deal with the variable height of div.legend
    $('#mc-'+imgid).css({
        bottom: function(index, value) {
        return parseFloat($(obj).parent().parent().height())+20;
     }
    });
    
    mapit(obj);
}
function remove_map(imgid) {
    $('#mc-'+imgid).remove();
}

//############ Document.ready events ##############
$(document).ready(function(){ 

    //set up click events for map button
    $('.map-link').click( function() {
        imgid = $(this).attr('data-imgid');
        if ($('#mc-'+imgid).is(":visible")) {
            remove_map(imgid);  
        } else {
            create_map($(this));
        }
        return false;
    
    });
    var $ele = $('#slides').children();
    var $curr = 0;
	$(document).bind('keydown', function (e) {
        var code = e.which;
        switch (code) {
            case 39:
                if ($curr <= $ele.size()) {
                    $.scrollTo($ele[$curr], 800 );
                    $curr++;
                }
                break;
            case 37:
                if ($curr > 0) {
                    $curr--;
                    var $now = $curr;
                    $now--;
                    $.scrollTo($ele[$now], 800 );
                }
                break;
        }
        return;
    });
});