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')
-
@@ -17,18 +16,17 @@
{{config('settings.description')}}
-
-
+
@@ -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