revamped slideshow with jquery, maps and exif data

1 files changed, 124 insertions, 0 deletions

diff --git a/templates/details/national-parks.html b/templates/details/national-parks.html
new file mode 100644
index 0000000..d9aabc3
--- /dev/null
+++ b/templates/details/national-parks.html
@@ -0,0 +1,124 @@
+{% extends 'base.html' %}
+{% load typogrify %}
+{% block pagetitle %}Luxagraf | Projects | National Parks {% endblock %}
+{% block metadescription %}{% endblock %}
+
+{% block extrahead %}<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+
+<script src="http://documentcloud.github.com/underscore/underscore-min.js" type="text/javascript"></script>
+
+<link rel="stylesheet" 
+          href="http://127.0.0.1:8000/media/css/dark.css" 
+          type="text/css" 
+          media="screen">
+
+{% endblock %}
+
+
+{%block bodyid%}id="projects"{%endblock%}	
+
+{% block bodyevents %}onload="initialize()"{% endblock %}
+				
+{% block primary %}
+<article>
+    <ul id="breadcrumbs">
+        <li><a href="/" title="luxagraf homepage">Home</a> &rarr;</li>
+        <li><a href="/projects/" title="luxagraf projects page">Projects</a> &rarr;</li>
+        <li>National Parks</li>
+    </ul>
+    
+    <ul id="parks"> 
+        {% for object in object_list %}
+        <li>
+            <div class="figure">
+                <img src="{{object.image.url}}" alt="{{object.title}}" />
+            </div>
+            <h4>{{object.unit_name}} {{object.type}}</h4>
+            <div class="legend">
+                <div class="desc">
+                    <h5>{{object.tag_line}}</h5>
+                    <div>{{object.dek|safe}}
+                    <ul class="buttons">
+                        <li><a href="{{object.post.get_absolute_url}}" title="{{object.post.title}}">Read Journal</a></li>
+                        {%if object.gallery%}<li><a href="{{object.gallery.get_absolute_url}}" title="Photos of {{object.unit_name}}">View Photos</a></li>{%endif%}
+                    </ul>
+                    </div>
+                    <dl>
+                        <dt>Visited:</dt>
+                        <dd>{{object.date_visited_begin|date:"m/d/y"}} - {{object.date_visited_end|date:"m/d/y"}}</dd>
+                        <dt>State:</dt>
+                        <dd>{{object.state}}</dd>
+                        <dt>Cost:</dt>
+                        <dd>${{object.fee}} / ${{object.camping_fee}} (camping)</dd>
+                        <dt>Website:</dt>
+                        <dd>{{object.url|urlize}}</dd>
+                    </dl>
+                </div>
+                
+                <div class="map" id="map-canvas-{{forloop.counter}}">
+                </div>
+            </div>
+            
+        </li>
+        {% endfor %}
+    </ul>
+
+</article>
+
+{% endblock %}
+
+{% block js %}
+<script type="text/javascript">
+function createPolygons(areajson, bounds){
+  var coords = areajson.coordinates;
+  var polygons = _(coords).reduce([], function(memo_n, n) {
+    var polygonpaths = _(n).reduce(new google.maps.MVCArray(), function(memo_o, o) {
+      var polygoncords = _(o).reduce(new google.maps.MVCArray(), function(memo_p, p) {
+        var mylatlng = new google.maps.LatLng(p[1], p[0]);
+        if(bounds){
+          bounds.extend(mylatlng);
+        }
+        memo_p.push(mylatlng);
+        return memo_p;
+      });
+      memo_o.push(polygoncords);
+      return memo_o;
+    });
+    var polygon = new google.maps.Polygon({
+      paths: polygonpaths,
+      strokeColor: "#201a11",
+      strokeOpacity: 0.8,
+      strokeWeight: 2,
+      fillColor: "#201a11",
+      fillOpacity: 0.35
+    });
+    memo_n.push(polygon);
+    return memo_n;
+  });
+  return polygons;
+}
+function initialize() {
+    {% for object in object_list %}
+    var latlng = new google.maps.LatLng({{object.mpoly.centroid.y}},{{object.mpoly.centroid.x}});
+    var myOptions = {
+      zoom: {{object.zoom}},
+      center: latlng,
+      disableDefaultUI: true,
+      navigationControl: true,
+      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
+    
+      mapTypeId: google.maps.MapTypeId.TERRAIN
+      
+    };
+    var map = new google.maps.Map(document.getElementById("map-canvas-{{forloop.counter}}"), myOptions);
+    var poly = createPolygons({{object.mpoly.geojson|safe}});
+    for (i=0;i<=poly.length-1;i++) {
+        poly[i].setMap(map);
+        
+    }
+    {% endfor %}
+  }
+
+  
+</script>
+{%endblock%}