From 53ef8915b59868620cc49d44a59871e32a5401e1 Mon Sep 17 00:00:00 2001 From: Gustavo Luigi <=> Date: Wed, 17 May 2023 16:16:49 -0300 Subject: [PATCH] added marker window --- content/contents/default.blade.php | 37 +++----- content/index.blade.php | 127 +++----------------------- content/master.blade.php | 11 +-- js/maps.js | 140 +++++++++++++++++++++++++++++ 4 files changed, 168 insertions(+), 147 deletions(-) create mode 100644 js/maps.js diff --git a/content/contents/default.blade.php b/content/contents/default.blade.php index 5af1611..488910d 100644 --- a/content/contents/default.blade.php +++ b/content/contents/default.blade.php @@ -9,46 +9,33 @@ @stop @section('content') -
← Back

{{$content->title}}

-

{{$content->description}}

+

{$content->description}

- -
-
-
- +
+
$title
+
+

$description

+ Details +
+
-
- + + @stop \ No newline at end of file diff --git a/content/index.blade.php b/content/index.blade.php index fe022df..b812239 100644 --- a/content/index.blade.php +++ b/content/index.blade.php @@ -9,7 +9,6 @@ @stop @section('content') -
@@ -17,18 +16,17 @@

{{config('settings.description')}}

-
- +
-

- Ansehen +

$title

+ Ansehen
@@ -36,120 +34,21 @@
+
+
$title
+
+

$description

+ Details +
+
- - + @stop \ No newline at end of file diff --git a/content/master.blade.php b/content/master.blade.php index 752be42..09e4232 100644 --- a/content/master.blade.php +++ b/content/master.blade.php @@ -1,21 +1,16 @@ + - @yield('head') - - - + + @yield('head') - @yield('content') - - - diff --git a/js/maps.js b/js/maps.js new file mode 100644 index 0000000..310c9fa --- /dev/null +++ b/js/maps.js @@ -0,0 +1,140 @@ +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; \ No newline at end of file