Areya
/
maps-theme
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

show image

master
Gustavo Luigi 2023-05-26 01:39:15 -03:00
parent bb8f019f8c
commit 5879ab38dc
1 changed files with 69 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
content/index.blade.php
View File

@ -18,27 +18,17 @@


#contents::-webkit-scrollbar { #contents::-webkit-scrollbar {
width: 8px; width: 8px;
border-radius: 10px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }


#contents::-webkit-scrollbar-thumb { #contents::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #aaa; background-color: #aaa;
} }


#contents::-webkit-scrollbar-thumb:hover { #contents::-webkit-scrollbar-thumb:hover {
background-color: #666; background-color: #888;
}

#contents::-moz-scrollbar {
background-color: #f5f5f5;
}

#contents::-moz-scrollbar-thumb {
background-color: #aaa;
}

#contents::-moz-scrollbar-thumb:hover {
background-color: #666;
} }
</style> </style>
@stop @stop
@ -48,7 +38,7 @@
<div id="filters" class="col-12 col-md rounded-end"> <div id="filters" class="col-12 col-md rounded-end">
<div class="d-flex"> <div class="d-flex">
<!-- <div class="dropdown me-2"> <!-- <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> Filter <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu checkbox-menu allow-focus"> <ul class="dropdown-menu checkbox-menu allow-focus">
@ -86,9 +76,9 @@
<div class="card d-none address"> <div class="card d-none address">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<!-- <div class="col-5"> <div class="col-5">
<img data-src="$image" alt=""> <img style="width: 150px" data-src="$image" alt="">
</div> --> </div>
<div class="col-12"> <div class="col-12">
<h3 class="fs-6 m-0">$title</h3> <h3 class="fs-6 m-0">$title</h3>
<!-- <a data-href="$path">Ansehen</a> --> <!-- <a data-href="$path">Ansehen</a> -->
@ -97,7 +87,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-8 g-0"> <div class="col-8 g-0 ps-3">
<div id="map"></div> <div id="map"></div>
<div id="marker-window" class="d-none"> <div id="marker-window" class="d-none">
<h6 id="firstHeading" class="firstHeading">$title</h6> <h6 id="firstHeading" class="firstHeading">$title</h6>
@ -113,38 +103,56 @@
<script> <script>
const contentUrl = "{{url('/types/locations/contents')}}"; const contentUrl = "{{url('/types/locations/contents')}}";
const locationField = "location"; const locationField = "location";
//const filterFields = ['categoria'];
</script> </script>
<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() { function initMap() {
$.get(contentUrl).done(function (contents) { $.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(); let currentItems = locationItems;
templateContent = templateElement;
templateElement.remove();


$("#search-button").on("click", function () { $("#search-button").on("click", function () {
$("#contents").html(""); $("#contents").html("");
let value = $("#search-input").val(); let value = $("#search-input").val();
items = receivedItems.filter(function (item) { currentItems = locationItems.filter(function (item) {
return item.title.toLowerCase().includes(value.toLowerCase()); return item.title.toLowerCase().includes(value.toLowerCase());
}); });
loadItems(); loadItems();
}); });


items = receivedItems;

loadItems(); loadItems();


function loadItems() { function loadItems() {
$("#count-items-displayed").text(items.length); $("#count-items-displayed").text(currentItems.length);
$("#count-items").text(items.length);
if (currentItems.length > 0) {


let map = new google.maps.Map(document.getElementById("map"), { let map = new google.maps.Map(document.getElementById("map"), {
zoom: 6, zoom: 6,
@ -154,11 +162,9 @@
fullscreenControl: false, fullscreenControl: false,
}); });


if (items.length > 0) {

let currentInfoWindow = null; let currentInfoWindow = null;


items = items.map(function (item) { currentItems = currentItems.map(function (item) {


let lat = parseFloat(item[locationField].lat); let lat = parseFloat(item[locationField].lat);
let lng = parseFloat(item[locationField].lng); let lng = parseFloat(item[locationField].lng);
@ -170,35 +176,20 @@
optimized: false, optimized: false,
}); });


let contentString = templateInfowindow.clone(); let infowindowElement = createInfowindowElement(item);


contentString.html(contentString.html().replace('$title', item.title)); let infowindow = new google.maps.InfoWindow({ content: infowindowElement });
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
});


marker.addListener('click', function () { marker.addListener('click', function () {


if (currentInfoWindow) currentInfoWindow.close(); if (currentInfoWindow) currentInfoWindow.close();


infowindow.open({ infowindow.open({ anchor: marker, map });
anchor: marker,
map
});


currentInfoWindow = infowindow; currentInfoWindow = infowindow;
}); });


let newElement = templateContent.clone(); let newElement = addLocationElement(item);
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');


newElement.on('click', function () { newElement.on('click', function () {
@ -223,24 +214,22 @@
return item; return item;
}); });


let markers = items.map(function (item) { let markers = currentItems.map(function (item) {
return item.marker; return item.marker;
}); });


var bounds = new google.maps.LatLngBounds(); let bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) { for (let i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition()); bounds.extend(markers[i].getPosition());
} }
map.fitBounds(bounds); map.fitBounds(bounds);



setTimeout(function () { setTimeout(function () {
var zoomLevel = map.getZoom(); let zoomLevel = map.getZoom();
if (zoomLevel > 12) map.setZoom(12); if (zoomLevel > 12) map.setZoom(12);
}, 500); }, 500);


var clusterStyles = [ let clusterStyles = [{
{
url: 'http://localhost/maps-theme/public/template/cluster.png', url: 'http://localhost/maps-theme/public/template/cluster.png',
height: 40, height: 40,
width: 40, width: 40,
@ -248,9 +237,8 @@
backgroundPosition: '0 0', backgroundPosition: '0 0',
iconAnchor: [26, 53], iconAnchor: [26, 53],
textColor: '#ffffff' textColor: '#ffffff'
} }];
]; let markerCluster = new MarkerClusterer(map, markers);
var markerCluster = new MarkerClusterer(map, markers);
markerCluster.setStyles(clusterStyles); markerCluster.setStyles(clusterStyles);


function getVisibleMarkers() { function getVisibleMarkers() {
@ -270,7 +258,7 @@
return [latitude, longitude]; return [latitude, longitude];
}); });


let showedItems = items; let showedItems = currentItems;


showedItems = showedItems.filter(function (item) { showedItems = showedItems.filter(function (item) {


@ -285,26 +273,22 @@
$("#contents").html(""); $("#contents").html("");


$("#count-items-displayed").text(showedItems.length); $("#count-items-displayed").text(showedItems.length);
$("#count-items").text(items.length); $("#count-items").text(currentItems.length);


showedItems.forEach(function (item) { showedItems.forEach(function (item) {


let lat = parseFloat(item[locationField].lat); let lat = parseFloat(item[locationField].lat);
let lng = parseFloat(item[locationField].lng); let lng = parseFloat(item[locationField].lng);


let newElement = templateContent.clone(); let newElement = addLocationElement(item);
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');


newElement.on('click', function () { newElement.on('click', function () {


var bounds = new google.maps.LatLngBounds(); let bounds = new google.maps.LatLngBounds();
bounds.extend(item.marker.getPosition()); bounds.extend(item.marker.getPosition());
map.fitBounds(bounds); map.fitBounds(bounds);
setTimeout(function () { setTimeout(function () {
var zoomLevel = map.getZoom(); let zoomLevel = map.getZoom();
if (zoomLevel > 12) map.setZoom(12); if (zoomLevel > 12) map.setZoom(12);
}, 500); }, 500);


@ -317,7 +301,7 @@
$("#contents").append(newElement); $("#contents").append(newElement);
}); });


showedItems = items; showedItems = currentItems;
} }


google.maps.event.addListener(map, 'dragend', getVisibleMarkers); google.maps.event.addListener(map, 'dragend', getVisibleMarkers);