youen/flarum-users-map-location
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Youen 2023-08-26 12:02:02 +02:00
parent 5c5d1f0d16
commit ab223595e9
7 changed files with 70 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
js/dist/forum.js vendored
View File

@ -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', {
page: {
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.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: 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()));

2
js/dist/forum.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
js/dist/forum.less vendored
View File

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

38
js/src/forum/components/GlobalMapPage.tsx
View File

@ -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) => {
let markers = L.markerClusterGroup({ maxClusterRadius: 40 });
for(let item of response) {
let user = item.data.attributes;
let 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.userMarkers = 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: 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
}
});
}
}

2
less/forum.less
View File

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

3
locale/en.yml
View File

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

3
locale/fr.yml
View File

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