Add expand/collapse minimap on panorama view

panorama/static/panorama/css/celutz.css

@@ -281,6 +281,22 @@ fieldset#adding {
     margin: 2px;
     right: 0;
 }
+/* Expand button of the minimap on the panorama view*/
+#expandmap {
+    background-color: #fff; 
+    position: absolute;
+    bottom: 266px;
+    right: 12px;
+    height: 26px;
+    width: 26px;
+    line-height: 26px;
+    font-size: 18px;
+    text-indent: 1px;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    z-index: 1;
+}
 
 /* menu items on pano viewer */
 @media (min-width: 768px) {

panorama/static/panorama/js/pano.js

@@ -1281,6 +1281,7 @@ function load_map(){
         // update the panorama & minimap
         change_angle(); // update panorama & minimap
     });
+    hide_map()
 };
 
 function update_map(){
@@ -1304,3 +1305,21 @@ function update_map(){
     viewDirection.addTo(map);
 
 }
+
+function hide_map(){
+    /* Hide or show the map on panorama view
+    */
+    var map = $('#mapid')
+    $('#expandmap').click(function() {
+        if(map.css('visibility')=='visible'){
+            map.css('visibility','hidden');
+            $('#expandmap').css({'bottom': '12px','right':'12px'})
+            $('#expandmap').attr('class', 'fa fa-expand');
+        } else {
+            map.css('visibility','visible');
+            $('#expandmap').css({'bottom':'266px','right':'12px'})
+            $('#expandmap').attr('class', 'fa fa-compress');
+        }
+    });
+
+ }

panorama/templates/panorama/view.html

@@ -183,6 +183,7 @@ style="padding-left:0px"
       <input type="button" id="do-delete" class="btn btn-danger btn-sm" value={% trans "Delete" %} />
       <input type="button" id="do-cancel" class="btn btn-warning btn-sm" value={% trans "Cancel" %} />
     </p>
+    <a href="#" title="Hide/show map"><i id="expandmap" class="fa fa-compress" aria-hidden="true"></i></a>
     <div id="mapid"></div>
 {% endblock pano %}