From 28aa762153788f790afcdc50aee5e334445f861c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sun, 21 Jun 2020 19:32:30 +0200
Subject: [PATCH] MAPG-161 load static maps with JS and set scale based on
 devicePixelRatio

---
 views/maps.php | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/views/maps.php b/views/maps.php
index 9e11ff0..6ddd385 100644
--- a/views/maps.php
+++ b/views/maps.php
@@ -13,9 +13,7 @@ $cssFiles = [
                 <div class="title">
                     <p class="title"><?= $map['name'] ?></p>
                 </div>
-                <div class="imgContainer">
-                    <img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>" alt="Map area">
-                </div>
+                <div class="imgContainer" data-bound-south-lat="<?= $map['bound_south_lat'] ?>" data-bound-west-lng="<?= $map['bound_west_lng'] ?>" data-bound-north-lat="<?= $map['bound_north_lat'] ?>" data-bound-east-lng="<?= $map['bound_east_lng'] ?>"></div>
                 <div class="inner">
                     <div class="info">
                         <p>
@@ -63,9 +61,30 @@ $cssFiles = [
         <?php endif; ?>
     </div>
 </div>
+<script>
+    (function () {
+        const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
+
+        var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
+        for (var i = 0; i < imgContainers.length; i++) {
+            var imgContainer = imgContainers[i];
+
+            var img = document.createElement('img');
+
+            img.src = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
+                'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
+                'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
+                imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
+                '&key=' + GOOGLE_MAPS_JS_API_KEY;
+            img.alt = 'Map area';
+
+            imgContainer.appendChild(img);
+        }
+    })();
+</script>
 <?php if ($isAdmin): ?>
 <script>
-    (function() {
+    (function () {
         Maps = {
             deleteMap: function(mapId, mapName) {
                 MapGuesser.showModalWithContent('Delete map', 'Are you sure you want to delete map \'' + mapName + '\'?', [{
@@ -91,7 +110,9 @@ $cssFiles = [
         };
 
         var buttons = document.getElementById('mapContainer').getElementsByClassName('deleteButton');
-        for (var button of buttons) {
+        for (var i = 0; i < buttons.length; i++) {
+            var button = buttons[i];
+
             button.onclick = function() {
                 Maps.deleteMap(this.dataset.mapId, this.dataset.mapName);
             };