Merge branch 'develop' into feature/google-maps-in-mapeditor-added

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

README.md

@@ -14,7 +14,7 @@ git clone https://gitea.e5tv.hu/esoko/mapguesser.git
 
 All the commands listed here should be executed from the repository root.
 
-### (Optional) Setup Docker stack
+### Setup Docker stack (recommended)
 
 The easiest way to build up a fully working application with web server and database is to use Docker Compose with the included `docker-compose.yml`.
 
@@ -24,9 +24,17 @@ All you have to do is executing the following command:
 docker-compose up -d
 ```
 
-Attach shell to the container of `mapguesser_app`. All of the following commands should be executed there.
+Attach shell to the container of `mapguesser_app`:
 
-**If you don't use the Docker stack you need to install your environment manually. Check `docker-compose.yml` and `docker/Dockerfile` to see the system requirements.**
+```
+docker exec -it mapguesser_app_1 bash
+```
+
+All of the following commands should be executed there.
+
+### Manual setup (alternative)
+
+If you don't use the Docker stack you need to install your environment manually. Check `docker-compose.yml` and `docker/Dockerfile` to see the system requirements.
 
 ### Initialize project
 
@@ -40,15 +48,28 @@ composer create-project
 
 The `.env` file contains several environment variables that are needed by the application to work properly. These should be configured for your environment.
 
-**You should set here the API keys that enable playing the game. Without these API keys the application cannot work well. To get Google API keys visit this page: https://console.developers.google.com/**
+One very important variable is `DEV`. This indicates that the application operates in development (staging) and not in production mode.
 
-One very important variable is `DEV`. This indicates that the application operates in development (staging) and not in produciton mode.
+**Hint:** If you install the application in the Docker stack for development (staging) environment, only the variables for external dependencies (API keys, map attribution, etc.) should be adapted. All other variables (for DB connection, static root, mailing, multiplayer, etc.) are fine with the default value.
 
-If you install the application in the Docker stack for development (staging) environment, only the variables for external dependencies (API keys, map attribution, etc.) should be adapted. All other variables (for DB connection, static root, mailing, etc.) are fine with the default value.
+#### API keys
+
+**You should set the API keys that enable playing the game. Without these API keys the application cannot work well. To get Google API keys visit this page: https://console.developers.google.com/**
+
+Required Google APIs:
+* **Maps JavaScript API**: for the interactive maps and street views
+* **Maps Static API**: for the static map images
+* **Street View Static API**: for the backend metadata requests
+
+Required API keys:
+* **GOOGLE_MAPS_SERVER_API_KEY**: this it used by the backend and should have access to **Street View Static API**
+* **GOOGLE_MAPS_JS_API_KEY**: this is used by the frontend and should have access to **Maps JavaScript API** and **Maps Static API**
+
+Additionally, a tile provider is also needed for map editor. This should be configured by `LEAFLET_TILESERVER_URL` and `LEAFLET_TILESERVER_ATTRIBUTION`. You can find some providers here: https://wiki.openstreetmap.org/wiki/Tile_servers. OpenStreetMap's tile server is fine for testing.
 
 ### (Production only) Create cron job
 
-To maintain database (delete inactive users, old sessions etc.), the command `db:maintain` should be regularly executed. It is recommened to create a cron job that runs every hour:
+To maintain database (delete inactive users, old sessions etc.), the command `db:maintain` should be regularly executed. It is recommended to create a cron job that runs every hour:
 
 ```
 0 * * * * /path/to/your/installation/mapg db:maintain >>/var/log/cron-mapguesser.log 2>&1
@@ -56,13 +77,19 @@ To maintain database (delete inactive users, old sessions etc.), the command `db
 
 ### Finalize installation
 
-After you set the environment variables in the `.env` file, execute the following command:
+After you followed the above steps, execute the following command:
 
 ```
 scripts/install.sh
 ```
 
-**And you are done!** The application is ready to use and develop.
+**Warning: Because of a known issue the image `mapguesser_multi` fails to run without the installation steps. You have to relauch `docker-compose up -d` after you finished the installation process.**
+
+**And you are done!** The application is ready to use and develop. In development mode an administrative user is also created by the installation script, email is **mapg@mapg.dev**, password is **123456**. In production mode you should create the first administrative user with the following command:
+
+```
+./mapg user:add EMAIL PASSWORD admin
+```
 
 If you installed it in the Docker stack, you can reach it on http://localhost. The mails that are sent by the application can be found on http://localhost:8080/. If needed, the database server can be directly reached on localhost:3306.
 

public/static/css/map_editor.css

@@ -1,4 +1,4 @@
-#map {
+.map {
     position: absolute;
     top: 0;
     left: 0;
@@ -7,6 +7,13 @@
     z-index: 1;
 }
 
+#mapSelection img {
+    display: inline;
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+}
+
 /* modify the cursor for the Leaflet map */
 .leaflet-container {
     cursor: crosshair;
@@ -65,6 +72,9 @@
     #placeControl {
         top: calc(50% + 10px);
     }
+    .hideOnMobile {
+        display: none;
+    }
 }
 
 @media screen and (min-width: 1000px), (max-height: 599px) {

public/static/img/compass.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <polygon id="needleNorth" points="50,0 33,50 66,50" style="fill:red;stroke:black;stroke-width:1" />
+  <polygon id="needleSouth" points="50,100 33,50 66,50" style="fill:white;stroke:black;stroke-width:1" />
+  Sorry, your browser does not support inline SVG.
+</svg>

public/static/img/map.svg

@@ -0,0 +1,4 @@
+<!-- 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 fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z"/>
+</svg>

public/static/js/game.js

@@ -387,6 +387,10 @@
             document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
 
             Game.loadPano(Game.panoId, Game.pov);
+
+            // update the compass
+            const heading = Game.panorama.getPov().heading;
+            document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
         },
 
         handleErrorResponse: function (error) {
@@ -863,6 +867,9 @@
 
     Game.panorama.addListener('pov_changed', function () {
         Game.rewriteGoogleLink();
+
+        const heading = Game.panorama.getPov().heading;
+        document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
     });
 
     if (COOKIES_CONSENT) {
@@ -950,4 +957,8 @@
     document.getElementById('returnToStart').onclick = function () {
         Game.loadPano(Game.panoId, Game.pov);
     }
+
+    document.getElementById('compassContainer').onclick = function () {
+        Game.panorama.setPov({ heading: 0, pitch: Game.panorama.getPov().pitch });
+    }
 })();

public/static/js/map_editor.js

@@ -7,7 +7,6 @@
             description: null
         },
         map: null,
-        markers: null,
         panorama: null,
         selectedMarker: null,
         added: {},
@@ -118,16 +117,13 @@
             MapEditor.resetSelected();
             MapEditor.selectedMarker = marker;
 
-            MapEditor.map.invalidateSize(true);
+            MapEditor.map.resize();
             MapEditor.map.panTo(marker.getLatLng());
 
             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';
@@ -223,7 +219,7 @@
             MapEditor.resetSelected(del);
             MapEditor.selectedMarker = null;
 
-            MapEditor.map.invalidateSize(true);
+            MapEditor.map.resize();
         },
 
         deletePlace: function () {
@@ -239,6 +235,7 @@
 
             delete MapEditor.added[placeId];
             delete MapEditor.edited[placeId];
+            delete places[placeId];
 
             document.getElementById('added').innerHTML = String(Object.keys(MapEditor.added).length);
             document.getElementById('edited').innerHTML = String(Object.keys(MapEditor.edited).length);
@@ -310,42 +307,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,52 +348,269 @@
         }
     };
 
-    MapEditor.map = L.map('map', {
-        zoomControl: false
-    });
+    var LMapWrapper = {
+        map: null,
+        markers: null,
+        divId: 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]
+            })
+        },
 
-    MapEditor.map.on('click', function (e) {
-        MapEditor.placeMarker(e.latlng);
-    });
+        init: function (divId, places) {
+            document.getElementById(divId).style.display = "block";
 
-    var highResData = Util.getHighResData();
+            if (!LMapWrapper.map) {
+                LMapWrapper.divId = divId;
+                LMapWrapper.map = L.map(LMapWrapper.divId, {
+                    zoomControl: false
+                });
 
-    L.tileLayer(tileUrl, {
-        attribution: tileAttribution,
-        subdomains: '1234',
-        ppi: highResData.ppi,
-        tileSize: highResData.tileSize,
-        zoomOffset: highResData.zoomOffset,
-        minZoom: highResData.minZoom,
-        maxZoom: highResData.maxZoom
-    }).addTo(MapEditor.map);
+                LMapWrapper.map.on('click', function (e) {
+                    LMapWrapper.placeMarker(e.latlng);
+                });
 
-    MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
+                var highResData = Util.getHighResData();
 
-    MapEditor.markers = L.markerClusterGroup({
-        maxClusterRadius: 50
-    });
+                L.tileLayer(tileUrl, {
+                    attribution: tileAttribution,
+                    subdomains: '1234',
+                    ppi: highResData.ppi,
+                    tileSize: highResData.tileSize,
+                    zoomOffset: highResData.zoomOffset,
+                    minZoom: highResData.minZoom,
+                    maxZoom: highResData.maxZoom
+                }).addTo(LMapWrapper.map);
 
-    for (var placeId in places) {
-        if (!places.hasOwnProperty(placeId)) {
-            continue;
+                LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
+            }
+
+            LMapWrapper.loadMarkers(places);
+        },
+
+        hide: function () {
+            document.getElementById(LMapWrapper.divId).style.display = 'none';
+        },
+
+        loadMarkers: function (places) {
+            if (!LMapWrapper.markers) {
+                LMapWrapper.markers = L.markerClusterGroup({
+                    maxClusterRadius: 50
+                });
+            } else {
+                LMapWrapper.markers.clearLayers();
+            }
+
+            for (var placeId in places) {
+                if (!places.hasOwnProperty(placeId)) {
+                    continue;
+                }
+
+                var place = places[placeId];
+
+                var marker = L.marker({ lat: place.lat, lng: place.lng }, {
+                    icon: place.noPano ? LMapWrapper.iconCollection.iconRed : LMapWrapper.iconCollection.iconGreen,
+                    zIndexOffset: 1000
+                })
+                    .addTo(LMapWrapper.markers)
+                    .on('click', function () {
+                        MapEditor.select(this);
+                    });
+
+                marker.placeId = placeId;
+            }
+
+            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.markers)
+                .on('click', function () {
+                    MapEditor.select(this);
+                });
+
+            MapEditor.select(marker);
+        },
+
+        panTo: function (latLng) {
+            LMapWrapper.map.panTo(latLng);
+        },
+
+        resize: function () {
+            LMapWrapper.map.invalidateSize(true);
+        },
+
+        changeMarkerIcon: function (marker, icon) {
+            marker.setIcon(icon);
+            marker.setZIndexOffset(2000);
+        },
+
+        removeMarker: function (marker) {
+            LMapWrapper.markers.removeLayer(marker);
         }
+    };
 
-        var place = places[placeId];
+    var GMapWrapper = {
+        map: null,
+        markers: null,
+        divId: 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
+            }
+        },
 
-        var marker = L.marker({ lat: place.lat, lng: place.lng }, {
-            icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen,
-            zIndexOffset: 1000
-        })
-            .addTo(MapEditor.markers)
-            .on('click', function () {
+        init: function (divId, places) {
+            document.getElementById(divId).style.display = "block";
+
+            if (!GMapWrapper.map) {
+                GMapWrapper.divId = divId;
+                GMapWrapper.map = new google.maps.Map(document.getElementById(GMapWrapper.divId), {
+                    center: { lat: 0., lng: 0. },
+                    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);
+
+            GMapWrapper.loaded = true;
+        },
+
+        hide: function () {
+            document.getElementById(GMapWrapper.divId).style.display = 'none';
+        },
+
+        loadMarkers: function (places) {
+            if (!GMapWrapper.markers) {
+                GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], {
+                    imagePath: STATIC_ROOT + '/img/markers/m',
+                    imageExtension: 'png?rev' + REVISION
+                });
+            } else {
+                GMapWrapper.markers.clearMarkers();
+            }
+
+            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 = placeId;
+
+                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);
             });
 
-        marker.placeId = place.id;
-    }
+            GMapWrapper.markers.addMarker(marker);
 
-    MapEditor.map.addLayer(MapEditor.markers);
+            MapEditor.select(marker);
+        },
+
+        panTo: function (latLng) {
+            GMapWrapper.map.panTo(latLng);
+        },
+
+        resize: function () {
+            google.maps.event.trigger(GMapWrapper.map, 'resize');
+        },
+
+        changeMarkerIcon: function (marker, icon) {
+            marker.setIcon(icon);
+        },
+
+        removeMarker: function (marker) {
+            GMapWrapper.markers.removeMarker(marker);
+        }
+    };
+
+    // initialize content of #map with google maps
+    MapEditor.map = GMapWrapper;
+    MapEditor.map.init('gmap', places);
 
     MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
         // switch off fullscreenControl because positioning doesn't work
@@ -478,7 +659,7 @@
         var coordinates = Util.extractCoordinates(coordinatesStr);
 
         if (coordinates.valid) {
-            MapEditor.placeMarker(coordinates.latlng);
+            MapEditor.map.placeMarker(coordinates.latlng);
         }
     };
 
@@ -491,7 +672,7 @@
             jumpButton.disabled = false;
 
             if (e.key == 'Enter') {
-                MapEditor.placeMarker(coordinates.latlng);
+                MapEditor.map.placeMarker(coordinates.latlng);
             }
         }
         else {
@@ -499,4 +680,19 @@
         }
     };
 
+    document.getElementById('mapSelector').onclick = function () {
+        MapEditor.closePlace();
+        MapEditor.map.hide();
+
+        if (MapEditor.map === GMapWrapper) {
+            MapEditor.map = LMapWrapper;
+            MapEditor.map.init('lmap', places);
+        } else {
+            MapEditor.map = GMapWrapper;
+            MapEditor.map.init('gmap', places);
+        }
+
+
+    }
+
 })();

scripts/install.sh

@@ -27,6 +27,9 @@ if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
 
     echo "Linking view files..."
     (cd ${ROOT_DIR} && ./mapg view:link)
+else
+    echo "Creating the first user..."
+    (cd ${ROOT_DIR} && ./mapg user:add mapg@mapg.dev 123456 admin)
 fi
 
 touch ${ROOT_DIR}/installed

views/admin/map_editor.php

@@ -6,13 +6,19 @@
 @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)
 
 @section(subheader) 
            <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
-        --><span>
+        --><span class="inline hideOnMobile" id="mapSelection">
+                <button id="mapSelector">
+                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" />
+                </button>
+           </span><!--
+        --><span class="inline hideOnMobile">
                <input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
                <button id="jumpButton" disabled >Jump</button>
            </span><!--
@@ -57,7 +63,10 @@
 @endsection
 
 @section(main)
-    <div id="map"></div>
+    <div id="map" class="map">
+        <div id="lmap" class="map"></div>
+        <div id="gmap" class="map"></div>
+    </div>
     <div id="panorama"></div>
     <div id="noPano">
         <p class="bold">No panorama is available for this location.</p>

views/game.php

@@ -60,6 +60,14 @@
         </div>
     </div>
     <div id="navigation">
+        <div id="compassContainer" class="navigationItem">
+            <div>
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+            </div>
+            <div>
+                <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
+            </div>
+        </div>
         <div id="returnToStart" class="navigationItem">
             <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />