Added map to Building/Form

This commit is contained in:
Frank Schubert
2021-07-15 21:08:35 +02:00
parent 2c7b6433ff
commit d46928b094
9 changed files with 700 additions and 11 deletions

View File

@@ -117,17 +117,26 @@
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-form-label" for="gps_lat">GPS Länge (N)</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="gps_lat" id="gps_lat" value="<?=$building->gps_lat?>" readonly='readonly' />
<div class="row">
<div class="col-lg-6">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="gps_lat">GPS Länge (N)</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="gps_lat" id="gps_lat" value="<?=$building->gps_lat?>" readonly='readonly' />
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="gps_long">GPS Breite (E)</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="gps_long" id="gps_long" value="<?=$building->gps_long?>" readonly='readonly' />
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-form-label" for="gps_long">GPS Breite (E)</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="gps_long" id="gps_long" value="<?=$building->gps_long?>" readonly='readonly' />
<div class="col-lg-6">
<div id="building-map" style="height:420px;width:100%"></div>
</div>
</div>
@@ -139,7 +148,7 @@
<a href="https://www.google.com/maps/search/?api=1&query=<?=$building->gps_lat?>,<?=$building->gps_long?>" target="_blank"><i class="fas fa-external-link-alt"></i> Auf Google Maps öffnen</a>
</div>
</div>
<?php endif; ?>
<div class="form-group row">
@@ -237,6 +246,38 @@
$('form').on('blur', 'input[type=number]', function (e) {
$(this).off('wheel.disableScroll')
});
var gpslat = <?=($building->gps_lat) ? $building->gps_lat : 0?>;
var gpslong = <?=($building->gps_long) ? $building->gps_long : 0?>;
console.log(gpslat + "," + gpslong);
// Building Map
var buildingMap = L.map('building-map').setView([gpslat, gpslong], 18);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
//L.tileLayer('<?=self::getResourcePath()?>assets/map/{id}/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
minZoom: 12,
maxZoom: 22,
//id: 'OSMPublicTransport',
//id: 'mapbox.streets',
id: 'mapbox/streets-v11',
//id: 'mapbox.pirates',
accessToken: 'pk.eyJ1Ijoic2tuZXR3b3J4IiwiYSI6ImNqdWw3eXoyMzBieWU0M284OTU2eWNxMTMifQ.GrgBYKMXVt3TiwU53OBllQ'
}).addTo(buildingMap);
var marker = L.marker([gpslat, gpslong]).addTo(buildingMap);
</script>
<?php include(realpath(dirname(__FILE__)."/../")."/footer.php"); ?>