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>

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;

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);

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 -%}