Initial import
This commit is contained in:
+111
@@ -0,0 +1,111 @@
|
||||
<?php
|
||||
|
||||
use app\models\TourObjects;
|
||||
|
||||
/**
|
||||
* @var $model TourObjects;
|
||||
*/
|
||||
$lat = $model->latitude ?? 42.698334;
|
||||
$lon = $model->longitude ?? 23.319941;
|
||||
?>
|
||||
<link rel="stylesheet" href="/_public/plugins/leafletjs/leaflet.css">
|
||||
<script src="/_public/plugins/leafletjs/leaflet.js"></script>
|
||||
<style>
|
||||
.search-location {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-location .result {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
background: #FFFFFF;
|
||||
z-index: 10000000;
|
||||
padding: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-location .result .row-result {
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background: #f1f1f1;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
border: 1px solid var(--base-background-dark);
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="search-location c6">
|
||||
<input placeholder="Търси">
|
||||
<div class="result"></div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
const inputSearchLocation = document.querySelector('.search-location input');
|
||||
const results = document.querySelector('.search-location .result');
|
||||
|
||||
|
||||
let mapOptions = {
|
||||
center: [<?=$lat ?>, <?= $lon ?>],
|
||||
zoom: 13
|
||||
}
|
||||
let map = new L.map('map', mapOptions);
|
||||
let layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
|
||||
map.addLayer(layer);
|
||||
let marker = new L.Marker([<?=$lat?>, <?= $lon?>]);
|
||||
marker.addTo(map);
|
||||
|
||||
map.on('click', function(e){
|
||||
let coord = e.latlng;
|
||||
let lat = coord.lat;
|
||||
let lon = coord.lng;
|
||||
setNewLocation({lat, lon})
|
||||
});
|
||||
|
||||
inputSearchLocation.addEventListener('keyup', () => {
|
||||
request({
|
||||
url: `https://nominatim.openstreetmap.org/search.php?q=${inputSearchLocation.value}&accept-language=bg&countrycodes=bg&limit=10&format=jsonv2`,
|
||||
done: res => {
|
||||
results.innerHTML = '';
|
||||
res = res || [];
|
||||
res.forEach(r => {
|
||||
let row = document.createElement('div')
|
||||
row.className = 'row-result';
|
||||
console.log(r);
|
||||
row.innerHTML = `<span>${r.display_name}</span>`;
|
||||
row.addEventListener('click', function () {
|
||||
if (r.lat && r.lon) {
|
||||
setNewLocation(r)
|
||||
}
|
||||
})
|
||||
results.appendChild(row)
|
||||
})
|
||||
if (res.length > 0) {
|
||||
results.style.display = 'block'
|
||||
} else {
|
||||
results.style.display = 'none'
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function setNewLocation(r) {
|
||||
document.querySelector('[name="latitude"]').value = r.lat
|
||||
document.querySelector('[name="longitude"]').value = r.lon
|
||||
marker.setLatLng([r.lat, r.lon])
|
||||
let latLon = [marker.getLatLng()];
|
||||
let markerBounds = L.latLngBounds(latLon);
|
||||
map.fitBounds(markerBounds);
|
||||
|
||||
results.innerHTML = ''
|
||||
results.style.display = 'none'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
<?php
|
||||
@@ -0,0 +1,62 @@
|
||||
<?php
|
||||
|
||||
use app\models\TourObjects;
|
||||
use app\widgets\FileWidget;
|
||||
use app\widgets\services\Includes;
|
||||
|
||||
/**
|
||||
* @var \app\models\ExplorerObjects $model
|
||||
*/
|
||||
$media_key = $model->getMediaKey();
|
||||
?>
|
||||
<div class="inner-content p10">
|
||||
<form autocomplete="off">
|
||||
<div class="c10 row top15">
|
||||
<label class="require">Туристически обект</label>
|
||||
<div class="flex row row-panel">
|
||||
<select class="search-select-box" name="tour_object_id" style="display: none">
|
||||
<option value="">- Избери туристически обект -</option>
|
||||
<?php foreach (TourObjects::find()->all() as $tObject): ?>
|
||||
<option <?= $model->tour_object_id == $tObject->id ? 'selected' : '' ?>
|
||||
value="<?= $tObject->id ?>"><?= $tObject->name ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c10 row top15">
|
||||
<label class="require">Бр. точки</label>
|
||||
<input name="points" data-format="integer" value="<?= $model->points ?>">
|
||||
</div>
|
||||
<div class="row top15" style="width: 350px">
|
||||
<label>Изображение</label>
|
||||
<?= FileWidget::widget([
|
||||
'media_type' => 'image',
|
||||
'object_key' => 'explorer_object_image',
|
||||
'media_key' => $media_key,
|
||||
'files' => $model->getFiles('thumb'),
|
||||
'actions' => [
|
||||
'add' => 'Добавяне',
|
||||
'edit' => 'Редакция',
|
||||
'delete' => 'Премахване'
|
||||
],
|
||||
'single_file' => true,
|
||||
'resolutions' => ['1:1'],
|
||||
'max_file_size' => 2,
|
||||
'error_message' => 'Файловете по-големи от 2МБ, не бяха добавени'
|
||||
]) ?>
|
||||
</div>
|
||||
<div class="row c9 top15 flex">
|
||||
<?= Includes::formButtons('mobile-app/become-an-explorer-objects') ?>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="/_public/assets/js/order.js"></script>
|
||||
<script src="/_public/assets/js/file-img.js"></script>
|
||||
<script src="/_public/plugins/cropperJs/cropper.min.js"></script>
|
||||
<script src="/_public/assets/js/search-box.js"></script>
|
||||
<script>
|
||||
all('.search-select-box').forEach(el => {
|
||||
new SearchBox(el)
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user