From 165b5d4da073358e68f1731655d016c2cbb26dbe Mon Sep 17 00:00:00 2001
From: luxagraf <sng@luxagraf.net>
Date: Tue, 27 May 2014 10:13:56 -0400
Subject: removed goodle maps, changed html to use data-* attributes

---
 design/templates/details/photo_galleries.html | 29 +++++++++--
 site/media/js/photos.js                       | 73 ++++++++-------------------
 site/media/js/photos.min.js                   | 18 +++----
 3 files changed, 54 insertions(+), 66 deletions(-)

diff --git a/design/templates/details/photo_galleries.html b/design/templates/details/photo_galleries.html
index d992af4..4e8fdce 100644
--- a/design/templates/details/photo_galleries.html
+++ b/design/templates/details/photo_galleries.html
@@ -8,6 +8,26 @@
 
 {% block metadescription %}{{object.set_desc|truncatewords:30|smartypants|safe}}{% endblock %}
 
+{% block extrahead %}
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
+    <!--[if lte IE 8]>
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
+    <![endif]-->
+    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
+    <script type="text/javascript">
+        if (typeof L === "undefined") {
+            document.write(unescape("%3Cscript src='/media/js/leaflet-0.5/leaflet.js' type='text/javascript'%3E%3C/script%3E"));
+}
+    </script>
+
+     <style>
+         #map-canvas img{ border: none;}
+     </style>
+
+
+
+
+{% endblock %}
 {%block bodyid%}class="image_gallery"{%endblock%}	
 
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
@@ -24,7 +44,7 @@
             <div class="figcaption">
                 <div class="caption" id="id-{{photo.id}}">
                     <h3>{{photo.title}} &nbsp;&nbsp;<time datetime="{{photo.exif_date|date:'c'}}" pubdate>{{photo.exif_date|date:"M j, Y"}}</time></h3>
-                    <a class="map-link" href="#" title="{{photo.lat}},{{photo.lon}},id-{{photo.id}}">Map</a>
+                    <a class="map-link" href="#" data-latitude="{{photo.lat}}" data-longitude="{{photo.lon}}" data-imgid="id-{{photo.id}}">Map</a>
                     {%if photo.description %}<p>{{photo.description|safe}}</p> {%endif%}  
                 </div>
                 <div class="photo-options">
@@ -63,8 +83,11 @@
 {% block js %}
     <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
     <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.scrollTo-1.4.2-min.js"></script>
-    <script type="text/javascript" src="{{MEDIA_URL}}js/photos.min.js" ></script>
-    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+    <!--<script type="text/javascript" src="{{MEDIA_URL}}js/photos.min.js" ></script>-->
+    <script type="text/javascript" src="/media/js/leaflet-providers.js"></script>   
+    <script type="text/javascript" src="/media/js/photos.min.js" ></script>
+
+
 {% endblock%}
 
 
diff --git a/site/media/js/photos.js b/site/media/js/photos.js
index 32e262f..1331b0e 100644
--- a/site/media/js/photos.js
+++ b/site/media/js/photos.js
@@ -1,48 +1,19 @@
 //Utility functions for map info window
-function mapit(latlontitle) {
-    lat = parseFloat(latlontitle.split(',')[0]);
-    lon = parseFloat(latlontitle.split(',')[1]);
-    //title= latlontitle.split(',')[2];
-    elid= latlontitle.split(',')[2];
-    centerCoord = new google.maps.LatLng(lat, lon);
-    var mapitinit;
-    if (mapitinit == true) {
-        mapPanTo();
-    } else {
-        mapInit();
-    }
-    
-    function mapInit()  {
-        var mapOptions = {
-            zoom: 8,
-            center: centerCoord,
-            disableDefaultUI: true,
-            navigationControl: true,
-            mapTypeId: google.maps.MapTypeId.TERRAIN,
-            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
-        };
-        map = new google.maps.Map(document.getElementById("mw-"+elid), mapOptions);
-        var marker = new google.maps.Marker({
-            position: centerCoord, 
-            map: map 
-            //title: title
-        });   
-        mapitinit = true;
-    }
-    function mapPanTo(){
-        var marker = new google.maps.Marker({
-            position: centerCoord, 
-            map: map
-            //title: title
-        });  
-        map.panTo(centerCoord);
-    }
-}  
-
-//########## utility functions to create/remove map container ############
+function mapit(obj) {
+    lat = parseFloat(obj.attr('data-latitude'));
+    lon = parseFloat(obj.attr('data-longitude'));
+    elid= obj.attr('data-imgid');
+    map = L.map(document.getElementById("mw-"+elid));
+    centerCoord = new L.LatLng(lat, lon);
+    zoom = 8;
+    L.tileLayer.provider('Esri.WorldTopoMap', {maxZoom: 18, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Tiles © Esri and the GIS User Community'}).addTo(map);
+    map.setView(centerCoord, zoom);
+    L.marker([lat, lon]).addTo(map);
+}
+    //########## utility functions to create/remove map container ############
 function create_map(obj) {
     //find id of this image caption:
-    imgid = obj.title.split(',')[2];
+    var imgid = obj.attr('data-imgid');
     //create container divs
     $('<div class="map-container" id="mc-'+imgid+'">').insertBefore($(obj).parent().parent());
     //$(obj).parent().parent().parent().prepend('<div class="map-container" id="mc-'+imgid+'">');
@@ -54,7 +25,7 @@ function create_map(obj) {
      }
     });
     
-    mapit(obj.title);
+    mapit(obj);
 }
 function remove_map(imgid) {
     $('#mc-'+imgid).remove();
@@ -65,31 +36,31 @@ $(document).ready(function(){
 
     //set up click events for map button
     $('.map-link').click( function() {
-        imgid = this.title.split(',')[2];
+        imgid = $(this).attr('data-imgid');
         if ($('#mc-'+imgid).is(":visible")) {
             remove_map(imgid);  
         } else {
-            create_map(this);
+            create_map($(this));
         }
         return false;
     
     });
-    var $ele = $('#slides').children()
-    var $curr = 0
+    var $ele = $('#slides').children();
+    var $curr = 0;
 	$(document).bind('keydown', function (e) {
         var code = e.which;
         switch (code) {
             case 39:
                 if ($curr <= $ele.size()) {
                     $.scrollTo($ele[$curr], 800 );
-                    $curr++
+                    $curr++;
                 }
                 break;
             case 37:
                 if ($curr > 0) {
-                    $curr--
-                    var $now = $curr
-                    $now--
+                    $curr--;
+                    var $now = $curr;
+                    $now--;
                     $.scrollTo($ele[$now], 800 );
                 }
                 break;
diff --git a/site/media/js/photos.min.js b/site/media/js/photos.min.js
index b99b0e2..92afa82 100644
--- a/site/media/js/photos.min.js
+++ b/site/media/js/photos.min.js
@@ -1,15 +1,9 @@
-function mapit(latlontitle){lat=parseFloat(latlontitle.split(',')[0]);lon=parseFloat(latlontitle.split(',')[1]);elid=latlontitle.split(',')[2];centerCoord=new google.maps.LatLng(lat,lon);var mapitinit;if(mapitinit==true){mapPanTo();}else{mapInit();}
-function mapInit(){var mapOptions={zoom:8,center:centerCoord,disableDefaultUI:true,navigationControl:true,mapTypeId:google.maps.MapTypeId.TERRAIN,navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}};map=new google.maps.Map(document.getElementById("mw-"+elid),mapOptions);var marker=new google.maps.Marker({position:centerCoord,map:map});mapitinit=true;}
-function mapPanTo(){var marker=new google.maps.Marker({position:centerCoord,map:map});map.panTo(centerCoord);}}
-function create_map(obj){imgid=obj.title.split(',')[2];$('<div class="map-container" id="mc-'+imgid+'">').insertBefore($(obj).parent().parent());$('#mc-'+imgid).append('<div class="map-wrapper" id="mw-'+imgid+'">');$('#mc-'+imgid).css({bottom:function(index,value){return parseFloat($(obj).parent().parent().height())+20;}});mapit(obj.title);}
+
+function mapit(obj){lat=parseFloat(obj.attr('data-latitude'));lon=parseFloat(obj.attr('data-longitude'));elid=obj.attr('data-imgid');map=L.map(document.getElementById("mw-"+elid));centerCoord=new L.LatLng(lat,lon);zoom=8;L.tileLayer.provider('Esri.WorldTopoMap',{maxZoom:18,attribution:'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Tiles © Esri and the GIS User Community'}).addTo(map);map.setView(centerCoord,zoom);L.marker([lat,lon]).addTo(map);}
+function create_map(obj){var imgid=obj.attr('data-imgid'); $('<div class="map-container" id="mc-'+imgid+'">').insertBefore($(obj).parent().parent());$('#mc-'+imgid).append('<div class="map-wrapper" id="mw-'+imgid+'">'); $('#mc-'+imgid).css({bottom:function(index,value){return parseFloat($(obj).parent().parent().height())+20;}});mapit(obj);}
 function remove_map(imgid){$('#mc-'+imgid).remove();}
-$(document).ready(function(){$('.map-link').click(function(){imgid=this.title.split(',')[2];if($('#mc-'+imgid).is(":visible")){remove_map(imgid);}else{create_map(this);}
-return false;});var $ele=$('#slides').children()
-var $curr=0
-$(document).bind('keydown',function(e){var code=e.which;switch(code){case 39:if($curr<=$ele.size()){$.scrollTo($ele[$curr],800);$curr++}
-break;case 37:if($curr>0){$curr--
-var $now=$curr
-$now--
-$.scrollTo($ele[$now],800);}
+$(document).ready(function(){ $('.map-link').click(function(){imgid=$(this).attr('data-imgid');if($('#mc-'+imgid).is(":visible")){remove_map(imgid);}else{create_map($(this));}
+return false;});var $ele=$('#slides').children();var $curr=0;$(document).bind('keydown',function(e){var code=e.which;switch(code){case 39:if($curr<=$ele.size()){$.scrollTo($ele[$curr],800);$curr++;}
+break;case 37:if($curr>0){$curr--;var $now=$curr;$now--;$.scrollTo($ele[$now],800);}
 break;}
 return;});});
\ No newline at end of file
-- 
cgit v1.2.3