Im not very knowlagble in Java or JQuery, but I do understand some of it as I used to be a web developer back in the 2000-2010.
What I am using is a Live map mod for a game(7 Days to Die). It is called “Alloc’s server fix” which has the live map mod using Leaflet.
I have done some of my own modification to this, mainly just style code and a few image changes. Also added another location overlay.
What I am hoping to accomplish is when a user logs into the game for the offline icon to change to online icon without refreshing/reloading the website(aka F5 key). There are a few things that do auto update like the amount of offline and online players, and game time and day auto updates as well.
I have tried to make this work with the L.icon but with no luck. I have to reload the website for it to change. I believe it has to do with the…
.done(setPlayerMaker) statement locking the icon in but not 100% sure.
here is the code that is being worked with in one file.
maps.js
// player icon
var playerIcon = L.icon({
iconUrl: '/static/leaflet/images/player.png',
iconRetinaUrl: '/static/leaflet/images/player.png',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15]
});
// player offline icon
var playerOfflineIcon = L.icon({
iconUrl: '/static/leaflet/images/player-offline.png',
iconRetinaUrl: '/static/leaflet/images/player-offline.png',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15]
});
// ===============================================================================================
// Player markers
$(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
ShowInventoryDialog ($(this).data('steamid'));
});
var setPlayerMarkers = function(data) {
var onlineIds = [];
updatingMarkers = true;
$.each( data, function( key, val ) {
if (val.online) {
var marker;
if (playersMappingList.hasOwnProperty(val.steamid)) {
marker = playersMappingList[val.steamid].currentPosMarker;
} else {
marker = L.marker([val.position.x, val.position.z], {icon: playerIcon}).bindPopup(
"Player: " + $("<div>").text(val.name).html() +
(HasPermission ("webapi.getplayerinventory") ?
"<br/><a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
: "")
);
marker.on("move", function ( e ) {
if ( this.isPopupOpen () ) {
map.flyTo (e.latlng, map.getZoom ());
}
});
playersMappingList[val.steamid] = { online: !val.online };
}
if (val.online) {
onlineIds.push (val.steamid);
}
oldpos = marker.getLatLng ();
if ( playersMappingList[val.steamid].online != val.online ) {
if (playersMappingList[val.steamid].online) {
playersOnlineMarkerGroup.removeLayer(marker);
playersOfflineMarkerGroup.addLayer(marker);
} else {
playersOfflineMarkerGroup.removeLayer(marker);
playersOnlineMarkerGroup.addLayer(marker);
}
}
if ( oldpos.lat != val.position.x || oldpos.lng != val.position.z ) {
marker.setLatLng([val.position.x, val.position.z]);
if (val.online) {
marker.setOpacity(1.0);
} else {
marker.setOpacity(0.5);
}
}
val.currentPosMarker = marker;
playersMappingList[val.steamid] = val;
}
else
{
var marker;
if (playersMappingList.hasOwnProperty(val.steamid)) {
marker = playersMappingList[val.steamid].currentPosMarker;
} else {
marker = L.marker([val.position.x, val.position.z], {icon: playerOfflineIcon}).bindPopup(
"Player: " + $("<div>").text(val.name).html() +
(HasPermission ("webapi.getplayerinventory") ?
"<br/><a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
: "")
);
marker.on("move", function ( e ) {
if ( this.isPopupOpen () ) {
map.flyTo (e.latlng, map.getZoom ());
}
});
playersMappingList[val.steamid] = { online: !val.online };
}
if (val.online) {
onlineIds.push (val.steamid);
}
oldpos = marker.getLatLng ();
if ( playersMappingList[val.steamid].online != val.online ) {
if (playersMappingList[val.steamid].online) {
playersOnlineMarkerGroup.removeLayer(marker);
playersOfflineMarkerGroup.addLayer(marker);
} else {
playersOfflineMarkerGroup.removeLayer(marker);
playersOnlineMarkerGroup.addLayer(marker);
}
}
if ( oldpos.lat != val.position.x || oldpos.lng != val.position.z ) {
marker.setLatLng([val.position.x, val.position.z]);
if (val.online) {
marker.setOpacity(1.0);
} else {
marker.setOpacity(0.5);
}
}
val.currentPosMarker = marker;
playersMappingList[val.steamid] = val;
}
});
var online = 0;
var offline = 0;
$.each ( playersMappingList, function ( key, val ) {
if ( val.online && onlineIds.indexOf (key) < 0 ) {
var marker = val.currentPosMarker;
playersOnlineMarkerGroup.removeLayer(marker);
playersOfflineMarkerGroup.addLayer(marker);
val.online = false;
}
if (val.online) {
online++;
} else {
offline++;
}
});
updatingMarkers = false;
$( "#mapControlOnlineCount" ).text( online );
$( "#mapControlOfflineCount" ).text( offline );
}
var updatePlayerTimeout;
var playerUpdateCount = -1;
var updatePlayerEvent = function() {
playerUpdateCount++;
$.getJSON( "../api/getplayerslocation" + ((playerUpdateCount % 15) == 0 ? "?offline=true" : ""))
.done(setPlayerMarkers)
.fail(function(jqxhr, textStatus, error) {
console.log("Error fetching players list");
})
.always(function() {
updatePlayerTimeout = window.setTimeout(updatePlayerEvent, 2000);
});
}
tabs.on ("tabbedcontenttabopened", function (event, data) {
if (data.newTab === "#tab_map") {
if (HasPermission ("webapi.getplayerslocation")) {
updatePlayerEvent ();
}
} else {
window.clearTimeout (updatePlayerTimeout);
}
});
if (tabs.tabbedContent ("isTabOpen", "tab_map")) {
if (HasPermission ("webapi.getplayerslocation")) {
updatePlayerEvent ();
}
}
I have tried placing setTimeout inside this section…
.always(function() {
updatePlayerTimeout = window.setTimeout(updatePlayerEvent, 2000);
>>>>> window.setTimeout(setPlayerMarker, 2000); <<<<<
});
but it crashes the live map