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.908" data-lon="14.215" data-z="7">1</div>
    <div class="box" data-lat="53.912" data-lon="14.250" data-z="7">2</div>
    <div class="box" data-lat="53.906" data-lon="14.267" data-z="7">3</div>
    <div class="box" data-lat="53.908" data-lon="14.295" data-z="7">4</div>
    <div class="box" data-lat="53.910" data-lon="14.321" data-z="7">5</div>
    <div class="box" data-lat="53.911" data-lon="14.365" data-z="7">6</div>
    
    
    <div class="box" data-lat="53.928" data-lon="14.453" data-z="7">7</div>
    <div class="box" data-lat="54.023" data-lon="14.763" data-z="7">8</div>
    <div class="box" data-lat="54.077" data-lon="14.994" data-z="7">9</div>
    <div class="box" data-lat="54.1608" data-lon="15.404" data-z="7">10</div>
    <div class="box" data-lat="54.1785" data-lon="15.559" data-z="7">11</div>
    <div class="box" data-lat="54.1906" data-lon="16.1701" data-z="7">12</div>
    <div class="box" data-lat="54.232" data-lon="16.260" data-z="13">13</div>
    <div class="box" data-lat="54.255" data-lon="16.311" data-z="13">14</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(53.739, 14.145), 6).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')
   ...