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

MAPG-169 make static map background instead of img

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-23 22:01:14 +02:00
parent dc4ba4b5a4
commit 394c8b8830
2 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/static/css/maps.css
View File

@ -29,12 +29,10 @@ div.mapItem>div.title>p.title {
div.mapItem>div.imgContainer { div.mapItem>div.imgContainer {
width: 100%; width: 100%;
padding-top: 50%; padding-top: 50%;
background: #cccccc; background-color: #cccccc;
} background-position: center;
background-repeat: no-repeat;
div.mapItem>div.imgContainer>img { background-size: cover;
width: 100%;
margin-top: -50%
} }
div.mapItem>div.inner { div.mapItem>div.inner {

7
views/maps.php
View File

@ -67,16 +67,13 @@ $cssFiles = [
for (var i = 0; i < imgContainers.length; i++) { for (var i = 0; i < imgContainers.length; i++) {
var imgContainer = imgContainers[i]; var imgContainer = imgContainers[i];
var img = document.createElement('img'); var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
img.src = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' + 'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' + 'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng + imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
'&key=' + GOOGLE_MAPS_JS_API_KEY; '&key=' + GOOGLE_MAPS_JS_API_KEY;
img.alt = 'Map area';
imgContainer.appendChild(img); imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
} }
})(); })();
</script> </script>