public/static/img/street-view-cover.svg

@@ -0,0 +1,5 @@
+<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 16 16">
+  <path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z"/>
+  <path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z"/>
+</svg>

public/static/js/map_editor.js

@@ -399,6 +399,8 @@
             }
 
             LMapWrapper.loadMarkers(places);
+            
+            document.getElementById('streetViewCoverSelector').disabled = true;
         },
 
         hide: function () {
@@ -466,13 +468,17 @@
 
         removeMarker: function (marker) {
             LMapWrapper.markers.removeLayer(marker);
-        }
+        },
+
+        toggleStreetViewCover: function () { }
     };
 
     var GMapWrapper = {
         map: null,
         markers: null,
         divId: null,
+        streetViewCover: null,
+        streetViewCoverOn: false,
         iconCollection: {
             iconGreen: {
                 url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
@@ -514,6 +520,8 @@
                     draggableCursor: 'crosshair'
                 });
 
+                GMapWrapper.streetViewCover = new google.maps.StreetViewCoverageLayer();
+
                 GMapWrapper.map.addListener('click', function (mapsMouseEvent) {
                     GMapWrapper.placeMarker({
                         lat: mapsMouseEvent.latLng.lat(),
@@ -525,7 +533,7 @@
 
             GMapWrapper.loadMarkers(places);
 
-            GMapWrapper.loaded = true;
+            document.getElementById('streetViewCoverSelector').disabled = false;
         },
 
         hide: function () {
@@ -605,6 +613,16 @@
 
         removeMarker: function (marker) {
             GMapWrapper.markers.removeMarker(marker);
+        },
+
+        toggleStreetViewCover: function () {
+            if (GMapWrapper.streetViewCoverOn) {
+                GMapWrapper.streetViewCover.setMap(null);
+                GMapWrapper.streetViewCoverOn = false;
+            } else {
+                GMapWrapper.streetViewCover.setMap(GMapWrapper.map);
+                GMapWrapper.streetViewCoverOn = true;
+            }
         }
     };
 
@@ -691,8 +709,10 @@
             MapEditor.map = GMapWrapper;
             MapEditor.map.init('gmap', places);
         }
+    }
 
-
+    document.getElementById('streetViewCoverSelector').onclick = function () {
+        MapEditor.map.toggleStreetViewCover();
     }
 
 })();

views/admin/map_editor.php

@@ -18,6 +18,11 @@
                     <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" />
                 </button>
            </span><!--
+        --><span class="inline hideOnMobile" id="mapSelection">
+        <button id="streetViewCoverSelector">
+                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/street-view-cover.svg?rev=<?= REVISION ?>" alt="Street View Conver" />
+                </button>
+           </span><!--
         --><span class="inline hideOnMobile">
                <input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
                <button id="jumpButton" disabled >Jump</button>