Merged in feature/MAPG-107-make-map-editor-more-mobile-fri (pull request #82)

Feature/MAPG-107 make map editor more mobile fri

public/static/css/map_editor.css

@@ -4,24 +4,15 @@
     z-index: 1;
 }
 
-#map.selected {
-    height: calc(50% - 25px);
-}
-
 #panorama {
-    width: 100%;
+    position: absolute;
-    height: calc(50% - 25px);
-    display: none;
     z-index: 1;
+    visibility: hidden;
 }
 
 #noPano {
     display: flex;
     position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: calc(50% - 25px);
     z-index: 2;
     visibility: hidden;
     background: #cccccc;
@@ -33,17 +24,53 @@
 
 #control {
     position: absolute;
-    right: 10px;
-    top: 60px;
     width: 125px;
     z-index: 3;
 }
 
 #placeControl {
     position: absolute;
-    right: 10px;
-    top: calc(50% + 35px);
-    width: 100px;
     z-index: 3;
+    width: 100px;
     visibility: hidden;
 }
+
+@media screen and (max-width: 999px) and (min-height: 600px) {
+    #map.selected {
+        height: calc(50% - 25px);
+    }
+    #panorama, #noPano {
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: calc(50% - 25px);
+    }
+    #control {
+        right: 10px;
+        top: 60px;
+    }
+    #placeControl {
+        right: 10px;
+        top: calc(50% + 35px);
+    }
+}
+
+@media screen and (min-width: 1000px), (max-height: 599px) {
+    #map.selected {
+        width: 50%;
+    }
+    #panorama, #noPano {
+        top: 50px;
+        bottom: 0;
+        right: 0;
+        width: 50%;
+    }
+    #control, #placeControl {
+        right: 10px;
+        top: 60px;
+    }
+    #control.selected {
+        right: calc(50% + 10px);
+        top: 60px;
+    }
+}

public/static/js/map_editor.js

@@ -4,7 +4,7 @@
         panorama: null,
         selectedMarker: null,
 
-        getPlace: function(placeId) {
+        getPlace: function (placeId) {
             var xhr = new XMLHttpRequest();
             xhr.responseType = 'json';
             xhr.onload = function () {
@@ -33,8 +33,9 @@
             document.getElementById('loading').style.visibility = 'visible';
 
             document.getElementById('map').classList.add('selected');
+            document.getElementById('control').classList.add('selected');
             document.getElementById('noPano').style.visibility = 'hidden';
-            document.getElementById('panorama').style.display = 'block';
+            document.getElementById('panorama').style.visibility = 'visible';
             document.getElementById('placeControl').style.visibility = 'visible';
 
             MapEditor.resetSelected();
@@ -69,12 +70,30 @@
         }
     };
 
+    var Util = {
+        getHighResData: function () {
+            if (window.devicePixelRatio >= 4) {
+                return { ppi: 320, tileSize: 128, zoomOffset: 1 };
+            } else if (window.devicePixelRatio >= 2) {
+                return { ppi: 250, tileSize: 256, zoomOffset: 0 };
+            } else {
+                return { ppi: 72, tileSize: 512, zoomOffset: -1 };
+            }
+        }
+    };
+
     MapEditor.map = L.map('map', {
         attributionControl: false,
         zoomControl: false
     });
 
+    var highResData = Util.getHighResData();
+
     L.tileLayer(tileUrl, {
+        subdomains: '1234',
+        ppi: highResData.ppi,
+        tileSize: highResData.tileSize,
+        zoomOffset: highResData.zoomOffset,
         minZoom: 0,
         maxZoom: 20
     }).addTo(MapEditor.map);
@@ -109,8 +128,9 @@
 
     document.getElementById('cancelButton').onclick = function () {
         document.getElementById('map').classList.remove('selected');
+        document.getElementById('control').classList.remove('selected');
         document.getElementById('noPano').style.visibility = 'hidden';
-        document.getElementById('panorama').style.display = 'none';
+        document.getElementById('panorama').style.visibility = 'hidden';
         document.getElementById('placeControl').style.visibility = 'hidden';
 
         MapEditor.resetSelected();