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

MAPG-161 load static maps with JS and set scale based on devicePixelRatio

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-21 19:32:30 +02:00
parent 33eb154112
commit 28aa762153
1 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
views/maps.php
View File

@ -13,9 +13,7 @@ $cssFiles = [
<div class="title"> <div class="title">
<p class="title"><?= $map['name'] ?></p> <p class="title"><?= $map['name'] ?></p>
</div> </div>
<div class="imgContainer"> <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>
<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="inner"> <div class="inner">
<div class="info"> <div class="info">
<p> <p>
@ -63,9 +61,30 @@ $cssFiles = [
<?php endif; ?> <?php endif; ?>
</div> </div>
</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): ?> <?php if ($isAdmin): ?>
<script> <script>
(function() { (function () {
Maps = { Maps = {
deleteMap: function(mapId, mapName) { deleteMap: function(mapId, mapName) {
MapGuesser.showModalWithContent('Delete map', 'Are you sure you want to delete map \'' + 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'); 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() { button.onclick = function() {
Maps.deleteMap(this.dataset.mapId, this.dataset.mapName); Maps.deleteMap(this.dataset.mapId, this.dataset.mapName);
}; };