Skip to content
This repository was archived by the owner on Apr 16, 2025. It is now read-only.

Commit c162950

Browse files
TGRHavocTGRHavoc
committed
feat: add clustering player icons
If a player marker is within 20 (or there abouts) pixels of another, they will be clustered together. To show a clustered player's information. Just click on their name.
1 parent e65f4b0 commit c162950

File tree

13 files changed

+2866
-49
lines changed

13 files changed

+2866
-49
lines changed

‎debug.html‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,14 @@
3333
<!-- Vendor Stylesheets -->
3434
<link rel="stylesheet" href="style/vendor/all.css" />
3535
<link rel="stylesheet" href="style/vendor/bootstrap.css" />
36-
<link rel="stylesheet" href="style/vendor/bootstrap-grid.css" />
37-
<link rel="stylesheet" href="style/vendor/bootstrap-reboot.css" />
38-
<link rel="stylesheet" href="style/vendor/bootstrap-theme.css" />
36+
<link rel="stylesheet" href="style/vendor/MarkerCluster.css" />
3937

4038
<!-- Custom stylesheet-->
4139
<link rel="stylesheet" href="style/src/style.css" />
4240

43-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
44-
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
45-
crossorigin=""/>
41+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
4642

47-
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
48-
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
49-
crossorigin=""></script>
43+
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
5044

5145
<!-- Vendor JS -->
5246
<!-- They only have a letter in front of them because, I cba adding vendors to gulpfile manually.
@@ -56,6 +50,7 @@
5650
<script src="js/vendor/b_bootstrap.js"></script>
5751
<script src="js/vendor/c_bootstrap-notify.js"></script>
5852
<script src="js/vendor/d_version_check.js"></script>
53+
<script src="js/vendor/e_leaflet.markercluster-src.js"></script>
5954

6055
<!-- Custom JS files -->
6156
<script src="js/src/alerter.1.js"></script>

‎dist/first-bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/last-bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/stylesheet.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,9 @@
3232

3333
<link type="text/css" rel="stylesheet" href="dist/stylesheet.css" />
3434

35-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
36-
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
37-
crossorigin=""/>
35+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
3836

39-
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
40-
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
41-
crossorigin=""></script>
37+
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
4238

4339
<script src="dist/first-bundle.js"></script>
4440

‎js/src/controls.2.js‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,5 +118,57 @@ $(document).ready(function(){
118118
clearAllMarkers();
119119
toggleBlips();
120120
});
121-
122121
});
122+
123+
function initControls(Map, PlayerMarkers){
124+
125+
// If they click on a clustered marker
126+
PlayerMarkers.on('clusterclick', function (a) {
127+
128+
var html = L.DomUtil.create('ul');
129+
var markers = a.layer.getAllChildMarkers();
130+
for (var i = 0; i < markers.length; i++) {
131+
var marker = markers[i].options;
132+
133+
var name = marker.title;
134+
var child = L.DomUtil.create("li", "clusteredPlayerMarker");
135+
child.setAttribute("data-identifier", marker.player.identifer);
136+
child.appendChild(document.createTextNode(name));
137+
138+
html.appendChild(child);
139+
}
140+
141+
L.DomEvent.on(html, "click", function(e){
142+
var t = e.target;
143+
var attribute = t.getAttribute("data-identifier");
144+
var m = MarkerStore[localCache[attribute].marker]; // Get the marker using the localcache.
145+
146+
Map.closePopup(Map._popup); //Close the currently open popup
147+
Map.openPopup(m.getPopup()); // Open the user's popup
148+
});
149+
150+
Map.openPopup(html, a.layer.getLatLng());
151+
});
152+
153+
// When a layer changes. Recalculate everything and shit. Make sure nothing breaks.
154+
Map.on("baselayerchange", function (e) {
155+
156+
var mapBounds = getMapBounds(e.layer);
157+
158+
Map.setMaxBounds(mapBounds);
159+
Map.fitBounds(mapBounds);
160+
CurrentLayer = e.layer;
161+
162+
Map.removeLayer(PlayerMarkers); // Remove the cluster layer
163+
window.PlayerMarkers = L.markerClusterGroup({ // Re-make it fresh
164+
maxClusterRadius: 20,
165+
spiderfyOnMaxZoom: false,
166+
showCoverageOnHover: false,
167+
zoomToBoundsOnClick: false
168+
});
169+
Map.addLayer(PlayerMarkers); // Add it back. The clearAllMarkers() will ensure player markers are added to the new cluster layer
170+
171+
clearAllMarkers();
172+
toggleBlips();
173+
});
174+
}

‎js/src/init.1.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,6 @@ function initPage() {
122122
console._log("hidding?");
123123
$myGroup.find('.collapse.show').collapse('hide');
124124
});
125-
126125
}
127126

128127
function getBlipMarkerId(blip){

‎js/src/map.1.js‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@
1818

1919
window.MarkerStore = [];
2020
window.CurrentLayer = undefined;
21+
window.PlayerMarkers = L.markerClusterGroup({
22+
maxClusterRadius: 20,
23+
spiderfyOnMaxZoom: false,
24+
showCoverageOnHover: false,
25+
zoomToBoundsOnClick: false
26+
});
27+
28+
window.Map = undefined;
2129

2230
L.Control.CustomLayer = L.Control.Layers.extend({
2331
_checkDisabledLayers: function () {}
@@ -45,37 +53,15 @@ function mapInit(elementID) {
4553
layers: [CurrentLayer]
4654
}).setView([0,0], 0);
4755

48-
var h = CurrentLayer.options.tileSize * 3,
49-
w = CurrentLayer.options.tileSize * 2;
50-
51-
var southWest = Map.unproject([0, h], Map.getMaxZoom());
52-
var northEast = Map.unproject([w, 0], Map.getMaxZoom());
53-
var mapBounds = new L.LatLngBounds(southWest, northEast);
56+
var mapBounds = getMapBounds(CurrentLayer);
5457

5558
Map.setMaxBounds(mapBounds);
56-
var control = new L.Control.CustomLayer(tileLayers).addTo(Map);
57-
58-
Map.on("baselayerchange", function (e) {
59-
var h = e.layer.options.tileSize * 3,
60-
w = e.layer.options.tileSize * 2;
61-
62-
var southWest = Map.unproject([0, h], Map.getMaxZoom());
63-
var northEast = Map.unproject([w, 0], Map.getMaxZoom());
64-
65-
var mapBounds = new L.LatLngBounds(southWest, northEast);
59+
Map.fitBounds(mapBounds);
6660

67-
Map.setMaxBounds(mapBounds);
68-
Map.fitBounds(mapBounds);
69-
CurrentLayer = e.layer;
70-
71-
clearAllMarkers();
72-
toggleBlips();
73-
});
61+
var control = new L.Control.CustomLayer(tileLayers).addTo(Map);
62+
Map.addLayer(PlayerMarkers);
7463

75-
Map.on('preclick', function (e) {
76-
console._log("Preclick!");
77-
console._log(e);
78-
});
64+
initControls(Map, PlayerMarkers);
7965
}
8066

8167
function createMarker(animated, draggable, objectRef, title) {
@@ -104,13 +90,20 @@ function createMarker(animated, draggable, objectRef, title) {
10490
//console._log(image);
10591
//console._log("image: " + JSON.stringify(image));
10692

93+
var where = Map;
94+
if(objectRef.data && objectRef.data.isPlayer){
95+
// Add to the cluster layer
96+
where = PlayerMarkers;
97+
}
98+
10799
var marker = L.marker(coord, {
108100
title: title,
109101
id: MarkerStore.length,
110102
icon: image,
111103
object: objectRef,
104+
player: objectRef.data.player ? objectRef.data.player : undefined,
112105
draggable: draggable ? true : false
113-
}).addTo(Map).bindPopup(infoContent);
106+
}).addTo(where).bindPopup(infoContent);
114107

115108
MarkerStore.push(marker);
116109
return MarkerStore.length;

‎js/src/socket.1.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ function doPlayerUpdate(players) {
346346

347347
} else {
348348

349-
var obj = new MarkerObject(plr.name, new Coordinates(plr.pos.x, plr.pos.y, plr.pos.z), MarkerTypes[6], "", "", "");
349+
var obj = new MarkerObject(plr.name, new Coordinates(plr.pos.x, plr.pos.y, plr.pos.z), MarkerTypes[6], "", {isPlayer: true, player: plr});
350350
var m = localCache[plr.identifer].marker = createMarker(false, false, obj, plr.name) - 1;
351351

352352
var html = getPlayerInfoHtml(plr);

‎js/src/utils.1.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,17 @@ function convertToMap(x, y) {
4444
};
4545
}
4646

47+
function getMapBounds(layer){
48+
var h = layer.options.tileSize * 3,
49+
w = layer.options.tileSize * 2;
50+
51+
var southWest = Map.unproject([0, h], Map.getMaxZoom());
52+
var northEast = Map.unproject([w, 0], Map.getMaxZoom());
53+
54+
return new L.LatLngBounds(southWest, northEast);
55+
}
56+
57+
// Stripping JSON comments
4758
const singleComment = 1;
4859
const multiComment = 2;
4960
const stripWithoutWhitespace = () => '';

0 commit comments

Comments
 (0)