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

.

master
Gustavo Luigi 2023-05-30 12:25:00 -03:00
parent 5879ab38dc
commit b556449580
1 changed files with 183 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
content/index.blade.php
View File

@ -30,6 +30,14 @@
#contents::-webkit-scrollbar-thumb:hover { #contents::-webkit-scrollbar-thumb:hover {
background-color: #888; background-color: #888;
} }

.address{
cursor: pointer;
transition: all .2s;
}
.address:hover{
background: #eee;
}
</style> </style>
@stop @stop
@section('content') @section('content')
@ -37,23 +45,20 @@
<div class="row mb-3"> <div class="row mb-3">
<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 id="filters">
<div class="dropdown me-2 d-none">
<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"> <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 p-2" id="options">
<li> <li>
<label> <label>
<input class="check-filter" type="checkbox" value="1"> Option 1 <input class="check-filter" type="checkbox" value="1"> $option
</label>
</li>
<li>
<label>
<input class="check-filter" type="checkbox" value="2"> Option 2
</label> </label>
</li> </li>
</ul> </ul>
</div> --> </div>
</div>
<div style="width: 350px;"> <div style="width: 350px;">
<input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort"/> <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort"/>
</div> </div>
@ -106,130 +111,65 @@
//const filterFields = ['categoria']; //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) { function createInfowindowElement(item){

let infowindowElement = $("#marker-window").clone();
let items = contents["contents"]; infowindowElement.html(infowindowElement.html().replace('$title', item.title));

infowindowElement.html(infowindowElement.html().replace('$description', item.description ?? ''));
if (items != undefined) { infowindowElement.html(infowindowElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));

infowindowElement.removeClass('d-none');
locationItems = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' }); return infowindowElement[0].outerHTML;

}
let currentItems = locationItems;

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

loadItems();

function loadItems() {
$("#count-items-displayed").text(currentItems.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,
center: { lat: 50.9807, lng: 10.31522 },
streetViewControl: false, streetViewControl: false,
mapTypeControl: false, mapTypeControl: false,
fullscreenControl: false, fullscreenControl: false,
}); });


let currentInfoWindow = null; let currentItems = [];

$.get(contentUrl).done(function (contents) {
let items = contents["contents"];
if (items != undefined) {
locationItems = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
currentItems = locationItems;
loadCurrentItems();
}
});

let markerCluster;

function loadCurrentItems() {
$("#count-items-displayed").text(currentItems.length);
if(markerCluster != undefined) markerCluster.clearMarkers();
if (currentItems.length > 0) {
let openInfoWindow = null;


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

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

let marker = new google.maps.Marker({ let marker = new google.maps.Marker({
position: { lat: lat, lng: lng }, position: { lat: item.location.lat, lng: item.location.lng },
map: map, map: map,
title: item.title, title: item.title,
optimized: false, optimized: false,
}); });

let infowindowElement = createInfowindowElement(item); let infowindowElement = createInfowindowElement(item);

let infowindow = new google.maps.InfoWindow({ content: infowindowElement }); let infowindow = new google.maps.InfoWindow({ content: infowindowElement });

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

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

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

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

let newElement = addLocationElement(item);

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

map.setCenter({ lat: lat, lng: lng });

google.maps.event.trigger(marker, 'click');
getVisibleMarkers();
});

$("#contents").append(newElement);

item.marker = marker; item.marker = marker;

return item; return item;
}); });
let markers = currentItems.map(function (item) { let markers = currentItems.map(item => item.marker);
return item.marker;
});
let bounds = new google.maps.LatLngBounds(); markerCluster = new MarkerClusterer(map, markers);
for (let i = 0; i < markers.length; i++) { markerCluster.setStyles([{
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);

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

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,
@ -237,102 +177,108 @@
backgroundPosition: '0 0', backgroundPosition: '0 0',
iconAnchor: [26, 53], iconAnchor: [26, 53],
textColor: '#ffffff' textColor: '#ffffff'
}]; }]);
let markerCluster = new MarkerClusterer(map, markers);
markerCluster.setStyles(clusterStyles);


function getVisibleMarkers() { setTimeout(() => {
let zoomLevel = map.getZoom(); clearFocus();
let bounds = map.getBounds(); showVisibleMarkers();

}, 100);
let visibleMarkers = []; }

for (let i = 0; i < markers.length; i++) {
if (bounds.contains(markers[i].getPosition())) visibleMarkers.push(markers[i]);
} }


let visibleMarkersPosition = visibleMarkers.map(function (visibleMarker) { const locationElementTemplate = $("#contents").children().first();
let position = visibleMarker.getPosition(); locationElementTemplate.remove();
let latitude = position.lat();
let longitude = position.lng(); function showVisibleMarkers() {
return [latitude, longitude];
let showedItems = currentItems.filter(function (item) {
return map.getBounds().contains(item.marker.getPosition());
}); });


let showedItems = currentItems;

showedItems = showedItems.filter(function (item) {

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

return visibleMarkersPosition.some(function (item) {
return item[0] === position[0] && item[1] === position[1];
});

});

$("#contents").html("");

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


$("#contents").empty();
showedItems.forEach(function (item) { showedItems.forEach(function (item) {

let locationElement = locationElementTemplate.clone();
let lat = parseFloat(item[locationField].lat); locationElement.html(locationElement.html().replace('$title', item.title));
let lng = parseFloat(item[locationField].lng); locationElement.html(locationElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));

locationElement.html(locationElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
let newElement = addLocationElement(item); locationElement.removeClass('d-none');

locationElement.on('click', function () {
newElement.on('click', function () { map.setZoom(12);

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

map.setCenter({ lat: lat, lng: lng });

google.maps.event.trigger(item.marker, 'click'); google.maps.event.trigger(item.marker, 'click');
getVisibleMarkers();
}); });

$("#contents").append(locationElement);
$("#contents").append(newElement);
}); });


showedItems = currentItems; showedItems = currentItems;
} }


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


google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers); $("#search-input").on("keyup", function(event) {
if (event.key === "Enter") $("#search-button").click();
});
$("#search-button").on("click", function () {
$("#contents").html("");
let value = $("#search-input").val();
currentItems = locationItems.filter(function (item) {
return item.title.toLowerCase().includes(value.toLowerCase());
});
loadCurrentItems();
});


let locationInput = $('#ort')[0]; function setLocationFocus(address){
let autocomplete = new google.maps.places.Autocomplete(locationInput, {"types": ["country", "route", "street_address", "locality"], "componentRestrictions": {"country": ["de","se","at","nl"]}}); new google.maps.Geocoder().geocode({ 'address': address }, function(results, status) {
autocomplete.addListener("place_changed", function () {

let place = autocomplete.getPlace();
let address = place.formatted_address;
let geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'address': address }, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) { if (status === google.maps.GeocoderStatus.OK) {
let location = results[0].geometry.location; map.setCenter(results[0].geometry.location);

map.setCenter(location);
map.fitBounds(results[0].geometry.viewport); map.fitBounds(results[0].geometry.viewport);

} else { } else {
console.warn('Geocode não obteve sucesso devido a: ' + status); console.warn('Geocode não obteve sucesso devido a: ' + status);
} }
}); });
}


function clearFocus(){
let markers = currentItems.map(item => item.marker);
if(currentItems.length == 1) {
map.setZoom(12);
map.setCenter(markers[0].getPosition());
}else{
let bounds = new google.maps.LatLngBounds();
markers.forEach(function(marker){
bounds.extend(marker.getPosition());
}); });
map.fitBounds(bounds);
} }
} }

$('#ort').on("change", function(){
if($(this).val() === "") clearFocus();
});

let locationInput = $('#ort')[0];
let autocomplete = new google.maps.places.Autocomplete(locationInput, {"types": ["country", "route", "street_address", "locality"], "componentRestrictions": {"country": ["de","se","at","nl","br"]}});
autocomplete.addListener("place_changed", function () {
let place = autocomplete.getPlace();
let address = place.formatted_address;
if (!place.geometry) {
let inputText = locationInput.value;
let autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({ input: inputText, componentRestrictions: { country: ["de", "se", "at", "nl", "br"] } }, function (predictions, status) {
if (status === google.maps.places.PlacesServiceStatus.OK && predictions && predictions.length > 0) {
let firstPrediction = predictions[0];
address = firstPrediction.description;
locationInput.value = address;
setLocationFocus(address);
} }
}); });
} else setLocationFocus(address);
});

} }
</script> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script>