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
|
{% 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> →</li>
<li><a href="/projects/" title="luxagraf projects page">Projects</a> →</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%}
|
