Click here to skip to this page's main content.

New to the Open Library? — Learn how it works

/libraries page

This doc was last edited by Anand Chitipothu June 22, 2011.

plugin openlibrary
Templates in the website are disabled now. Editing them will not have any effect on the live website.
   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>