Fix : Cluster not displaying on mobile + responsive

clementp0 · Jun 13, 2024 · 217333c · 217333c
1 parent dd147d1
commit 217333c
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 4 deletions.
diff --git a/assets/js/page/map.js b/assets/js/page/map.js
@@ -1205,7 +1205,7 @@ ClusterIcon.prototype.setCenter = function(center) {
  */
 ClusterIcon.prototype.createCss = function(pos) {
   var style = [];
-  style.push('background-image:url(' + this.url_ + ');');
+  style.push('background-image:url(' + this.url_ + ');background-size: contain;');
   var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0';
   style.push('background-position:' + backgroundPosition + ';');
 
@@ -1326,7 +1326,7 @@ function setMarkers(map, items) {
 
 
   new MarkerClusterer(map, markers, {
-    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
+    imagePath: '/assets/cluster/m',
     gridSize: 60, 
     maxZoom: 15, 
     minimumClusterSize: 3 

diff --git a/assets/scss/page/map.scss b/assets/scss/page/map.scss
@@ -1,6 +1,6 @@
 // map page
 #map-wrapper-inner {
-  height: calc(100vh - 88px);
+  height: calc(100dvh - 44px);
   position: relative;
   overflow: hidden;
 
@@ -255,4 +255,15 @@
   100% {
     color: #e9cd11;
 }
+}
+
+// Override properties
+
+footer{
+  display: none!important;
+}
+
+body{
+  min-height: 100%!important;
+  padding-bottom: 0!important;
 }
diff --git a/public/assets/cluster/m1.png b/public/assets/cluster/m1.png
diff --git a/public/assets/cluster/m2.png b/public/assets/cluster/m2.png
diff --git a/public/assets/cluster/m3.png b/public/assets/cluster/m3.png
diff --git a/public/assets/cluster/m4.png b/public/assets/cluster/m4.png
diff --git a/public/assets/cluster/m5.png b/public/assets/cluster/m5.png
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -9,6 +9,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 		<meta name="apple-mobile-web-app-status-bar-style" content="default">
 
+		<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
 		<link rel="manifest" href="../manifest.json">
 

diff --git a/templates/map/index.html.twig b/templates/map/index.html.twig
@@ -5,7 +5,7 @@
 			{% include 'sidebar.html.twig' %}
 		{% endif %}
 
-		<div class="loading-container">
+		<div class="loading-container" style="display:none">
 			<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 20px;">
 				<div class="loading-image">
 					<img src="/assets/loading.png">