Pop up OpenStreetMap license on demand (#410)

Only a short blurb "see map license" in the small map which will
pop up the full license text via jquery when clicked.
Adapt the license text as recommended by OpenStreetMap
http://www.openstreetmap.org/copyright and link there.

The disadvantage is that this only works when Javascript is enabled,
but as the map only works when Javascript is enabled in the first place,
this should not be too much of a limitation.

TODO: Our esteemed web designer needs to have a look at the desired color
style for this. Right now, I simply placed it in the message_warning
class. This might want fine-tuning.

Signed-off-by: Sebastian Spaeth <Sebastian@SSpaeth.de>

3 files changed, 22 insertions, 7 deletions

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 4120f965..f8a9e014 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -259,6 +259,10 @@ text-align: center;
   height: 0;
 }
 
+.hidden {
+  display: none;
+}
+
 .media_sidebar h3 {
 	font-size: 1em;
 	margin: 0 0 5px;
diff --git a/mediagoblin/static/js/geolocation-map.js b/mediagoblin/static/js/geolocation-map.js
index de49a37d..26d94c5d 100644
--- a/mediagoblin/static/js/geolocation-map.js
+++ b/mediagoblin/static/js/geolocation-map.js
@@ -31,19 +31,15 @@ $(document).ready(function () {
     var map = new L.Map('tile-map');
 
     var mqtileUrl = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg';
-    var mqtileAttrib = 'Map data © '
-	+ String(new Date().getFullYear())
-	+ ' OpenStreetMap contributors, CC-BY-SA.'
-	+ ' Imaging © '
-	+ String(new Date().getFullYear())
-	+ ' <a target="_blank" href="http://mapquest.com">MapQuest</a>.';
+    var mqtileAttrib = '<a id="osm_license_link">see map license</a>';
     var mqtile = new L.TileLayer(
 	mqtileUrl,
 	{maxZoom: 18,
 	 attribution: mqtileAttrib,
 	 subdomains: '1234'});
 
-    var location = new L.LatLng(latitude, longitude); 
+    map.attributionControl.setPrefix('');
+    var location = new L.LatLng(latitude, longitude);
     map.setView(location, 13).addLayer(mqtile);
 
     var marker = new L.Marker(location);
diff --git a/mediagoblin/templates/mediagoblin/utils/geolocation_map.html b/mediagoblin/templates/mediagoblin/utils/geolocation_map.html
index cd57d1f8..b48678bb 100644
--- a/mediagoblin/templates/mediagoblin/utils/geolocation_map.html
+++ b/mediagoblin/templates/mediagoblin/utils/geolocation_map.html
@@ -33,6 +33,21 @@
 	  <input type="hidden" id="gps-latitude"
 		 value="{{ lat }}" />
 	</div>
+        <script> <!-- pop up full OSM license when clicked -->
+          $(document).ready(function(){
+            $("#osm_license_link").click(function () {
+              $("#osm_attrib").slideToggle("slow");
+              });
+          });
+        </script>
+        <div id="osm_attrib" class="hidden"><ul><li>
+          Data &copy;<a
+            href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>
+          contributors
+          </li><li>Imaging &copy;<a
+          href="http://mapquest.com">MapQuest</a></li><li>Maps powered by
+          <a href="http://leafletjs.com/"> Leaflet</a></li></ul>
+        </div>
         <p>
 	  <small>
 	    {% trans -%}