organised Leaflet map and Google Maps into wrappers

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/30
Reviewed-by: Pőcze Bence <bence@pocze.ch>

public/static/css/game.css

@@ -149,13 +149,47 @@
     color: #701919;
 }
 
+#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;
     }
     #showGuessButtonContainer {
         position: absolute;
-        left: 20px;
+        left: 65px;
         bottom: 30px;
         right: 20px;
         z-index: 2;
@@ -172,6 +206,14 @@
     #scoreBarBase {
         width: 100%;
     }
+    #navigation {
+        bottom: 25px;
+        left: 10px;
+        width: 45px;
+    }
+    #navigation .navigationItem {
+        height: 45px;
+    }
 }
 
 @media screen and (min-width: 600px) {
@@ -215,6 +257,14 @@
     #scoreBarBase {
         width: 60%;
     }
+    #navigation {
+        bottom: 50px;
+        left: 20px;
+        width: 60px;
+    }
+    #navigation .navigationItem {
+        height: 60px;
+    }
     @media screen and (max-height: 424px) {
         #guess {
             top: 10px;
@@ -229,5 +279,13 @@
             right: 20px;
             bottom: 30px;
         }
+        #navigation {
+            bottom: 30px;
+            left: 10px;
+            width: 45px;
+        }
+        #navigation .navigationItem {
+            height: 45px;
+        }
     }
 }

public/static/css/mapguesser.css

@@ -12,6 +12,10 @@ html, body {
     padding: 0;
 }
 
+body {
+    background-color: #cccccc;
+}
+
 button::-moz-focus-inner, input::-moz-focus-inner {
     padding: 0;
     border: 0;
@@ -374,6 +378,7 @@ header>p>span:not(:last-child) {
 }
 
 main {
+    background-color: #ffffff;
     padding: 6px 12px;
 }
 

public/static/img/circle_background.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+  <circle cx="50%" cy="50%" r="50%" fill="black" />
+</svg>

public/static/img/house-fill.svg

@@ -0,0 +1,5 @@
+<!-- Original image: 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" width="100%" height="100%" fill="#3183ce" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+  <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+</svg>

public/static/js/game.js

@@ -17,7 +17,7 @@
         adaptGuess: false,
         googleLink: null,
 
-        readyToContinue: false,
+        readyToContinue: true,
         timeoutEnd: null,
         countdownHandler: null,
 
@@ -97,6 +97,8 @@
             },
 
             initialize: function (data) {
+                Game.readyToContinue = false;
+
                 if (data.history.length === 0 && !data.place) {
                     var div = document.getElementById('players');
 
@@ -334,6 +336,9 @@
             document.getElementById('guess').style.visibility = null;
             document.getElementById('guess').classList.remove('result');
 
+            // needs to be set visible after the show guess map hid it in mobile view
+            document.getElementById("navigation").style.visibility = 'visible';
+
             Game.initialize();
         },
 
@@ -358,7 +363,10 @@
             document.getElementById('panoCover').style.visibility = 'hidden';
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
-            document.getElementById('guess').classList.remove('result')
+            document.getElementById('guess').classList.remove('result');
+
+            // needs to be set visible after the show guess map hid it in mobile view
+            document.getElementById("navigation").style.visibility = 'visible';
 
             Game.map.setOptions({
                 draggableCursor: 'crosshair'
@@ -864,11 +872,13 @@
     document.getElementById('showGuessButton').onclick = function () {
         this.style.visibility = 'hidden';
         document.getElementById('guess').style.visibility = 'visible';
+        document.getElementById('navigation').style.visibility = 'hidden';
     }
 
     document.getElementById('closeGuessButton').onclick = function () {
         document.getElementById('showGuessButton').style.visibility = null;
         document.getElementById('guess').style.visibility = null;
+        document.getElementById('navigation').style.visibility = 'visible';
     }
 
     document.getElementById('guessButton').onclick = function () {
@@ -936,4 +946,8 @@
             }
         });
     }
+
+    document.getElementById('returnToStart').onclick = function () {
+        Game.loadPano(Game.panoId, Game.pov);
+    }
 })();

public/static/js/map_editor.js

@@ -7,7 +7,6 @@
             description: null
         },
         map: null,
-        markers: null,
         panorama: null,
         selectedMarker: null,
         added: {},
@@ -124,10 +123,7 @@
             MapEditor.panorama.setVisible(false);
 
             if (marker.placeId) {
-                MapEditor.markers.removeLayer(MapEditor.selectedMarker);
-                MapEditor.map.addLayer(MapEditor.selectedMarker);
-                marker.setIcon(IconCollection.iconBlue);
-                marker.setZIndexOffset(2000);
+                MapEditor.map.changeMarkerIcon(marker, MapEditor.map.iconCollection.iconBlue);
 
                 document.getElementById('deleteButton').style.display = 'block';
 
@@ -165,13 +161,13 @@
             var placeId = MapEditor.selectedMarker.placeId
 
             if (places[placeId].id && !del) {
-                MapEditor.map.removeLayer(MapEditor.selectedMarker);
-                MapEditor.markers.addLayer(MapEditor.selectedMarker);
-                MapEditor.selectedMarker.setIcon(places[placeId].noPano ? IconCollection.iconRed : IconCollection.iconGreen);
-                MapEditor.selectedMarker.setZIndexOffset(1000);
+                MapEditor.map.changeMarkerIcon(
+                    MapEditor.selectedMarker,
+                    places[placeId].noPano ? MapEditor.map.iconCollection.iconRed : MapEditor.map.iconCollection.iconGreen
+                );
             } else {
                 delete places[placeId];
-                MapEditor.map.removeLayer(MapEditor.selectedMarker);
+                MapEditor.map.removeMarker(MapEditor.selectedMarker);
             }
 
             document.getElementById('deleteButton').style.display = 'none';
@@ -310,42 +306,9 @@
                 var placeId = addedPlaces[i].id;
                 places[tempId].id = placeId;
             }
-        },
-
-        // TODO: check whether marker is already existing on the map for the coordinates
-        //       or alternatively block saving for matching coordinates
-        placeMarker: function (latlng) {
-            var marker = L.marker(latlng, {
-                icon: IconCollection.iconBlue,
-                zIndexOffset: 2000
-            })
-                .addTo(MapEditor.map)
-                .on('click', function () {
-                    MapEditor.select(this);
-                });
-
-            MapEditor.select(marker);
         }
     };
 
-    var IconCollection = {
-        iconGreen: L.icon({
-            iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
-            iconSize: [24, 32],
-            iconAnchor: [12, 32]
-        }),
-        iconRed: L.icon({
-            iconUrl: STATIC_ROOT + '/img/markers/marker-red.svg?rev=' + REVISION,
-            iconSize: [24, 32],
-            iconAnchor: [12, 32]
-        }),
-        iconBlue: L.icon({
-            iconUrl: STATIC_ROOT + '/img/markers/marker-blue.svg?rev=' + REVISION,
-            iconSize: [24, 32],
-            iconAnchor: [12, 32]
-        }),
-    };
-
     var Util = {
         getHighResData: function () {
             if (window.devicePixelRatio >= 4) {
@@ -384,12 +347,34 @@
         }
     };
 
-    MapEditor.map = L.map('map', {
+    var LMapWrapper = {
+        map: null,
+        markers: null,
+        iconCollection: {
+            iconGreen: L.icon({
+                iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
+                iconSize: [24, 32],
+                iconAnchor: [12, 32]
+            }),
+            iconRed: L.icon({
+                iconUrl: STATIC_ROOT + '/img/markers/marker-red.svg?rev=' + REVISION,
+                iconSize: [24, 32],
+                iconAnchor: [12, 32]
+            }),
+            iconBlue: L.icon({
+                iconUrl: STATIC_ROOT + '/img/markers/marker-blue.svg?rev=' + REVISION,
+                iconSize: [24, 32],
+                iconAnchor: [12, 32]
+            })
+        },
+
+        init: function (divId, places) {
+            LMapWrapper.map = L.map('map', {
                 zoomControl: false
             });
 
-    MapEditor.map.on('click', function (e) {
-        MapEditor.placeMarker(e.latlng);
+            LMapWrapper.map.on('click', function (e) {
+                LMapWrapper.placeMarker(e.latlng);
             });
 
             var highResData = Util.getHighResData();
@@ -402,11 +387,16 @@
                 zoomOffset: highResData.zoomOffset,
                 minZoom: highResData.minZoom,
                 maxZoom: highResData.maxZoom
-    }).addTo(MapEditor.map);
+            }).addTo(LMapWrapper.map);
 
-    MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
+            LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
 
-    MapEditor.markers = L.markerClusterGroup({
+            LMapWrapper.loadMarkers(places);
+        },
+
+        loadMarkers: function (places) {
+
+            LMapWrapper.markers = L.markerClusterGroup({
                 maxClusterRadius: 50
             });
 
@@ -418,10 +408,10 @@
                 var place = places[placeId];
 
                 var marker = L.marker({ lat: place.lat, lng: place.lng }, {
-            icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen,
+                    icon: place.noPano ? LMapWrapper.iconCollection.iconRed : LMapWrapper.iconCollection.iconGreen,
                     zIndexOffset: 1000
                 })
-            .addTo(MapEditor.markers)
+                    .addTo(LMapWrapper.markers)
                     .on('click', function () {
                         MapEditor.select(this);
                     });
@@ -429,7 +419,171 @@
                 marker.placeId = place.id;
             }
 
-    MapEditor.map.addLayer(MapEditor.markers);
+            LMapWrapper.map.addLayer(LMapWrapper.markers);
+        },
+
+        // TODO: check whether marker is already existing on the map for the coordinates
+        //       or alternatively block saving for matching coordinates
+        placeMarker: function (latLng) {
+            var marker = L.marker(latLng, {
+                icon: LMapWrapper.iconCollection.iconBlue,
+                zIndexOffset: 2000
+            })
+                .addTo(LMapWrapper.map)
+                .on('click', function () {
+                    MapEditor.select(this);
+                });
+
+            MapEditor.select(marker);
+        },
+
+        panTo: function (latLng) {
+            LMapWrapper.map.panTo(latLng);
+        },
+
+        invalidateSize: function (invalid) {
+            LMapWrapper.map.invalidateSize(invalid);
+        },
+
+        changeMarkerIcon: function (marker, icon) {
+            LMapWrapper.markers.removeLayer(marker);
+            LMapWrapper.map.addLayer(marker);
+            marker.setIcon(icon);
+            marker.setZIndexOffset(2000);
+        },
+
+        removeMarker: function (marker) {
+            LMapWrapper.map.removeLayer(marker);
+        }
+    };
+
+    var GMapWrapper = {
+        map: null,
+        markers: null,
+        iconCollection: {
+            iconGreen: {
+                url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
+                scaledSize: new google.maps.Size(24, 32), // scaled size
+                origin: new google.maps.Point(0, 0), // origin
+                anchor: new google.maps.Point(12, 32) // anchor
+            },
+            iconRed: {
+                url: STATIC_ROOT + '/img/markers/marker-red.svg?rev' + REVISION,
+                scaledSize: new google.maps.Size(24, 32), // scaled size
+                origin: new google.maps.Point(0, 0), // origin
+                anchor: new google.maps.Point(12, 32) // anchor
+            },
+            iconBlue: {
+                url: STATIC_ROOT + '/img/markers/marker-blue.svg?rev' + REVISION,
+                scaledSize: new google.maps.Size(24, 32), // scaled size
+                origin: new google.maps.Point(0, 0), // origin
+                anchor: new google.maps.Point(12, 32) // anchor
+            }
+        },
+
+        init: function (divId, places) {
+            GMapWrapper.map = new google.maps.Map(document.getElementById(divId), {
+                center: { lat: 48.2207779, lng: 16.3098489 },
+                zoom: 2,
+                fullscreenControl: false,
+                zoomControl: true,
+                zoomControlOptions: {
+                    position: google.maps.ControlPosition.LEFT_BOTTOM
+                },
+                streetViewControl: true,
+                streetViewControlOptions: {
+                    position: google.maps.ControlPosition.LEFT_BOTTOM
+                },
+                draggableCursor: 'crosshair'
+            });
+
+            GMapWrapper.map.addListener('click', function (mapsMouseEvent) {
+                GMapWrapper.placeMarker({
+                    lat: mapsMouseEvent.latLng.lat(),
+                    lng: mapsMouseEvent.latLng.lng()
+                });
+            });
+
+            GMapWrapper.loadMarkers(places);
+        },
+
+        loadMarkers: function (places) {
+            GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], { 
+                imagePath: STATIC_ROOT + '/img/markers/m',
+                imageExtension: 'png?rev' + REVISION
+            });
+
+            for (var placeId in places) {
+                if (!places.hasOwnProperty(placeId)) {
+                    continue;
+                }
+
+                var place = places[placeId];
+
+                var marker = new google.maps.Marker({
+                    position: {
+                        lat: place.lat,
+                        lng: place.lng
+                    },
+                    icon: place.noPano ? GMapWrapper.iconCollection.iconRed : GMapWrapper.iconCollection.iconGreen
+                });
+
+                marker.getLatLng = function () { return { lat: this.getPosition().lat(), lng: this.getPosition().lng() } };
+                marker.setLatLng = function (coords) { this.setPosition(coords) };
+
+                marker.addListener('click', function () {
+                    MapEditor.select(this);
+                });
+
+                marker.placeId = place.id;
+
+                GMapWrapper.markers.addMarker(marker);
+            }
+        },
+
+        // TODO: check whether marker is already existing on the map for the coordinates
+        //       or alternatively block saving for matching coordinates
+        placeMarker: function (latLng) {
+            var marker = new google.maps.Marker({
+                map: GMapWrapper.map,
+                position: latLng,
+                icon: GMapWrapper.iconCollection.iconBlue,
+            });
+
+            marker.getLatLng = function () { return { lat: this.getPosition().lat(), lng: this.getPosition().lng() } };
+            marker.setLatLng = function (coords) { this.setPosition(coords) };
+
+            marker.addListener('click', function () {
+                MapEditor.select(this);
+            });
+
+            GMapWrapper.markers.addMarker(marker);
+
+            MapEditor.select(marker);
+        },
+
+        panTo: function (latLng) {
+            GMapWrapper.map.panTo(latLng);
+        },
+
+        invalidateSize: function (invalid) {
+            if (invalid) {
+                google.maps.event.trigger(GMapWrapper.map, 'resize');
+            }
+        },
+
+        changeMarkerIcon: function (marker, icon) {
+            marker.setIcon(icon);
+        },
+
+        removeMarker: function (marker) {
+            GMapWrapper.markers.removeMarker(marker);
+        }
+    };
+
+    // MapEditor.map = LMapWrapper;
+    MapEditor.map = GMapWrapper;
+    MapEditor.map.init('map', places);
 
     MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
         // switch off fullscreenControl because positioning doesn't work
@@ -478,7 +632,7 @@
         var coordinates = Util.extractCoordinates(coordinatesStr);
 
         if (coordinates.valid) {
-            MapEditor.placeMarker(coordinates.latlng);
+            MapEditor.map.placeMarker(coordinates.latlng);
         }
     };
 
@@ -491,7 +645,7 @@
             jumpButton.disabled = false;
 
             if (e.key == 'Enter') {
-                MapEditor.placeMarker(coordinates.latlng);
+                MapEditor.map.placeMarker(coordinates.latlng);
             }
         }
         else {

views/admin/map_editor.php

@@ -6,6 +6,7 @@
 @js(node_modules/leaflet/dist/leaflet.js)
 @js(node_modules/leaflet.markercluster/dist/leaflet.markercluster.js)
 @js(https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>)
+@js(https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js)
 @js(js/map_editor.js)
 
 @extends(templates/layout_full)

views/game.php

@@ -59,6 +59,16 @@
             <button id="startNewGameButton" class="fullWidth">Play this map again</button>
         </div>
     </div>
+    <div id="navigation">
+        <div id="returnToStart" class="navigationItem">
+            <div>
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+            </div>
+            <div>
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
+            </div>
+        </div>
+    </div>
 @endsection
 
 @section(pageScript)