Fixed issue where only the first 50 users would be displayed on the map

js/dist/forum.js

@@ -16448,7 +16448,7 @@ var GlobalMapPage = /*#__PURE__*/function (_Page) {
       "class": "GlobalMapPage"
     }, m("div", {
       className: "container"
-    }, m("h2", null, translate('justoverclock-users-map-location.forum.global-map.title2')), m("div", {
+    }, m("h2", null, translate('justoverclock-users-map-location.forum.global-map.title2')), m("p", null, translate('justoverclock-users-map-location.forum.global-map.description')), m("div", {
       className: "global-map"
     })));
   };
@@ -16458,8 +16458,6 @@ var GlobalMapPage = /*#__PURE__*/function (_Page) {
   };
 
   _proto.onupdate = function onupdate(vnode) {
-    var _this = this;
-
     var dom = vnode.dom;
     var mapElements = dom.getElementsByClassName('global-map');
 
@@ -16468,7 +16466,7 @@ var GlobalMapPage = /*#__PURE__*/function (_Page) {
         var mapElement = mapElements[0];
         var publicToken = flarum_forum_app__WEBPACK_IMPORTED_MODULE_1___default().forum.attribute('justoverclock-users-map-location.mapBox-api-key');
         var markerIconPath = flarum_forum_app__WEBPACK_IMPORTED_MODULE_1___default().forum.attribute('baseUrl') + '/assets/extensions/justoverclock-users-map-location/marker-icon.png';
-        var markerIcon = L.icon({
+        this.userMarkerIcon = L.icon({
           iconUrl: markerIconPath,
           iconSize: [25, 41],
           // size of the icon
@@ -16485,31 +16483,45 @@ var GlobalMapPage = /*#__PURE__*/function (_Page) {
           accessToken: publicToken
         }).addTo(this.map);
         this.map.setView([47, 2], 6);
+        this.userMarkers = L.markerClusterGroup({
+          maxClusterRadius: 40
+        });
+        this.map.addLayer(this.userMarkers); // begin fetching users
+
+        this.fetchUsers(0);
+      }
+    } else {
+      this.map = null;
+    }
+  };
+
+  _proto.fetchUsers = function fetchUsers(offset) {
+    var _this = this;
+
+    var maxLocationsPerRequest = 50;
     flarum_forum_app__WEBPACK_IMPORTED_MODULE_1___default().store.find('user-locations', {
       page: {
-            limit: 1000
+        limit: maxLocationsPerRequest,
+        offset: offset
       }
     }).then(function (response) {
-          var markers = L.markerClusterGroup({
-            maxClusterRadius: 40
-          });
-
       for (var _iterator = _createForOfIteratorHelperLoose(response), _step; !(_step = _iterator()).done;) {
         var item = _step.value;
         var user = item.data.attributes;
         var marker = L.marker([parseFloat(user.location_latitude), parseFloat(user.location_longitude)], {
-              icon: markerIcon
+          icon: _this.userMarkerIcon
         });
         marker.bindPopup('<a href="/u/' + escapeHtml(user.username) + '">' + escapeHtml(user.displayName) + '</a>');
-            markers.addLayer(marker);
-          }
 
-          _this.map.addLayer(markers);
+        _this.userMarkers.addLayer(marker);
-        });
       }
-    } else {
+
-      this.map = null;
+      if (response.length == maxLocationsPerRequest) {
+        // we need to fetch more users
+        _this.fetchUsers(offset + response.length);
+      } else {// finished fetching all users
       }
+    });
   };
 
   return GlobalMapPage;

js/dist/forum.less

@@ -29,7 +29,7 @@ input#location {
 }
 
 .global-map {
-  height: ~"calc(100vh - 170px)";
+  height: ~"calc(100vh - 200px)";
   width: 100%;
   border-radius: 10px;
 }

js/src/forum/components/GlobalMapPage.tsx

@@ -23,6 +23,7 @@ export default class GlobalMapPage extends Page {
 		return <div class="GlobalMapPage">
 			<div className="container">
 				<h2>{translate('justoverclock-users-map-location.forum.global-map.title2')}</h2>
+				<p>{translate('justoverclock-users-map-location.forum.global-map.description')}</p>
 				<div className="global-map"></div>
 			</div>
 		</div>;
@@ -43,7 +44,7 @@ export default class GlobalMapPage extends Page {
 				const publicToken = app.forum.attribute('justoverclock-users-map-location.mapBox-api-key');
 				const markerIconPath = app.forum.attribute('baseUrl') + '/assets/extensions/justoverclock-users-map-location/marker-icon.png';
 
-				let markerIcon = L.icon({
+				this.userMarkerIcon = L.icon({
 					iconUrl: markerIconPath,
 					iconSize: [25, 41], // size of the icon
 					iconAnchor: [13, 40]
@@ -63,19 +64,34 @@ export default class GlobalMapPage extends Page {
 				
 				this.map.setView([47, 2], 6);
 				
-				app.store.find('user-locations', { page: { limit: 1000 } }).then((response) => {
+				this.userMarkers = L.markerClusterGroup({ maxClusterRadius: 40 });
-					let markers = L.markerClusterGroup({ maxClusterRadius: 40 });
+				this.map.addLayer(this.userMarkers);
+				
+				// begin fetching users
+				this.fetchUsers(0);
+			}
+		} else {
+			this.map = null;
+		}
+	}
+
+	fetchUsers(offset) {
+		let maxLocationsPerRequest = 50;
+		app.store.find('user-locations', { page: { limit: maxLocationsPerRequest, offset: offset } }).then((response) => {
 			for(let item of response) {
 				let user = item.data.attributes;
-						let marker = L.marker([parseFloat(user.location_latitude), parseFloat(user.location_longitude)], { icon: markerIcon });
+				let marker = L.marker([parseFloat(user.location_latitude), parseFloat(user.location_longitude)], { icon: this.userMarkerIcon });
 				marker.bindPopup('<a href="/u/'+escapeHtml(user.username)+'">'+escapeHtml(user.displayName)+'</a>');
-						markers.addLayer(marker);
+				this.userMarkers.addLayer(marker);
 			}
-					this.map.addLayer(markers);
+			
-				});
+			if(response.length == maxLocationsPerRequest) {
+				// we need to fetch more users
+				this.fetchUsers(offset + response.length);
 			}
-		} else {
+			else {
-			this.map = null;
+				// finished fetching all users
 			}
+		});
 	}
 }

less/forum.less

@@ -26,7 +26,7 @@ input#location {
 }
 
 .global-map {
-  height: ~"calc(100vh - 170px)";
+  height: ~"calc(100vh - 200px)";
   width: 100%;
   border-radius: 10px;
 }

locale/en.yml

@@ -16,3 +16,4 @@ justoverclock-users-map-location:
       linkToMap: Map
       title: Global Map
       title2: Map of members
+      description: Only members who have chosen to share their city are displayed here.

locale/fr.yml

@@ -16,3 +16,4 @@ justoverclock-users-map-location:
       linkToMap: Carte
       title: Carte globale
       title2: Carte des membres
+      description: Seuls les membres qui ont décidé de partager leur ville sont visibles ici.