MAPG-2 Init project MapGuesser

* add composer.json and basic environment
 * add basic classes
 * add basic map with JS and CSS (with demo functionality)
 * add files for docker-compose
 * add launch.json for Docker debug
 * add README

public/index.php

@@ -0,0 +1,40 @@
+<?php
+
+require '../main.php';
+
+// demo position
+$realPosition = new MapGuesser\Geo\Position(47.85239, 13.35101);
+
+// demo bounds
+$bounds = new MapGuesser\Geo\Bounds($realPosition);
+$bounds->extend(new MapGuesser\Geo\Position(48.07683,7.35758));
+$bounds->extend(new MapGuesser\Geo\Position(47.57496, 19.08077));
+
+?>
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>MapGuesser</title>
+    <link rel="stylesheet" type="text/css" href="static/css/mapguesser.css">
+</head>
+
+<body>
+    <div id="panorama"></div>
+    <div id="guess">
+        <div id="guessMap"></div>
+        <div id="guessButtonContainer">
+            <button id="guessButton" disabled>Guess</button>
+        </div>
+    </div>
+    <script>
+        var realPosition = <?= $realPosition->toJson() ?>;
+        var guessMapBounds = <?= $bounds->toJson() ?>;
+    </script>
+    <script src="static/js/mapguesser.js" async defer></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>&callback=initialize" async defer></script>
+</body>
+
+</html>

public/static/css/mapguesser.css

@@ -0,0 +1,75 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+#panorama {
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+}
+
+#guess {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    width: 250px;
+    height: 150px;
+    opacity: 0.5;
+    z-index: 2;
+    transition-property: width, height, opacity;
+    transition-duration: 0.1s;
+    transition-delay: 0.8s;
+}
+
+#guess:hover {
+    width: 500px;
+    height: 350px;
+    opacity: 1.0;
+    transition-delay: 0s;
+}
+
+#guess #guessMap {
+    height: 115px;
+    width: 100%;
+    transition-property: height;
+    transition-duration: 0.1s;
+    transition-delay: 0.8s;
+    border-radius: 3px;
+}
+
+#guess:hover #guessMap {
+    height: 315px;
+    transition-delay: 0s;
+}
+
+#guessButtonContainer {
+    margin-top: 5px;
+    height: 30px;
+}
+
+#guessButton {
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    background-color: #5e77aa;
+    border: none;
+    border-radius: 3px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#guessButton:hover, #guessButton:focus {
+    background-color: #29457f;
+    outline: none;
+}
+
+#guessButton:disabled {
+    cursor: no-drop;
+    color: #dddddd;
+    background-color: #808080;
+    opacity: 0.7;
+}

public/static/js/mapguesser.js

@@ -0,0 +1,108 @@
+Math.deg2rad = function (deg) {
+    return deg * (this.PI / 180.0);
+};
+
+var Util = {
+    EARTH_RADIUS_IN_METER: 6371000,
+
+    calculateDistance: function (position1, position2) {
+        var lat1 = Math.deg2rad(position1.lat);
+        var lng1 = Math.deg2rad(position1.lng);
+        var lat2 = Math.deg2rad(position2.lat);
+        var lng2 = Math.deg2rad(position2.lng);
+
+        var latDelta = lat2 - lat1;
+        var lonDelta = lng2 - lng1;
+
+        var angle = 2 * Math.asin(
+            Math.sqrt(
+                Math.pow(Math.sin(latDelta / 2), 2) +
+                Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(lonDelta / 2), 2)
+            )
+        );
+
+        return angle * Util.EARTH_RADIUS_IN_METER;
+    }
+};
+
+var MapManipulator = {
+    rewriteGoogleLink: function () {
+        if (!googleLink) {
+            var anchors = document.getElementById('panorama').getElementsByTagName('a');
+            for (var i = 0; i < anchors.length; i++) {
+                var a = anchors[i];
+                if (a.href.indexOf('maps.google.com/maps') !== -1) {
+                    googleLink = a;
+                    break;
+                }
+            }
+        }
+
+        setTimeout(function () {
+            googleLink.title = 'Google Maps'
+            googleLink.href = 'https://maps.google.com/maps'
+        }, 1);
+    }
+};
+
+var panorama;
+var guessMap;
+var guessMarker;
+var googleLink;
+
+function initialize() {
+    panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
+        position: realPosition,
+        pov: {
+            heading: 34,
+            pitch: 10
+        },
+        disableDefaultUI: true,
+        linksControl: true,
+        showRoadLabels: false
+    });
+
+    panorama.addListener('position_changed', function () {
+        MapManipulator.rewriteGoogleLink();
+    });
+
+    panorama.addListener('pov_changed', function () {
+        MapManipulator.rewriteGoogleLink();
+    });
+
+    guessMap = new google.maps.Map(document.getElementById('guessMap'), {
+        disableDefaultUI: true,
+        clickableIcons: false,
+        draggableCursor: 'crosshair'
+    });
+
+    guessMap.fitBounds(guessMapBounds);
+
+    guessMap.addListener('click', function (e) {
+        if (guessMarker) {
+            guessMarker.setPosition(e.latLng);
+            return;
+        }
+
+        guessMarker = new google.maps.Marker({
+            map: guessMap,
+            position: e.latLng,
+            draggable: true
+        });
+
+        document.getElementById('guessButton').disabled = false;
+    });
+}
+
+document.getElementById('guessButton').onclick = function () {
+    if (!guessMarker) {
+        return;
+    }
+
+    var guessedPosition = guessMarker.getPosition();
+    var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
+
+    alert('You were ' + distance + 'm close!');
+
+    this.blur();
+}