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,33 +16483,47 @@ var GlobalMapPage = /*#__PURE__*/function (_Page) {
           accessToken: publicToken
         }).addTo(this.map);
         this.map.setView([47, 2], 6);
-        flarum_forum_app__WEBPACK_IMPORTED_MODULE_1___default().store.find('user-locations', {
+        this.userMarkers = L.markerClusterGroup({
-          page: {
+          maxClusterRadius: 40
-            limit: 1000
-          }
-        }).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
-            });
-            marker.bindPopup('<a href="/u/' + escapeHtml(user.username) + '">' + escapeHtml(user.displayName) + '</a>');
-            markers.addLayer(marker);
-          }
-
-          _this.map.addLayer(markers);
         });
+        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: maxLocationsPerRequest,
+        offset: offset
+      }
+    }).then(function (response) {
+      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: _this.userMarkerIcon
+        });
+        marker.bindPopup('<a href="/u/' + escapeHtml(user.username) + '">' + escapeHtml(user.displayName) + '</a>');
+
+        _this.userMarkers.addLayer(marker);
+      }
+
+      if (response.length == maxLocationsPerRequest) {
+        // we need to fetch more users
+        _this.fetchUsers(offset + response.length);
+      } else {// finished fetching all users
+      }
+    });
+  };
+
   return GlobalMapPage;
 }((flarum_common_components_Page__WEBPACK_IMPORTED_MODULE_2___default()));
 

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);
-					for(let item of response) {
+				
-						let user = item.data.attributes;
+				// begin fetching users
-						let marker = L.marker([parseFloat(user.location_latitude), parseFloat(user.location_longitude)], { icon: markerIcon });
+				this.fetchUsers(0);
-						marker.bindPopup('<a href="/u/'+escapeHtml(user.username)+'">'+escapeHtml(user.displayName)+'</a>');
-						markers.addLayer(marker);
-					}
-					this.map.addLayer(markers);
-				});
 			}
 		} 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: this.userMarkerIcon });
+				marker.bindPopup('<a href="/u/'+escapeHtml(user.username)+'">'+escapeHtml(user.displayName)+'</a>');
+				this.userMarkers.addLayer(marker);
+			}
+			
+			if(response.length == maxLocationsPerRequest) {
+				// we need to fetch more users
+				this.fetchUsers(offset + response.length);
+			}
+			else {
+				// 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.