2 files changed, 32 insertions, 2 deletions
diff --git a/design/sass/_birds.scss b/design/sass/_birds.scss
index 8e82411..9662f7c 100644
--- a/design/sass/_birds.scss
+++ b/design/sass/_birds.scss
@@ -19,3 +19,17 @@
     }
     .audio small { display: block;}
 }
+
+.birds {
+    .map { 
+        margin: 0 auto;
+        width: 99%; 
+        height: 200px; 
+        @include constrain_wide;
+        @include breakpoint(beta) {
+            @include constrain_narrow;
+        }
+    }
+}
+
+
diff --git a/design/templates/details/bird.html b/design/templates/details/bird.html
index 0a91317..9676683 100644
--- a/design/templates/details/bird.html
+++ b/design/templates/details/bird.html
@@ -1,13 +1,29 @@
 {% extends 'base.html' %}
 {% block extrahead %}
+<style>
+#detail-map-canvas { height: 100%;}
+</style>
 {% endblock %}
+{% block bodyid %}class="birds"{%endblock%}
 {% block primary %}
 <main>
-{{object.common_name}}
+<article>
+<h1>{{object.common_name}}</h1>
+<p id="endnode">Seen by {% for person in sighting.seen_by.all %}<a href="/birds/{{person}}/">{{person}}</a>{%if forloop.last %}{%else%}{% if forloop.revcounter == 2 %}, and {%else%}, {%endif%}{%endif%}{%endfor%}</p>
+
 <audio autoplay="autoplay" controls="controls">  
     <source src="/media/{{recording.audio}}" />  
 </audio> 
-
+</article>
 </main>
 {% endblock %}
 
+{% block js %}
+<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
+<script src="/media/js/detail.min.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+    createBirdMap({{sighting.latitude}},{{sighting.longitude}}, 12, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}); return false;
+}
+</script>
+{% endblock %}