Merge pull request 'do not exclude indoor panoramas' (#37) from feature/pano-could-be-indoor into develop

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/37

public/static/css/game.css

@@ -150,39 +150,9 @@
 }
 
 #navigation {
-    position: absolute;
     z-index: 2;
 }
 
-#navigation .navigationItem {
-    margin-top: 10px;
-    opacity: 70%;
-    cursor: pointer;
-}
-
-#navigation .navigationItem:hover {
-    opacity: 100%;
-}
-
-#navigation .navigationItem div {
-    position: absolute;
-}
-
-#navigation .circleBackground {
-    width: 100%;
-    height: 100%;
-    opacity: 50%;
-}
-
-#navigation .navigationIcon {
-    width: 75%;
-    height: 75%;
-    margin: auto;
-    margin-top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-}
-
 @media screen and (max-width: 599px) {
     #mapName {
         display: none;
@@ -209,10 +179,6 @@
     #navigation {
         bottom: 25px;
         left: 10px;
-        width: 45px;
-    }
-    #navigation .navigationItem {
-        height: 45px;
     }
 }
 
@@ -260,10 +226,6 @@
     #navigation {
         bottom: 50px;
         left: 20px;
-        width: 60px;
-    }
-    #navigation .navigationItem {
-        height: 60px;
     }
     @media screen and (max-height: 424px) {
         #guess {
@@ -282,10 +244,6 @@
         #navigation {
             bottom: 30px;
             left: 10px;
-            width: 45px;
-        }
-        #navigation .navigationItem {
-            height: 45px;
         }
     }
 }

public/static/css/map_editor.css

@@ -55,6 +55,12 @@
     visibility: hidden;
 }
 
+#overlayControl {
+    bottom: 20px;
+    right: 10px;
+    z-index: 3;
+}
+
 #deleteButton {
     display: none;
 }

public/static/css/mapguesser.css

@@ -443,6 +443,43 @@ div.box {
     box-sizing: border-box;
 }
 
+.circleControl {
+    position: absolute;
+    width: 60px;
+    bottom: 20px;
+    right: 10px;
+}
+
+.circleControl .controlItem {
+    height: 60px;
+    margin-top: 10px;
+    opacity: 70%;
+    cursor: pointer;
+}
+
+.circleControl .controlItem:hover {
+    opacity: 100%;
+}
+
+.circleControl .controlItem div {
+    position: absolute;
+}
+
+.circleControl .controlBackground {
+    width: 100%;
+    height: 100%;
+    opacity: 50%;
+}
+
+.circleControl .controlIcon {
+    width: 75%;
+    height: 75%;
+    margin: auto;
+    margin-top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+}
+
 @media screen and (max-width: 599px) {
     header h1 span {
         display: none;
@@ -469,6 +506,12 @@ div.box {
     div.box {
         width: initial;
     }
+    .circleControl {
+        width: 45px;
+    }
+    .circleControl .controlItem {
+        height: 45px;
+    }
 }
 
 @media screen and (min-width: 600px) {
@@ -498,6 +541,12 @@ div.box {
         padding-top: 10px;
         padding-bottom: 10px;
     }
+    .circleControl {
+        width: 45px;
+    }
+    .circleControl .controlItem {
+        height: 45px;
+    }
 }
 
 @media screen and (min-height: 400px) and (max-height: 499px) {

public/static/js/map_editor.js

@@ -80,22 +80,16 @@
             MapEditor.panorama.setPano(panoLocationData.pano);
         },
 
-        requestPanoData: function (location, canBeIndoor) {
+        requestPanoData: function (location) {
             var sv = new google.maps.StreetViewService();
 
             sv.getPanorama({
                 location: location,
                 preference: google.maps.StreetViewPreference.NEAREST,
-                radius: 100,
-                source: canBeIndoor ? google.maps.StreetViewSource.DEFAULT : google.maps.StreetViewSource.OUTDOOR
+                radius: MapEditor.map.getSearchRadius(location),
             }, function (data, status) {
                 var panoLocationData = status === google.maps.StreetViewStatus.OK ? data.location : null;
 
-                if (panoLocationData === null && !canBeIndoor) {
-                    MapEditor.requestPanoData(location, true);
-                    return;
-                }
-
                 document.getElementById('loading').style.visibility = 'hidden';
 
                 MapEditor.loadPanoForNewPlace(panoLocationData);
@@ -377,8 +371,7 @@
                 LMapWrapper.divId = divId;
                 LMapWrapper.map = L.map(LMapWrapper.divId, {
                     center: { lat: 0., lng: 0. },
-                    zoom: 2,
-                    zoomControl: false
+                    zoom: 2
                 });
 
                 LMapWrapper.map.on('click', function (e) {
@@ -404,7 +397,7 @@
 
             LMapWrapper.loadMarkers(places);
 
-            document.getElementById('streetViewCoverSelector').disabled = true;
+            document.getElementById('streetViewCoverSelector').style.display = 'none';
         },
 
         hide: function () {
@@ -474,7 +467,11 @@
             LMapWrapper.markers.removeLayer(marker);
         },
 
-        toggleStreetViewCover: function () { }
+        toggleStreetViewCover: function () { },
+
+        getSearchRadius: function (location) {
+            return 100;
+        }
     };
 
     var GMapWrapper = {
@@ -517,6 +514,7 @@
                     zoomControlOptions: {
                         position: google.maps.ControlPosition.LEFT_BOTTOM
                     },
+                    streetViewControl: false,
                     draggableCursor: 'crosshair'
                 });
 
@@ -536,7 +534,7 @@
 
             GMapWrapper.loadMarkers(places);
 
-            document.getElementById('streetViewCoverSelector').disabled = false;
+            document.getElementById('streetViewCoverSelector').style.display = 'block'
         },
 
         hide: function () {
@@ -626,6 +624,20 @@
                 GMapWrapper.streetViewCover.setMap(GMapWrapper.map);
                 GMapWrapper.streetViewCoverOn = true;
             }
+        },
+
+        getSearchRadius: function (location) {
+            // source: https://www.yorku.ca/mack/CHI01.htm
+            var movementOffset = 4;
+
+            // source: https://groups.google.com/g/google-maps-js-api-v3/c/hDRO4oHVSeM/m/osOYQYXg2oUJ?pli=1
+            var metersPerPixel = 156543.03392 * Math.cos(location.lat * Math.PI / 180) / Math.pow(2, GMapWrapper.map.getZoom());
+
+            var minSearchRadius = 5;
+
+            var searchRadius = Math.max(minSearchRadius, Math.round(movementOffset * metersPerPixel));
+
+            return searchRadius;
         }
     };
 

src/PersistentData/Model/Place.php

@@ -140,7 +140,7 @@ class Place extends Model
         return $this->pov->getZoom();
     }
 
-    public function getFreshPanoId(bool $canBeIndoor = false): ?string
+    public function getFreshPanoId(): ?string
     {
         if (
             $this->panoIdCachedTimestamp !== null &&
@@ -152,19 +152,13 @@ class Place extends Model
         $request = new Request('https://maps.googleapis.com/maps/api/streetview/metadata', Request::HTTP_GET);
         $request->setQuery([
             'key' => $_ENV['GOOGLE_MAPS_SERVER_API_KEY'],
-            'location' => $this->position->getLat() . ',' . $this->position->getLng(),
-            'source' => $canBeIndoor ? 'default' : 'outdoor'
+            'location' => $this->position->getLat() . ',' . $this->position->getLng()
         ]);
 
         $response = $request->send();
         $panoData = json_decode($response->getBody(), true);
         $panoId = $panoData['status'] === 'OK' ? $panoData['pano_id'] : null;
 
-        // enable indoor panos if no outdoor found
-        if ($panoId === null && !$canBeIndoor) {
-            return $this->getFreshPanoId(true);
-        }
-
         $this->panoIdCached = $panoId;
         $this->panoIdCachedTimestamp = new DateTime();
 

views/admin/map_editor.php

@@ -18,11 +18,6 @@
                     <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>
@@ -71,6 +66,16 @@
     <div id="map" class="map">
         <div id="lmap" class="map"></div>
         <div id="gmap" class="map"></div>
+        <div id="overlayControl" class="circleControl">
+            <div id="streetViewCoverSelector" class="controlItem" title="Toggle Street View Cover">
+                <div>
+                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
+                </div>
+                <div>
+                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/street-view-cover.svg?rev=<?= REVISION ?>" alt="Street View Cover" class="controlIcon" />
+                </div>
+            </div>
+        </div>
     </div>
     <div id="panorama"></div>
     <div id="noPano">

views/game.php

@@ -59,21 +59,21 @@
             <button id="startNewGameButton" class="fullWidth">Play this map again</button>
         </div>
     </div>
-    <div id="navigation">
-        <div id="compassContainer" class="navigationItem">
+    <div id="navigation" class="circleControl">
+        <div id="compassContainer" class="controlItem">
             <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
             </div>
             <div>
-                <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
+                <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="controlIcon" />
             </div>
         </div>
-        <div id="returnToStart" class="navigationItem">
+        <div id="returnToStart" class="controlItem">
             <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
             </div>
             <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="controlIcon" />
             </div>
         </div>
     </div>