show image
Gustavo Luigi
parent
bb8f019f8c
commit
5879ab38dc
|
|
@ -18,27 +18,17 @@
|
|||
|
||||
#contents::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#contents::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
#contents::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
#contents::-moz-scrollbar {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#contents::-moz-scrollbar-thumb {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
#contents::-moz-scrollbar-thumb:hover {
|
||||
background-color: #666;
|
||||
background-color: #888;
|
||||
}
|
||||
</style>
|
||||
@stop
|
||||
|
|
@ -48,7 +38,7 @@
|
|||
<div id="filters" class="col-12 col-md rounded-end">
|
||||
<div class="d-flex">
|
||||
<!-- <div class="dropdown me-2">
|
||||
<button class="btn btn-secondary dropdown-toggle btn-sm" style="background: #f49c35; border:none;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<button class="btn btn-primary dropdown-toggle btn-sm" style="color: #212529; background: #e9ecef; border: 1px solid #ced4da;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
Filter <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu checkbox-menu allow-focus">
|
||||
|
|
@ -86,9 +76,9 @@
|
|||
<div class="card d-none address">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<!-- <div class="col-5">
|
||||
<img data-src="$image" alt="">
|
||||
</div> -->
|
||||
<div class="col-5">
|
||||
<img style="width: 150px" data-src="$image" alt="">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h3 class="fs-6 m-0">$title</h3>
|
||||
<!-- <a data-href="$path">Ansehen</a> -->
|
||||
|
|
@ -97,7 +87,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 g-0">
|
||||
<div class="col-8 g-0 ps-3">
|
||||
<div id="map"></div>
|
||||
<div id="marker-window" class="d-none">
|
||||
<h6 id="firstHeading" class="firstHeading">$title</h6>
|
||||
|
|
@ -113,52 +103,68 @@
|
|||
<script>
|
||||
const contentUrl = "{{url('/types/locations/contents')}}";
|
||||
const locationField = "location";
|
||||
//const filterFields = ['categoria'];
|
||||
</script>
|
||||
<script>
|
||||
|
||||
const locationElementTemplate = $("#contents").children().first();
|
||||
|
||||
function addLocationElement(item){
|
||||
let newElement = locationElementTemplate.clone();
|
||||
newElement.html(newElement.html().replace('$title', item.title));
|
||||
newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
|
||||
newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
|
||||
newElement.removeClass('d-none');
|
||||
return newElement;
|
||||
}
|
||||
|
||||
function createInfowindowElement(item){
|
||||
let contentString = $("#marker-window").clone();
|
||||
contentString.html(contentString.html().replace('$title', item.title));
|
||||
contentString.html(contentString.html().replace('$description', item.description ?? ''));
|
||||
contentString.html(contentString.html().replace('data-href="$path"', 'href="' + item.path + '"'));
|
||||
contentString.removeClass('d-none');
|
||||
return contentString[0].outerHTML;
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
$.get(contentUrl).done(function (contents) {
|
||||
let receivedItems = contents["contents"];
|
||||
|
||||
if (receivedItems != undefined) {
|
||||
let items = contents["contents"];
|
||||
|
||||
receivedItems = receivedItems.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
|
||||
if (items != undefined) {
|
||||
|
||||
const templateInfowindow = $("#marker-window");
|
||||
locationItems = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
|
||||
|
||||
let templateElement = $("#contents").children().first();
|
||||
templateContent = templateElement;
|
||||
templateElement.remove();
|
||||
let currentItems = locationItems;
|
||||
|
||||
$("#search-button").on("click", function () {
|
||||
$("#contents").html("");
|
||||
let value = $("#search-input").val();
|
||||
items = receivedItems.filter(function (item) {
|
||||
currentItems = locationItems.filter(function (item) {
|
||||
return item.title.toLowerCase().includes(value.toLowerCase());
|
||||
});
|
||||
loadItems();
|
||||
});
|
||||
|
||||
items = receivedItems;
|
||||
|
||||
loadItems();
|
||||
|
||||
function loadItems() {
|
||||
$("#count-items-displayed").text(items.length);
|
||||
$("#count-items").text(items.length);
|
||||
$("#count-items-displayed").text(currentItems.length);
|
||||
|
||||
let map = new google.maps.Map(document.getElementById("map"), {
|
||||
zoom: 6,
|
||||
center: { lat: 50.9807, lng: 10.31522 },
|
||||
streetViewControl: false,
|
||||
mapTypeControl: false,
|
||||
fullscreenControl: false,
|
||||
});
|
||||
if (currentItems.length > 0) {
|
||||
|
||||
if (items.length > 0) {
|
||||
let map = new google.maps.Map(document.getElementById("map"), {
|
||||
zoom: 6,
|
||||
center: { lat: 50.9807, lng: 10.31522 },
|
||||
streetViewControl: false,
|
||||
mapTypeControl: false,
|
||||
fullscreenControl: false,
|
||||
});
|
||||
|
||||
let currentInfoWindow = null;
|
||||
|
||||
items = items.map(function (item) {
|
||||
currentItems = currentItems.map(function (item) {
|
||||
|
||||
let lat = parseFloat(item[locationField].lat);
|
||||
let lng = parseFloat(item[locationField].lng);
|
||||
|
|
@ -170,35 +176,20 @@
|
|||
optimized: false,
|
||||
});
|
||||
|
||||
let contentString = templateInfowindow.clone();
|
||||
let infowindowElement = createInfowindowElement(item);
|
||||
|
||||
contentString.html(contentString.html().replace('$title', item.title));
|
||||
contentString.html(contentString.html().replace('$description', item.description ?? ''));
|
||||
contentString.html(contentString.html().replace('data-href="$path"', 'href="' + item.path + '"'));
|
||||
contentString.removeClass('d-none');
|
||||
|
||||
let infowindow = new google.maps.InfoWindow({
|
||||
content: contentString[0].outerHTML
|
||||
});
|
||||
let infowindow = new google.maps.InfoWindow({ content: infowindowElement });
|
||||
|
||||
marker.addListener('click', function () {
|
||||
|
||||
if (currentInfoWindow) currentInfoWindow.close();
|
||||
|
||||
infowindow.open({
|
||||
anchor: marker,
|
||||
map
|
||||
});
|
||||
infowindow.open({ anchor: marker, map });
|
||||
|
||||
currentInfoWindow = infowindow;
|
||||
});
|
||||
|
||||
let newElement = templateContent.clone();
|
||||
newElement.html(newElement.html().replace('$title', item.title));
|
||||
newElement.html(newElement.html().replace('$image', item.image));
|
||||
newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
|
||||
newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
|
||||
newElement.removeClass('d-none');
|
||||
let newElement = addLocationElement(item);
|
||||
|
||||
newElement.on('click', function () {
|
||||
|
||||
|
|
@ -223,34 +214,31 @@
|
|||
return item;
|
||||
});
|
||||
|
||||
let markers = items.map(function (item) {
|
||||
let markers = currentItems.map(function (item) {
|
||||
return item.marker;
|
||||
});
|
||||
|
||||
var bounds = new google.maps.LatLngBounds();
|
||||
for (var i = 0; i < markers.length; i++) {
|
||||
let bounds = new google.maps.LatLngBounds();
|
||||
for (let i = 0; i < markers.length; i++) {
|
||||
bounds.extend(markers[i].getPosition());
|
||||
}
|
||||
map.fitBounds(bounds);
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
var zoomLevel = map.getZoom();
|
||||
let zoomLevel = map.getZoom();
|
||||
if (zoomLevel > 12) map.setZoom(12);
|
||||
}, 500);
|
||||
|
||||
var clusterStyles = [
|
||||
{
|
||||
url: 'http://localhost/maps-theme/public/template/cluster.png',
|
||||
height: 40,
|
||||
width: 40,
|
||||
textSize: 14,
|
||||
backgroundPosition: '0 0',
|
||||
iconAnchor: [26, 53],
|
||||
textColor: '#ffffff'
|
||||
}
|
||||
];
|
||||
var markerCluster = new MarkerClusterer(map, markers);
|
||||
let clusterStyles = [{
|
||||
url: 'http://localhost/maps-theme/public/template/cluster.png',
|
||||
height: 40,
|
||||
width: 40,
|
||||
textSize: 14,
|
||||
backgroundPosition: '0 0',
|
||||
iconAnchor: [26, 53],
|
||||
textColor: '#ffffff'
|
||||
}];
|
||||
let markerCluster = new MarkerClusterer(map, markers);
|
||||
markerCluster.setStyles(clusterStyles);
|
||||
|
||||
function getVisibleMarkers() {
|
||||
|
|
@ -270,7 +258,7 @@
|
|||
return [latitude, longitude];
|
||||
});
|
||||
|
||||
let showedItems = items;
|
||||
let showedItems = currentItems;
|
||||
|
||||
showedItems = showedItems.filter(function (item) {
|
||||
|
||||
|
|
@ -285,26 +273,22 @@
|
|||
$("#contents").html("");
|
||||
|
||||
$("#count-items-displayed").text(showedItems.length);
|
||||
$("#count-items").text(items.length);
|
||||
$("#count-items").text(currentItems.length);
|
||||
|
||||
showedItems.forEach(function (item) {
|
||||
|
||||
let lat = parseFloat(item[locationField].lat);
|
||||
let lng = parseFloat(item[locationField].lng);
|
||||
|
||||
let newElement = templateContent.clone();
|
||||
newElement.html(newElement.html().replace('$title', item.title));
|
||||
newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
|
||||
newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
|
||||
newElement.removeClass('d-none');
|
||||
let newElement = addLocationElement(item);
|
||||
|
||||
newElement.on('click', function () {
|
||||
|
||||
var bounds = new google.maps.LatLngBounds();
|
||||
let bounds = new google.maps.LatLngBounds();
|
||||
bounds.extend(item.marker.getPosition());
|
||||
map.fitBounds(bounds);
|
||||
setTimeout(function () {
|
||||
var zoomLevel = map.getZoom();
|
||||
let zoomLevel = map.getZoom();
|
||||
if (zoomLevel > 12) map.setZoom(12);
|
||||
}, 500);
|
||||
|
||||
|
|
@ -317,7 +301,7 @@
|
|||
$("#contents").append(newElement);
|
||||
});
|
||||
|
||||
showedItems = items;
|
||||
showedItems = currentItems;
|
||||
}
|
||||
|
||||
google.maps.event.addListener(map, 'dragend', getVisibleMarkers);
|
||||
|
|
|
|||
Loading…
Reference in New Issue