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

420
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">
<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"> <div class="dropdown me-2 d-none">
Filter <span class="caret"></span> <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> $filter <span class="caret"></span>
<ul class="dropdown-menu checkbox-menu allow-focus"> </button>
<li> <ul class="dropdown-menu checkbox-menu allow-focus p-2" id="options">
<label> <li>
<input class="check-filter" type="checkbox" value="1"> Option 1 <label>
</label> <input class="check-filter" type="checkbox" value="1"> $option
</li> </label>
<li> </li>
<label> </ul>
<input class="check-filter" type="checkbox" value="2"> Option 2 </div>
</label> </div>
</li>
</ul>
</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,233 +111,174 @@
//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() {
function createInfowindowElement(item){
let infowindowElement = $("#marker-window").clone();
infowindowElement.html(infowindowElement.html().replace('$title', item.title));
infowindowElement.html(infowindowElement.html().replace('$description', item.description ?? ''));
infowindowElement.html(infowindowElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
infowindowElement.removeClass('d-none');
return infowindowElement[0].outerHTML;
}
let map = new google.maps.Map(document.getElementById("map"), {
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false,
});

let currentItems = [];

$.get(contentUrl).done(function (contents) { $.get(contentUrl).done(function (contents) {

let items = contents["contents"]; let items = contents["contents"];

if (items != undefined) { if (items != undefined) {

locationItems = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' }); locationItems = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });

currentItems = locationItems;
let currentItems = locationItems; loadCurrentItems();

$("#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"), {
zoom: 6,
center: { lat: 50.9807, lng: 10.31522 },
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false,
});

let currentInfoWindow = null;

currentItems = currentItems.map(function (item) {

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

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

let infowindowElement = createInfowindowElement(item);

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

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

if (currentInfoWindow) currentInfoWindow.close();

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

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;

return item;
});

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

let bounds = new google.maps.LatLngBounds();
for (let i = 0; i < markers.length; i++) {
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',
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() {
let zoomLevel = map.getZoom();
let bounds = map.getBounds();

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) {
let position = visibleMarker.getPosition();
let latitude = position.lat();
let longitude = position.lng();
return [latitude, longitude];
});

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").text(currentItems.length);

showedItems.forEach(function (item) {

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

let newElement = addLocationElement(item);

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

let bounds = new google.maps.LatLngBounds();
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');
getVisibleMarkers();
});

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

showedItems = currentItems;
}

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

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

let locationInput = $('#ort')[0];
let autocomplete = new google.maps.places.Autocomplete(locationInput, {"types": ["country", "route", "street_address", "locality"], "componentRestrictions": {"country": ["de","se","at","nl"]}});
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) {
let location = results[0].geometry.location;

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

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

});
}
}
} }
}); });

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) {
item.location.lat = parseFloat(item[locationField].lat);
item.location.lng = parseFloat(item[locationField].lng);
let marker = new google.maps.Marker({
position: { lat: item.location.lat, lng: item.location.lng },
map: map,
title: item.title,
optimized: false,
});
let infowindowElement = createInfowindowElement(item);
let infowindow = new google.maps.InfoWindow({ content: infowindowElement });
marker.addListener('click', function () {
if (openInfoWindow) openInfoWindow.close();
infowindow.open({ anchor: marker, map });
openInfoWindow = infowindow;
});
item.marker = marker;
return item;
});
let markers = currentItems.map(item => item.marker);
markerCluster = new MarkerClusterer(map, markers);
markerCluster.setStyles([{
url: 'http://localhost/maps-theme/public/template/cluster.png',
height: 40,
width: 40,
textSize: 14,
backgroundPosition: '0 0',
iconAnchor: [26, 53],
textColor: '#ffffff'
}]);

setTimeout(() => {
clearFocus();
showVisibleMarkers();
}, 100);
}
}

const locationElementTemplate = $("#contents").children().first();
locationElementTemplate.remove();
function showVisibleMarkers() {
let showedItems = currentItems.filter(function (item) {
return map.getBounds().contains(item.marker.getPosition());
});

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

$("#contents").empty();
showedItems.forEach(function (item) {
let locationElement = locationElementTemplate.clone();
locationElement.html(locationElement.html().replace('$title', item.title));
locationElement.html(locationElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
locationElement.html(locationElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
locationElement.removeClass('d-none');
locationElement.on('click', function () {
map.setZoom(12);
map.setCenter(item.marker.getPosition());
showVisibleMarkers();
google.maps.event.trigger(item.marker, 'click');
});
$("#contents").append(locationElement);
});

showedItems = currentItems;
}

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

$("#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();
});

function setLocationFocus(address){
new google.maps.Geocoder().geocode({ 'address': address }, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.viewport);
} else {
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>