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
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128

$def with (branches=None)

$ _x = ctx.setdefault('bodyclass', 'map')

$ title = "Borrow"

$var title: $title

<div id="contentHead">
    $:render_template("borrow/navigation", path="/libraries")
    <h1>$_("Borrow eBooks")</h1>
</div>

<div id="contentBody" class="map">

<script type="text/javascript"> 
    function jumpTo(lat, lon, zoom, link) {
        var lonLat = new OpenLayers.LonLat( lon, lat)
              .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
              );
        map.setCenter (lonLat, zoom);
 
        \$('.map_jump_link').css({'color':'#036DAA','text-decoration':'underline','font-weight':'normal','cursor':'pointer'});
        \$(link).css({'color':'#748D36','text-decoration':'none','font-weight':'bold','cursor':'default'});
        \$.scrollTo( \$('#contentBody'), 800);
    }
    </script>

    <div id="mapdiv"></div>
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> 
    <script type="text/javascript"> 
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
       
    var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"/libraries/locations.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
 
    
    //Set start centrepoint and zoom
    //TODO: Is it possible to just zoom to extents of defined markers instead?
    
    var lonLat = new OpenLayers.LonLat(0, 0)
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=2;
    map.setCenter (lonLat, zoom); 

    OpenLayers.Feature.prototype.createPopup = function(closeBox){
        if(this.lonlat!=null){
            var id=this.id+"_popup";
            var anchor=(this.marker)?this.marker.icon:null;
            if(!this.popup){
                this.popup=new this.popupClass(id, this.lonlat, new OpenLayers.Size(200,100), this.data.popupContentHTML, anchor,true);
            }
            if(this.data.overflow!=null){
                this.popup.contentDiv.style.overflow=this.data.overflow;
            }
            this.popup.feature=this;
        }
        return this.popup;
    }    
    </script>

</div>

<div id="contentMeta">
    <br/>
    <h3 class="inline">Participating Libraries</h3>
    <p class="inline sansserif small">&nbsp;&nbsp;<a href="/libraries/register">Register Your Library?</a></p>
    <div class="clearfix"></div>
<script type="text/javascript">
<!--
\$(function () {
    \$(".columns").columnize({columns: 3, balance: true});
    \$(".columns .column:last").css("margin-right","0");
});
//-->
</script>

<style type="text/css">
#content .columns {
    float: left;
    width: 918px;
    margin: 20px 0;
}
#content .column {
    width: 286px;
    margin-right: 30px;
    float: left;
}
#content ul.places {
    position: relative;
    margin-bottom: 20px;
}
#content ul.places li.label {
    position: absolute; 
    top: 0; 
    left: -1.5em;
}
#content ul.places li {
    list-style: none;
    color: #999;
}
#content ul.places li .city {
    font-style: italic;
}
</style>

    <div class="columns">
        $for letter, group in branches:
        <ul class="places sansserif smallest">
            <li class="label">${letter}.</li>
            $for branch in group:
                <li>
                    <span class="name">$branch.name</span>,
                    <span class="city">$branch.city</span>
                </li>
        </ul>
    </div>

</div>