added search bar

master
Gustavo Luigi 2023-05-18 14:14:55 -03:00
parent 53ef8915b5
commit 7851bb54b8
7 changed files with 314 additions and 157 deletions

BIN
cluster.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

@ -37,5 +37,25 @@
const contentUrl = "{{url('/api/contents/'.$content->id)}}"; const contentUrl = "{{url('/api/contents/'.$content->id)}}";
const locationField = "location"; const locationField = "location";
</script> </script>
<script src="{{asset('template/js/maps.js')}}"></script> <script>
function initMap() {
let item = {!! json_encode($content) !!};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: { lat: parseFloat(item.location.lat), lng: parseFloat(item.location.lng) },
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false,
});

let marker = new google.maps.Marker({
position: { lat: parseFloat(item.location.lat), lng: parseFloat(item.location.lng) },
map: map,
title: item.title,
optimized: false,
});
}
window.initMap = initMap;
</script>
@stop @stop

View File

@ -5,28 +5,66 @@
#map { #map {
height: 80vh; height: 80vh;
width: 100%; width: 100%;
border-radius: 0.375rem;
}
.address + .address{
margin-top: .5rem;
}
#marker-window{
min-width: 100px;
} }
</style> </style>
@stop @stop
@section('content') @section('content')
<div class="container"> <div class="container py-5">
<div class="row"> <div class="row mb-3">
<div class="col"> <div id="filters" class="col-12 col-md rounded-end">
<h1>{{config('settings.name')}}</h1> <div class="d-flex">
<p>{{config('settings.description')}}</p> <!-- <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">
Filter <span class="caret"></span>
</button>
<ul class="dropdown-menu checkbox-menu allow-focus">
<li>
<label>
<input class="check-filter" type="checkbox" value="1"> Option 1
</label>
</li>
<li>
<label>
<input class="check-filter" type="checkbox" value="2"> Option 2
</label>
</li>
</ul>
</div> -->
<div style="width: 200px;">
<input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort" disabled>
</div>
<div class="input-group ms-2" style="width: 200px;">
<input type="text" class="form-control form-control-sm" id="search-input" placeholder="Freitext-Suche">
<span class="input-group-text" id="search-button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</span>
</div>
</div>
</div>
<div class="col-12 col-md-auto pe-0 d-flex align-items-end">
<p class="text-end text-muted small m-0 p-0"><span id="count-items-displayed">0</span>/<span id="count-items">0</span></p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4" id="contents"> <div class="col-4" id="contents">
<div class="card d-none"> <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 data-src="$image" alt="">
</div> </div> -->
<div class="col-7"> <div class="col-12">
<h3 class="h5">$title</h3> <h3 class="fs-6 m-0">$title</h3>
<a data-href="$path">Ansehen</a> <!-- <a data-href="$path">Ansehen</a> -->
</div> </div>
</div> </div>
</div> </div>
@ -35,7 +73,7 @@
<div class="col-8 g-0"> <div class="col-8 g-0">
<div id="map"></div> <div id="map"></div>
<div id="marker-window" class="d-none"> <div id="marker-window" class="d-none">
<h5 id="firstHeading" class="firstHeading">$title</h5> <h6 id="firstHeading" class="firstHeading">$title</h6>
<div id="bodyContent"> <div id="bodyContent">
<p>$description</p> <p>$description</p>
<a data-href="$path">Details</a> <a data-href="$path">Details</a>
@ -45,10 +83,236 @@
</div> </div>
</div> </div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script> <!-- <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script> -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script> <script>
const contentUrl = "{{url('/api/types/locations/contents')}}"; const contentUrl = "{{url('/api/types/locations/contents')}}";
const locationField = "location"; const locationField = "location";
</script> </script>
<script src="{{asset('template/js/maps.js')}}"></script> <script>
function initMap() {
$.ajax({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
url: contentUrl,
type: 'GET',
data: {},
success: function (contents) {

let receivedItems = contents["contents"];

if (receivedItems != undefined) {

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

const templateInfowindow = $("#marker-window");

let templateElement = $("#contents").children().first();
templateContent = templateElement;
templateElement.remove();

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

items = receivedItems;

loadItems();

function loadItems() {
console.log(items.length);
$("#count-items-displayed").text(items.length);
$("#count-items").text(items.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 (items.length > 0) {


let currentInfoWindow = null;

items = items.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 contentString = templateInfowindow.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');

let infowindow = new google.maps.InfoWindow({
content: contentString[0].outerHTML
});

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

if (currentInfoWindow) currentInfoWindow.close();

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');

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 = items.map(function (item) {
return item.marker;
});

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


setTimeout(function () {
var 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);
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 = items;

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(items.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');

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

var bounds = new google.maps.LatLngBounds();
bounds.extend(item.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(item.marker, 'click');
getVisibleMarkers();
});

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

showedItems = items;
}

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

google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
}
}
}
},
error: function (error) {
console.log(error);
}
});
}
window.initMap = initMap;
</script>
@stop @stop

View File

@ -6,8 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="{{config('settings.description')}}" /> <meta name="description" content="{{config('settings.description')}}" />
<meta name="author" content=""/> <meta name="author" content=""/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> <link href="{{asset('template/libs/bootstrap-5.2.0/bootstrap.min.css')}}" rel="stylesheet"/>
<script src="{{storage('libs/jquery-3.6.0.min.js')}}"></script> <script src="{{asset('template/libs/jquery-3.6.0.min.js')}}"></script>
<script src="{{asset('template/libs/bootstrap-5.2.0/bootstrap.bundle.min.js')}}"></script>
@yield('head') @yield('head')
</head> </head>
<body> <body>

View File

@ -1,140 +0,0 @@
function initMap() {
$.ajax({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
url: contentUrl,
type: 'GET',
data: {},
success: function (contents) {

let items = contents["contents"];

if (items != undefined) {

let map = undefined;

if (items.length > 1) {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 6,
center: { lat: 50.9807, lng: 10.31522 }
});
} else {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: { lat: items[0][locationField].lat, lng: items[0][locationField].lng }
});
}

let templateElement = $("#contents").children().first();
templateContent = templateElement;
templateElement.remove();

if ($("#contents").length > 0) {
items.forEach(function (item) {
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');
$("#contents").append(newElement);
});
}

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

let currentInfoWindow = null;

const templateInfowindow = $("#marker-window");

const markers = items.map(function (item) {
let marker = new google.maps.Marker({
position: { lat: parseFloat(item[locationField].lat), lng: parseFloat(item[locationField].lng) },
map: map,
title: item.title,
optimized: false,
});

let contentString = templateInfowindow.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');

marker.addListener('click', function () {
if (currentInfoWindow) currentInfoWindow.close();

let infowindow = new google.maps.InfoWindow({
content: contentString[0].outerHTML,
ariaLabel: "",
});

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

currentInfoWindow = infowindow;
});

return marker;
});

new markerClusterer.MarkerClusterer({ map, markers });

if ($("#contents").length > 0) {
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 = items;

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

showedItems.forEach(function (item) {
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');
$("#contents").append(newElement);
});

showedItems = items;
}

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

google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
}
}
},
error: function (error) {
console.log(error);
}
});
}
window.initMap = initMap;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long