Scrollpage with Maps

Scrollpage with Maps

by bejnar

HTML

<script src="https://raw.github.com/imakewebthings/jquery-waypoints/master/waypoints.min.js"></script>
<script src="http://slobodan.99k.org/scripts/jquery.coverscroll.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
    <div id="navigation">
        <div id="thumbnails" class="ui-widget"/>
        </div>
    </div>

  <a id="next" href="javascript:void(0)">Next</a>
        <a id="prev" href="javascript:void(0)">Prev</a>
<div id="mapcontainer" style="position: fixed; bottom: 0; right: 0;width:20%; z-index: 1000; height: 100%; border: 1px solid #ccc">
    <div id="map" style="height: 800px;"></div>
</div>

<div id="container">   
    <div class="empty first"></div>
    <div class="box" data-lat="53.89" data-lon="14.16" data-z="16">1</div>
    <div class="box" data-lat="54.021" data-lon="14.741" data-z="16">2</div>
    <div class="box" data-lat="53.89" data-lon="14.16" data-z="11">3</div>
    <div class="box" data-lat="54.021" data-lon="14.741" data-z="17">4</div>
    <div class="box" data-lat="53.89" data-lon="14.16" data-z="14">5</div>
    <div class="box" data-lat="54.021" data-lon="14.741" data-z="16">6</div>
    <div class="box" data-lat="53.89" data-lon="14.16" data-z="13">7</div>
    <div class="box" data-lat="54.021" data-lon="14.741" data-z="16">8</div>
    <div class="box">9</div>
    <div class="box" data-lat="54.021" data-lon="14.741" data-z="16">10</div>
    <div class="box">11</div>
    <div class="box" data-lat="54.021" data-lon="14.741" data-z="13">12</div>
    <div class="box">13</div>
    <div class="box">14</div>
    <div class="box">15</div>
    <div class="box">16</div>
    <div class="box">17</div>
    <div class="box">18</div>
    <div class="box">19</div>
    <div class="box">20</div>
    <div...

CSS

/* main elements */
#container{
    width:400px;
    padding:10px;
    margin-left:auto;
    margin-right:auto;
    background-color:#eee;
}

.box{
    width:380px;
    height:380px;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    margin-bottom:10px;
    background-color:#DDDDDD;
    text-align:center;
}


.empty {   
    width:380px; 
    text-align:center;  
    height:380px; 
}

.first{       
    height:155px; 
}

#next, #prev {
    position: fixed;
    width:50px;
    height:50px;
    z-index:1000;
}

#next{
    top:20px;
    right:20px;
}

#prev{
    top:91px;
    right:20px;
}




#navigation {
    overflow:auto;
    width:80px;
    height:100%;
    position: fixed;
    top:0;
    background-color:#eee;
}

div#thumbnails {
    height:auto;
    position:absolute;
}

.thumb
{
    width:50px;
    height:50px;           
    border-bottom:1px solid #ccc;
}



/* Just colors and such */


.active {
    background: #666;
}


#debug {
    bottom:10px;
    right:50px;
    width:250px;
     position: fixed;

}

/* Map */

JavaScript

// Load up some maps!

var map = new L.Map('map');

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);



// Get some scrolling action 

$('#container .box').each(function(index, element) {
    $(element).data('index', index);
});

// Register each box as a waypoint.
$('#container .box').waypoint({
    offset: '40%',
    continuous: true
});

$(function() {
    //create a thumbnail panel by copying the container div    
    var $container, $thumbnails;
    $container = $("#container");
    $thumbnails = $("#thumbnails");
    $('.box').each(function(index, element) {
        $thumbnails.append($("<div>", {
            text: $(element).text(),
            class: 'thumb'
        }).data("index", index));
    });

    //make the thumbnail panel selectable and have it generate a custom event
    $thumbnails.selectable({
        selected: function(event, ui) {
            $(ui.selected).trigger(jQuery.Event("ThumbSelected", {
                index: $(ui.selected).data('index')
            }));
        }
    });
});

/////////////////////////
//event handlers
////////////////////////

// Find waypoints and add/remove selected class using waypoints js
// http://imakewebthings.com/jquery-waypoints/
$('html').delegate('.box', 'waypoint.reached', function(event, direction) {
    var $element = $(this);
    if (direction === "up") {
        $element = $element.prev('.box');
    }
    if (!$element.length) {
        $element = $element.end('.box');
    }
    $('#container .active').removeClass('active');
    $element.addClass('active');

    //trigger a custom event
    $element.trigger(jQuery.Event("ImageSelected", {
        index: $element.data('index')
   ...