added search bar
Gustavo Luigi
parent
53ef8915b5
commit
7851bb54b8
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
|
|
@ -37,5 +37,25 @@
|
|||
const contentUrl = "{{url('/api/contents/'.$content->id)}}";
|
||||
const locationField = "location";
|
||||
</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
|
||||
|
|
@ -5,28 +5,66 @@
|
|||
#map {
|
||||
height: 80vh;
|
||||
width: 100%;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.address + .address{
|
||||
margin-top: .5rem;
|
||||
}
|
||||
#marker-window{
|
||||
min-width: 100px;
|
||||
}
|
||||
</style>
|
||||
@stop
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1>{{config('settings.name')}}</h1>
|
||||
<p>{{config('settings.description')}}</p>
|
||||
<div class="container py-5">
|
||||
<div class="row mb-3">
|
||||
<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">
|
||||
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 class="row">
|
||||
<div class="col-4" id="contents">
|
||||
<div class="card d-none">
|
||||
<div class="card d-none address">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<!-- <div class="col-5">
|
||||
<img data-src="$image" alt="">
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<h3 class="h5">$title</h3>
|
||||
<a data-href="$path">Ansehen</a>
|
||||
</div> -->
|
||||
<div class="col-12">
|
||||
<h3 class="fs-6 m-0">$title</h3>
|
||||
<!-- <a data-href="$path">Ansehen</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,7 +73,7 @@
|
|||
<div class="col-8 g-0">
|
||||
<div id="map"></div>
|
||||
<div id="marker-window" class="d-none">
|
||||
<h5 id="firstHeading" class="firstHeading">$title</h5>
|
||||
<h6 id="firstHeading" class="firstHeading">$title</h6>
|
||||
<div id="bodyContent">
|
||||
<p>$description</p>
|
||||
<a data-href="$path">Details</a>
|
||||
|
|
@ -45,10 +83,236 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
const contentUrl = "{{url('/api/types/locations/contents')}}";
|
||||
const locationField = "location";
|
||||
</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
|
||||
|
|
@ -6,8 +6,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
<meta name="description" content="{{config('settings.description')}}" />
|
||||
<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">
|
||||
<script src="{{storage('libs/jquery-3.6.0.min.js')}}"></script>
|
||||
<link href="{{asset('template/libs/bootstrap-5.2.0/bootstrap.min.css')}}" rel="stylesheet"/>
|
||||
<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')
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
140
js/maps.js
140
js/maps.js
|
|
@ -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
Loading…
Reference in New Issue