snippet.js

$(function (){
    var mm = com.modestmaps;
    var m = new mm.Map('map', new com.modestmaps.WaxProvider({
        baseUrl: 'http://a.tiles.mapbox.com/bclc/',
        layerName: 'bclc-usa-glass',
        zoomRange: [4, 8]
    }),
    null,
    [ new mm.DragHandler,
      new mm.DoubleClickHandler,
      new mm.TouchHandler ]
    );
    m.setCenterZoom(new com.modestmaps.Location(40, -75), 4);
    var overlay = {
        baseUrl: 'http://csr.bclcmaps.com/tiles/',
        layerName: 'eyJib29sIjp7Im11c3QiOlt7ImZpZWxkIjp7InB1Ymxpc2hlZCI6dHJ1ZX19LHsidGVybSI6eyJjYXRlZ29yeSI6IkVudmlyb25tZW50In19XX19',
        zoomRange: [4, 8]
    };
    var o = new mm.Map('map-overlay', new com.modestmaps.WaxProvider(overlay)).zoomer().interaction();
    var layerURL = overlay.baseUrl +'1.0.0/'+ overlay.layerName +'/layer.json';
    o.waxGM.getFormatter(layerURL, function() {
        o.waxGM.formatters[layerURL].f = function(options, data) {
            var company = $.parseJSON(data.company);
            return '<div class="title"><strong>PROJECT</strong><h3>'+data.name+' by <a href="'+company.link+ '">'+company.name+'</a></h3></div>'+
                   '<div class="content"><div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div><div class="about"><strong>ABOUT</strong>'+data.image+
                   data.description+'</div><strong>EXPECTED RESULTS</strong>'+data.results+'</div>'+
                   '<div class="categories"><strong>ISSUES</strong>'+data.categories+'</div>';
        };
    });
    o.setCenterZoom(new com.modestmaps.Location(40, -75), 4);

    o.addCallback('drawn', function(modestmap, e) {
        m.setCenterZoom(o.getCenter(), o.getZoom());
    });
    
    // Add tinyscrollbar
    $('div.content').tinyscrollbar();
});