Basic Openlayers template

basic-county.html

{% extends "base.html" %}
{% block before_body_close %}
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, vector, wkt, features, options, geom;
var collect = [];
var f = [];
var src = new OpenLayers.Projection('EPSG:4326');
var dest = new OpenLayers.Projection('EPSG:900913');
window.onload = function(){
    options = {
       'projection' : new OpenLayers.Projection("EPSG:900913"),
       'numZoomLevels' : 20,
       'displayProjection' : new OpenLayers.Projection("EPSG:4326"),
       'units' : "m",
       'maxResolution' : 156543.0339,
       'maxExtent' : new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508)
    };
    map = new OpenLayers.Map('map', options);
    layer = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)");
    map.addLayer(layer);
    map.setCenter(
        new OpenLayers.LonLat(-97, 38).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
        ),
    5
    );
    vector = new OpenLayers.Layer.Vector("Regions");
    wkt = new OpenLayers.Format.WKT();
    {% for county in counties %}
        features = wkt.read('{{ county.mpoly }}');
        geom = features.geometry.transform(src, dest);
        collect.push(geom);
        var feat = new OpenLayers.Feature.Vector(geom);
        f.push(feat);
    {% endfor %}
    vector.addFeatures(f);
    map.addLayer(vector);
};
</script>
{% endblock %}