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>

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 4120f9650353c82ca2502d41979446a5753e7198..f8a9e0146d9c305d7337f15b20b96042425e39cd 100644 (file)
--- 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 de49a37ddcd0ebfe9918ec4240c1f23b22ba9f22..26d94c5d844ec86a461946036e044f26b95d878f 100644 (file)
--- 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 cd57d1f89538aaf45a8ee3963c0398ddcdc6c1ad..b48678bb825643ec8679b31df12bc8be68146f9c 100644 (file)
--- 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 -%}