esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

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

Browse Source 
Feature/MAPG-107 make map editor more mobile fri
This commit is contained in:
Bence Pőcze 2020-06-02 19:53:30 +00:00
commit cf63287ecc
2 changed files with 66 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
public/static/css/map_editor.css
View File

@ -4,24 +4,15 @@
z-index: 1;
}
#map.selected {
height: calc(50% - 25px);
}
#panorama {
width: 100%;
height: calc(50% - 25px);
display: none;
position: absolute;
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;
}
}

26
public/static/js/map_editor.js
View File

@ -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();